Integration · Vite

Vite

One plugin in vite.config.ts and one wrapper in your React entry file. The plugin auto-injects the canonical browser integration script into your index.html so you don't hand-edit HTML; the <NreactiveProvider> wraps your app in an Error Boundary so React render errors — which window.onerror does not see — get captured too. Works with Vite 4, 5, and 6 on Node ≥ 20.

AI-assisted setup

Paste the prompt below into Claude Code, Cursor, Copilot, or Codex — your agent will detect your package manager, install the package, register the plugin in vite.config.ts, wrap your app in the provider, and add the environment variable.

AI agent prompt · Vite

You are adding the @nreactive/vite SDK to this Vite + React project. nreactive is a production error-monitoring service that opens AI-generated pull requests to fix the errors it catches. The Vite adapter has two pieces that work together: a Vite plugin that injects the canonical browser integration script into index.html, and a <NreactiveProvider> React component that wraps the app in an Error Boundary so React render errors (which window.onerror does NOT see) are captured too.

Do the following with the project's existing package manager (detect it from the lockfile: package-lock.json → npm, pnpm-lock.yaml → pnpm, yarn.lock → yarn, bun.lockb → bun):

1. Install the package @nreactive/vite.
2. In "vite.config.ts" (or "vite.config.js"), import the plugin from "@nreactive/vite" and add it to the plugins array, AFTER any framework plugin like @vitejs/plugin-react:

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

     export default defineConfig({
       plugins: [react(), nreactive()],
     });

   Do not pass an explicit appId option — the plugin reads VITE_NREACTIVE_APP_ID from the environment. Passing it inline would bake it into source.
3. In the React entry file (commonly "src/main.tsx" or "src/main.jsx"), import NreactiveProvider from "@nreactive/vite/react" and wrap the rendered tree:

     import { NreactiveProvider } from "@nreactive/vite/react";

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

4. Add VITE_NREACTIVE_APP_ID= to .env.example (create it if missing) and to .env.local for local development. The user obtains their App ID from https://nreactive.com/dashboard/apps. Vite only exposes env vars prefixed with VITE_ to client code, which is why this prefix is required.
5. If the project already includes <script src="https://nreactive.com/integration.js"> in index.html, REMOVE it — the plugin now injects the script for you, and running both would double-fire events.
6. Verify by adding a button that throws synchronously inside a component (e.g. <button onClick={() => { throw new Error("nreactive test"); }}>boom</button>) and clicking it. Within a few seconds the event should appear on the Errors page of the dashboard.

Do not invent additional configuration. Stop and ask if the project is not using Vite, or if it is a Next.js / Remix / SvelteKit project (those have their own integrations).

Manual setup

Get your App ID

Sign in and grab your App ID from the Apps page. It looks like app_ab12cd34ef. Export it as VITE_NREACTIVE_APP_ID in your .env or .env.local so Vite exposes it to the plugin and the bundle.

Install

pnpm add @nreactive/vite

Or npm install @nreactive/vite / yarn add … / bun add …. The package ships its own React provider — no separate react install needed beyond the one your app already has.

Wire it up

Add the plugin to vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import nreactive from "@nreactive/vite";
 
export default defineConfig({
  plugins: [react(), nreactive()],
});

Wrap your app once in src/main.tsx:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { NreactiveProvider } from "@nreactive/vite/react";
import App from "./App";
 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <NreactiveProvider>
      <App />
    </NreactiveProvider>
  </StrictMode>,
);

The plugin and provider work independently — the plugin handles every error window.onerror sees (uncaught exceptions, unhandled rejections, fetch/XHR failures, console errors, CSP violations, long tasks); the provider handles React render errors that React swallows into componentDidCatch. Most apps want both.

Verify

Restart the dev server (Vite needs to re-read vite.config.ts) and trigger an error:

function Boom() {
  return (
    <button onClick={() => { throw new Error("nreactive test"); }}>
      boom
    </button>
  );
}

Click the button. Within a few seconds the event shows up on the Errors page of your dashboard with the React component stack appended to the JS stack.

Next steps

See your errorsOpen the dashboard and watch events stream in.Go to errors Turn on auto-fixLet nreactive open the pull request for you.See pricing