Instalar por plataforma

Next.js e React

Instalar npm install @blipit/nextjs

O @blipit/nextjs oferece erros de navegador, web vitals e replay de sessão a partir de um componente no seu layout, e erros de server components, route handlers e server actions a partir de uma linha em instrumentation.ts. Apps React simples usam @blipit/browser.

1Instalar

npm install @blipit/nextjs

2Lado do navegador

Adicione o componente uma vez no layout raiz. Ele usa a chave pública, que é segura em código de navegador; coloque-a em 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>
  );
}

3Lado do servidor

O Next.js 15 e posteriores chamam onRequestError para erros em server components, route handlers e server actions. Uma linha o conecta ao Blipit. Defina BLIPIT_SECRET_KEY no ambiente do servidor, nunca como NEXT_PUBLIC_.

instrumentation.ts

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

4Content Security Policy

Se o seu app define uma CSP, adicione https://in.blipit.io a connect-src. O SDK é empacotado com o seu código, então script-src não precisa de novo host nem de nonce.

5Source maps (opcional)

Para que os stack traces mostrem seu código-fonte em vez do bundle minificado, envie os maps de cada release a partir da sua etapa de build.

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

6Confira se funciona

Adicione um botão que lança um erro, ou execute isto no console do navegador. Abra Problemas em app.blipit.io. O primeiro evento aparece em alguns segundos, agrupado em um problema, e os responsáveis recebem um e-mail.

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

Bom saber

React simples sem Next.js: npm install @blipit/browser e chame Blipit.init antes de renderizar; veja Qualquer site.
Ambiente e release usam VERCEL_ENV e VERCEL_GIT_COMMIT_SHA como padrão no servidor quando você os omite.
Já usa um SDK do Sentry? O @sentry/nextjs funciona sem alterações com o DSN https://<public key>@in.blipit.io/<project id>; pule o withSentryConfig, que envia source maps para o Sentry.

Travou? Envie um e-mail para support@blipit.io. As chaves e o DSN exato de cada projeto ficam em Chaves de API no app.blipit.io.