Installazione per piattaforma

Next.js e React

Installazione npm install @blipit/nextjs

@blipit/nextjs ti dà errori del browser, web vitals e session replay da un solo componente nel layout, ed errori di server component, route handler e server action da una sola riga in instrumentation.ts. Le app React semplici usano @blipit/browser.

1Installazione

npm install @blipit/nextjs

2Lato browser

Aggiungi il componente una volta nel layout root. Usa la chiave pubblica, sicura nel codice del browser; mettila 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>
  );
}

3Lato server

Next.js 15 e successivi chiamano onRequestError per gli errori in server component, route handler e server action. Una riga lo collega a Blipit. Imposta BLIPIT_SECRET_KEY nell'ambiente del server, mai come NEXT_PUBLIC_.

instrumentation.ts

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

4Content Security Policy

Se la tua app imposta una CSP, aggiungi https://in.blipit.io a connect-src. L'SDK è incluso nel bundle con il tuo codice, quindi script-src non ha bisogno di nuovi host né di nonce.

5Source map (facoltativo)

Perché gli stack trace mostrino il tuo sorgente invece del bundle minificato, carica le map di ogni release dal tuo passaggio di build.

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

6Verifica che funzioni

Aggiungi un pulsante che lancia un errore, oppure esegui questo nella console del browser. Apri Issue in app.blipit.io. Il primo evento compare entro pochi secondi, raggruppato in una issue, e i responsabili ricevono un'email.

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

Buono a sapersi

React semplice senza Next.js: npm install @blipit/browser e chiama Blipit.init prima del rendering; vedi Qualsiasi sito web.
Ambiente e release sul server usano per impostazione predefinita VERCEL_ENV e VERCEL_GIT_COMMIT_SHA quando li ometti.
Sei già su un SDK Sentry? @sentry/nextjs funziona senza modifiche con il DSN https://<public key>@in.blipit.io/<project id>; salta withSentryConfig, che carica le source map su Sentry.

Bloccato? Scrivi a support@blipit.io. Le chiavi e il DSN esatto di ogni progetto sono sotto Chiavi API in app.blipit.io.