Install by platform

Next.js and React

Install npm install @blipit/nextjs

@blipit/nextjs gives you browser errors, web vitals and session replay from one component in your layout, and server component, route handler and server action errors from one line in instrumentation.ts. Plain React apps use @blipit/browser.

1Install

npm install @blipit/nextjs

2Browser side

Add the component once in the root layout. It uses the public key, which is safe in browser code; put it in NEXT_PUBLIC_BLIPIT_KEY.

app/layout.tsx

import { Blipit } from "@blipit/nextjs";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Blipit
          publicKey={process.env.NEXT_PUBLIC_BLIPIT_KEY!}
          environment={process.env.NEXT_PUBLIC_VERCEL_ENV ?? "development"}
          release={process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA}
          replay={{ onErrorSampleRate: 1 }}
        />
        {children}
      </body>
    </html>
  );
}

3Server side

Next.js 15 and later call onRequestError for errors in server components, route handlers and server actions. One line wires it to Blipit. Set BLIPIT_SECRET_KEY in the server environment, never as NEXT_PUBLIC_.

instrumentation.ts

export { captureRequestError as onRequestError } from "@blipit/nextjs/server";

4Content Security Policy

If your app sets a CSP, add https://in.blipit.io to connect-src. The SDK is bundled with your code, so script-src needs no new host and no nonce.

5Source maps (optional)

So stack traces show your source instead of the minified bundle, upload the maps for each release from your build step.

BLIPIT_KEY=<secret key> npx @blipit/cli sourcemaps upload .next/static --release "$VERCEL_GIT_COMMIT_SHA"

6Check it works

Add a button that throws, or run this in the browser console. Open Issues in app.blipit.io. The first event appears within a few seconds, grouped into an issue, and the people in charge get an email.

import { captureMessage } from "@blipit/nextjs";
captureMessage("Hello from Next.js");

Good to know

Plain React without Next.js: npm install @blipit/browser and call Blipit.init before rendering; see Any website.
Environment and release default to VERCEL_ENV and VERCEL_GIT_COMMIT_SHA on the server when you leave them out.
Already on a Sentry SDK? @sentry/nextjs works unchanged with the DSN https://<public key>@in.blipit.io/<project id>; skip withSentryConfig, which uploads source maps to Sentry.

Stuck? Email support@blipit.io. Keys and the exact DSN for each project are under API keys in app.blipit.io.