Quick start

Inertia has no Flare client of its own. You install the client for the framework your pages are written in, then add @flareapp/inertia so navigations between Inertia pages are traced.

Set up your framework first:

• React
• Vue

Then come back here.

Tracing navigations

@flareapp/inertia adds one function, traceInertiaRouter, that traces Inertia's client-side page visits. Each visit becomes a browser_navigation trace: it opens when the visit starts and settles once the new page has arrived, named after the Inertia page component (for example Products/Show) instead of the raw URL.

This needs tracing turned on in the framework client you just set up:

import { flare } from '@flareapp/js';

flare.configure({ enableTracing: true, tracesSampleRate: 1 });

Install the package:

npm install @flareapp/inertia

Call traceInertiaRouter with Inertia's router object, before Inertia boots your app. Calling it early means the very first page load is traced too, not just the navigations that follow it.

// app.tsx
import { router } from '@inertiajs/react';
import { traceInertiaRouter } from '@flareapp/inertia';

traceInertiaRouter(router);

// app.js
import { router } from '@inertiajs/vue3';
import { traceInertiaRouter } from '@flareapp/inertia';

traceInertiaRouter(router);

You do not need to hold on to anything traceInertiaRouter returns. It gives back a cleanup function that removes the tracing again, which is only useful if you call it more than once (for example, in a hot-reload teardown) and want the old listeners gone first.

What gets traced

A visit to a different page opens one browser_navigation span, and that span is the root of a trace. It runs from the start of the visit until the new page component has rendered, so it covers the whole wait, not just the server response.

The span is named after Inertia's page component, for example Products/Show, not the URL. Visits to the same component group together in Flare instead of appearing once per URL.

A redirect is still one span. A form that posts to /login and lands on /dashboard gives you a single navigation span, named after /dashboard.

A request that stays on the same page opens a browser_xhr span instead of a navigation span. Prefetching, polling, deferred props and infinite scroll all go through router.reload(), which re-requests the current URL. The span joins the open trace, or starts its own if no trace is open. A trace closes one second after its last activity, so a poll on an idle page usually gets a small trace to itself.

Your own fetch() calls are recorded the same way, as browser_fetch spans.

What is not traced

• Requests to Flare's own endpoints. Reports, logs and spans are sent untraced, so they never show up in your traces.
• Component render times. These need profiling turned on in the React or Vue package, covered below.
• What your backend did during the visit. The navigation span measures the wait, not the server's work.

Profiling components

Inertia pages are React or Vue components, so component profiling comes from the framework package you already installed, not from @flareapp/inertia. See profiling introduction for React or profiling introduction for Vue.