# 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](/docs/react/getting-started/quick-start)
- [Vue](/docs/vue/getting-started/quick-start)

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:

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

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

Install the package:

```bash
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.

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

traceInertiaRouter(router);
```

```ts tab=vue
// 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](/docs/react/profiling/introduction) or
[profiling introduction for Vue](/docs/vue/profiling/introduction).