Installeren per platform

Next.js en React

Installeren npm install @blipit/nextjs

@blipit/nextjs geeft je browserfouten, web vitals en session replay vanuit één component in je layout, en fouten uit server components, route handlers en server actions vanuit één regel in instrumentation.ts. Gewone React-apps gebruiken @blipit/browser.

1Installeren

npm install @blipit/nextjs

2Browserkant

Voeg het component één keer toe in de root layout. Het gebruikt de publieke sleutel, die veilig is in browsercode; zet hem 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>
  );
}

3Serverkant

Next.js 15 en later roepen onRequestError aan bij fouten in server components, route handlers en server actions. Eén regel koppelt het aan Blipit. Zet BLIPIT_SECRET_KEY in de serveromgeving, nooit als NEXT_PUBLIC_.

instrumentation.ts

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

4Content Security Policy

Als je app een CSP instelt, voeg dan https://in.blipit.io toe aan connect-src. De SDK wordt met je code gebundeld, dus script-src heeft geen nieuwe host en geen nonce nodig.

5Source maps (optioneel)

Om stack traces je broncode te laten tonen in plaats van de geminificeerde bundel, upload je de maps voor elke release vanuit je build-stap.

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

6Check of het werkt

Voeg een knop toe die een fout gooit, of voer dit uit in de browserconsole. Open Issues in app.blipit.io. Het eerste event verschijnt binnen een paar seconden, gegroepeerd in een issue, en de verantwoordelijken krijgen een e-mail.

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

Goed om te weten

Gewone React zonder Next.js: npm install @blipit/browser en roep Blipit.init aan vóór het renderen; zie Elke website.
Omgeving en release vallen op de server terug op VERCEL_ENV en VERCEL_GIT_COMMIT_SHA als je ze weglaat.
Al op een Sentry SDK? @sentry/nextjs werkt ongewijzigd met de DSN https://<public key>@in.blipit.io/<project id>; sla withSentryConfig over, want die uploadt source maps naar Sentry.

Kom je er niet uit? Mail support@blipit.io. Sleutels en de exacte DSN van elk project staan onder API-sleutels in app.blipit.io.