Installation nach Plattform

Next.js und React

Installation npm install @blipit/nextjs

@blipit/nextjs liefert Browser-Fehler, Web Vitals und Session Replay aus einer Komponente in Ihrem Layout sowie Fehler aus Server Components, Route Handlers und Server Actions aus einer Zeile in instrumentation.ts. Reine React-Apps verwenden @blipit/browser.

1Installation

sh
npm install @blipit/nextjs

2Browserseite

Fügen Sie die Komponente einmal im Root-Layout hinzu. Sie verwendet den öffentlichen Schlüssel, der in Browser-Code sicher ist; legen Sie ihn in NEXT_PUBLIC_BLIPIT_KEY ab.

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>
  );
}

3Serverseite

Next.js 15 und neuer rufen onRequestError bei Fehlern in Server Components, Route Handlers und Server Actions auf. Eine Zeile verbindet es mit Blipit. Setzen Sie BLIPIT_SECRET_KEY in der Server-Umgebung, nie als NEXT_PUBLIC_.

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

4Content Security Policy

Wenn Ihre App eine CSP setzt, fügen Sie https://in.blipit.io zu connect-src hinzu. Das SDK wird mit Ihrem Code gebündelt, daher braucht script-src keinen neuen Host und keine Nonce.

5Source Maps (optional)

Damit Stack Traces Ihren Quellcode statt des minifizierten Bundles zeigen, laden Sie die Maps für jedes Release aus Ihrem Build-Schritt hoch.

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

6Prüfen, ob es funktioniert

Fügen Sie einen Button hinzu, der einen Fehler wirft, oder führen Sie dies in der Browser-Konsole aus. Öffnen Sie Issues in app.blipit.io. Das erste Event erscheint innerhalb weniger Sekunden, gruppiert zu einem Issue, und die verantwortlichen Personen erhalten eine E-Mail.

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

Gut zu wissen

  • Reines React ohne Next.js: npm install @blipit/browser und Blipit.init vor dem Rendern aufrufen; siehe Beliebige Website.
  • Umgebung und Release fallen auf dem Server auf VERCEL_ENV und VERCEL_GIT_COMMIT_SHA zurück, wenn Sie sie weglassen.
  • Bereits auf einem Sentry-SDK? @sentry/nextjs funktioniert unverändert mit dem DSN https://<public key>@in.blipit.io/<project id>; lassen Sie withSentryConfig weg, das Source Maps zu Sentry hochlädt.

Kommen Sie nicht weiter? Schreiben Sie an support@blipit.io. Schlüssel und den genauen DSN jedes Projekts finden Sie unter API-Schlüssel in app.blipit.io.