Vite

@interfere/vite captures browser errors and sessions from your React app. Its build plugin connects those events to a release and uploads source maps for readable stack traces. You need Vite 5 or later, React 19 or later, and Node.js 20 or later. For a server-rendered Start app, follow TanStack Start.

Setup

Install the packages

npm install @interfere/vite @interfere/react

pnpm add @interfere/vite @interfere/react

yarn add @interfere/vite @interfere/react

bun add @interfere/vite @interfere/react

Set your keys

Copy the keys from your surface into the build environment:

VITE_INTERFERE_PUBLIC_KEY=YOUR_SURFACE_PUBLIC_KEY
INTERFERE_API_KEY=YOUR_SURFACE_SECRET_KEY
INTERFERE_ENVIRONMENT=staging

Use production for production builds. Only the public key gets a VITE_ prefix. Prefixing the secret key would expose it in the browser bundle.

Connect your build

Enable source maps and add interfere() to your Vite plugins. Keep your other plugins and app configuration.

vite.config.ts

import { interfere } from "@interfere/vite/plugin";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

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

The plugin uploads source maps and registers the build’s release. See Releases and source maps for custom build environments.

Initialize and wrap your app

Call init() in your browser entry point, before React renders.

src/main.tsx

import { init } from "@interfere/vite/init";
import { InterfereProvider } from "@interfere/vite/provider";
import { createRoot } from "react-dom/client";
import App from "./App";

init();

createRoot(document.getElementById("root")!).render(
  <InterfereProvider>
    <App />
  </InterfereProvider>,
);

Set consent during initialization if capture must wait for a visitor’s choice. Review replay masking before recording customer sessions.

Verify capture

After initialization, report a test error from an existing button or event handler in your staging app:

import { capture } from "@interfere/vite/init";

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

Open your surface’s event chart to confirm that traffic arrives, then remove the test call.

Run capture only in production

The Vite browser SDK runs whenever it is initialized. To disable it during local development, use:

init({ enabled: import.meta.env.PROD });

Next steps

User tracking, configure capture and environments, or report handled errors.

Getting started

Product

Settings

Compliance

SDKs

Developer tools

Setup

Verify capture

Next steps

​Setup

​Verify capture

​Next steps

Setup

Verify capture

Next steps