> ## Documentation Index
> Fetch the complete documentation index at: https://interfere.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# TanStack Start

> Initialize browser and server capture in a Start app.

Interfere uses TanStack Start's Vite build and request middleware to capture browser sessions and server requests. The React provider connects browser capture to your route tree, while trace metadata connects browser and server work.

The server integration requires Node.js. Start with a [surface](/docs/product/surfaces) and keep your existing router options and deployment adapter as you follow the steps below.

## Setup

**1. Install and connect the build**

```bash npm theme={null}
npm install @interfere/vite @interfere/react
```

```bash pnpm theme={null}
pnpm add @interfere/vite @interfere/react
```

```bash Yarn theme={null}
yarn add @interfere/vite @interfere/react
```

```bash Bun theme={null}
bun add @interfere/vite @interfere/react
```

Add the Interfere plugin to `vite.config.ts`. Keep your existing plugins, aliases, and deployment adapter. TanStack Start must precede the React plugin:

```ts vite.config.ts theme={null}
import { interfere } from "@interfere/vite/plugin";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  build: { sourcemap: true },
  plugins: [tanstackStart(), react(), interfere()],
});
```

**2. Set browser and server keys**

Copy the keys from your [surface](/docs/product/surfaces) into the build environment:

```env theme={null}
VITE_INTERFERE_PUBLIC_KEY=YOUR_SURFACE_PUBLIC_KEY
INTERFERE_PUBLIC_KEY=YOUR_SURFACE_PUBLIC_KEY
INTERFERE_API_KEY=YOUR_SURFACE_SECRET_KEY
INTERFERE_ENVIRONMENT=staging
```

Provide `INTERFERE_PUBLIC_KEY` and `INTERFERE_ENVIRONMENT` to the server runtime too. Use `production` for production deployments. Keep the secret key in the build environment.

The server integration requires a Node.js runtime. The Cloudflare Workers deployment integration does not provide Node.js server instrumentation.

**3. Initialize browser capture**

Add `init()` to your router module, guarded so it runs only in the browser. Preserve your existing router options:

```tsx src/router.tsx theme={null}
import { init } from "@interfere/vite/init";
import { createRouter } from "@tanstack/react-router";
import { routeTree } from "./routeTree.gen";

if (typeof window !== "undefined") {
  init();
}

export const getRouter = () => createRouter({ routeTree, scrollRestoration: true });
```

**4. Capture server requests**

Add these request middleware entries to `src/start.ts`. Initialization runs before Interfere opens a span for the request. Keep any existing middleware in the array:

```ts src/start.ts theme={null}
import { register } from "@interfere/vite/server";
import { interfereRequestMiddleware } from "@interfere/vite/tanstack-start";
import { createMiddleware, createStart } from "@tanstack/react-start";

const initializeInterfere = createMiddleware().server(async ({ next }) => {
  await register();
  return next();
});

export const startInstance = createStart(() => ({
  requestMiddleware: [initializeInterfere, interfereRequestMiddleware],
}));
```

**5. Connect the root route**

Add the provider around your root route's content and include `traceMeta()` in the head metadata. Preserve your existing document shell, styles, providers, and error boundaries. The example below shows where these additions fit.

> **Root route example**
>
> ```tsx src/routes/__root.tsx theme={null}
> import { InterfereProvider } from "@interfere/vite/provider";
> import { traceMeta } from "@interfere/vite/tanstack-start";
> import { HeadContent, Outlet, Scripts, createRootRoute } from "@tanstack/react-router";
>
> export const Route = createRootRoute({
>   head: () => ({
>     meta: [
>       { charSet: "utf-8" },
>       { name: "viewport", content: "width=device-width, initial-scale=1" },
>       ...traceMeta(),
>     ],
>   }),
>   component: RootComponent,
> });
>
> function RootComponent() {
>   return (
>     <html lang="en">
>       <head>
>         <HeadContent />
>       </head>
>       <body>
>         <InterfereProvider>
>           <Outlet />
>         </InterfereProvider>
>         <Scripts />
>       </body>
>     </html>
>   );
> }
> ```

Set [consent at browser initialization](/docs/sdk/consent.md) and review [replay masking](/docs/sdk/replay-privacy.md) before recording customer sessions.

## Verify capture

Build and deploy to staging. Report a test error from an existing browser event handler, then from a server handler, to check both sides:

```ts Browser theme={null}
import { capture } from "@interfere/vite/init";

capture(new Error("Interfere browser setup test"));
```

```ts Server theme={null}
import { captureError } from "@interfere/vite/server";

captureError(new Error("Interfere server setup test"));
```

Check the surface's event chart for incoming traffic. Keep the server running long enough to send its telemetry, then remove the test calls.

## Next steps

[User tracking](/docs/sdk/identity.md), review [configuration](/docs/sdk/configuration.md), or follow the [investigation walkthrough](/docs/product/problems.md) once a problem appears.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.