Vite (React)

Prerequisites

• A Vite app using React >= 19
• Node.js >= 20

Quick start

1. Install the packages

   npmpnpmyarnbun

   1npm install @interfere/vite @interfere/react

2. Add the plugin to your Vite config

   The plugin stamps your public key into the build and, with build.sourcemap on, uploads source maps so a production stack trace points back to your original code instead of minified output.

   vite.config.ts

   12345678import { interfere } from "@interfere/vite/plugin";
   import react from "@vitejs/plugin-react";
   import { defineConfig } from "vite";
   
   export default defineConfig({
     build: { sourcemap: true },
     plugins: [react(), interfere()],
   });

3. Start the SDK before render

   Call init() before you mount React, so the SDK is capturing the moment your app loads.

   src/main.tsx

   12345678910111213import { init } from "@interfere/vite/init";
   import { StrictMode } from "react";
   import { createRoot } from "react-dom/client";
   
   import { App } from "./app";
   
   init();
   
   createRoot(document.getElementById("root")!).render(
     <StrictMode>
       <App />
     </StrictMode>
   );

4. Add the provider

   Wrap your app once so components can reach the SDK through hooks.

   src/app.tsx

   12345import { InterfereProvider } from "@interfere/vite/provider";
   
   export function App() {
     return <InterfereProvider>{/* your routes */}</InterfereProvider>;
   }

Environment variables

Configuration

Name your app

1init({ serviceName: "@acme/storefront" });

Environments

1INTERFERE_ENVIRONMENT=production

Custom ingest domain

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

export default defineConfig({
  build: { sourcemap: true },
  plugins: [react(), interfere({ apiHost: "https://in.yourapp.com" })],
});

Choose what's captured

1<InterfereProvider plugins={{ replay: false }}>{/* your routes */}</InterfereProvider>

Identity

123456789101112131415161718import { useInterfere } from "@interfere/vite/provider";

function SyncIdentity() {
  const { identity } = useInterfere();
  const { user } = useAuthProvider(); // Clerk, Auth0, etc.

  useEffect(() => {
    if (!user) return;
    identity.set({
      identifier: user.id,
      name: user.name,
      email: user.email,
      source: { type: "clerk", name: "Clerk" },
    });
  }, [user]);

  return null;
}

Consent

123<InterfereProvider consent={{ analytics: true, replay: false }}>
  {/* your routes */}
</InterfereProvider>

1234const { consent } = useInterfere();

consent.set({ analytics: true, replay: true }); // selective
consent.set(); // grant everything

Mask replay data

123<input className="interfere-block" />                {/* whole element dropped */}
<input className="interfere-ignore" />               {/* input events not recorded */}
<span className="interfere-mask">$128,400.00</span>  {/* text + children masked */}

12345678910<InterfereProvider
  plugins={{
    replay: {
      maskInputOptions: { email: true }, // mask specific input types
      // maskAllInputs: true,            // or mask every input value
    },
  }}
>
  {/* your routes */}
</InterfereProvider>

Report a handled error

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

try {
  await saveDraft();
} catch (error) {
  capture(error);
}

Server-side rendering

1. Boot server instrumentation and browser init from the router

   Call register() on the server (OTel bootstrap) and init() in the browser. Guard on typeof window so each half only runs where it should.

   src/router.tsx

   12345678910111213import { init } from "@interfere/vite/init";
   import { register } from "@interfere/vite/server";
   import { createRouter } from "@tanstack/react-router";
   import { routeTree } from "./routeTree.gen";
   
   if (typeof window === "undefined") {
     register().catch(() => {});
   } else {
     init();
   }
   
   export const getRouter = () =>
     createRouter({ routeTree, scrollRestoration: true });

   You can drop step 3 (init() in main.tsx) from the Quick start — the router handles it now.
2. Wrap the root route with the provider

   src/routes/__root.tsx

   12345678910import { InterfereProvider } from "@interfere/vite/provider";
   import { Outlet } from "@tanstack/react-router";
   
   function RootComponent() {
     return (
       <InterfereProvider>
         <Outlet />
       </InterfereProvider>
     );
   }

12345678import { captureError } from "@interfere/vite/server";

try {
  await chargeCard();
} catch (error) {
  captureError(error);
  throw error;
}

Other frameworks

Next.js

@interfere/next: a build plugin, server instrumentation, and a provider for the App Router.

NestJS

@interfere/nest: a backend module plus instrument.ts for server error capture.

FAQ