Installation par plateforme

Next.js et React

Installation npm install @blipit/nextjs

@blipit/nextjs vous donne les erreurs navigateur, les web vitals et le session replay depuis un composant dans votre layout, et les erreurs des composants serveur, route handlers et server actions depuis une ligne dans instrumentation.ts. Les applications React simples utilisent @blipit/browser.

1Installation

sh
npm install @blipit/nextjs

2Côté navigateur

Ajoutez le composant une fois dans le layout racine. Il utilise la clé publique, sans risque dans le code navigateur ; placez-la dans 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>
  );
}

3Côté serveur

Next.js 15 et suivants appellent onRequestError pour les erreurs des composants serveur, route handlers et server actions. Une ligne le relie à Blipit. Définissez BLIPIT_SECRET_KEY dans l'environnement serveur, jamais en NEXT_PUBLIC_.

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

4Content Security Policy

Si votre application définit une CSP, ajoutez https://in.blipit.io à connect-src. Le SDK est bundlé avec votre code, script-src n'a donc besoin ni de nouvel hôte ni de nonce.

5Source maps (facultatif)

Pour que les stack traces affichent votre source au lieu du bundle minifié, envoyez les maps de chaque release depuis votre étape de build.

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

6Vérifier que ça fonctionne

Ajoutez un bouton qui lève une erreur, ou exécutez ceci dans la console du navigateur. Ouvrez Problèmes dans app.blipit.io. Le premier événement apparaît en quelques secondes, regroupé en un problème, et les responsables reçoivent un e-mail.

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

Bon à savoir

  • React simple sans Next.js : npm install @blipit/browser et appelez Blipit.init avant le rendu ; voir Tout site web.
  • Environment et release prennent par défaut VERCEL_ENV et VERCEL_GIT_COMMIT_SHA côté serveur si vous les omettez.
  • Déjà sur un SDK Sentry ? @sentry/nextjs fonctionne sans modification avec le DSN https://<public key>@in.blipit.io/<project id> ; ignorez withSentryConfig, qui envoie les source maps à Sentry.

Bloqué ? Écrivez à support@blipit.io. Les clés et le DSN exact de chaque projet sont sous Clés API dans app.blipit.io.