Instalar por plataforma

Next.js y React

Instalar npm install @blipit/nextjs

@blipit/nextjs te da errores de navegador, web vitals y session replay desde un componente en tu layout, y errores de componentes de servidor, route handlers y server actions desde una línea en instrumentation.ts. Las apps de React sin Next.js usan @blipit/browser.

1Instalar

npm install @blipit/nextjs

2Lado del navegador

Añade el componente una vez en el layout raíz. Usa la clave pública, que es segura en código de navegador; ponla en 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 del servidor

Next.js 15 y posteriores llaman a onRequestError para los errores en componentes de servidor, route handlers y server actions. Una línea lo conecta con Blipit. Define BLIPIT_SECRET_KEY en el entorno del servidor, nunca como NEXT_PUBLIC_.

instrumentation.ts

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

4Content Security Policy

Si tu app define una CSP, añade https://in.blipit.io a connect-src. El SDK se empaqueta con tu código, así que script-src no necesita ningún host nuevo ni nonce.

5Source maps (opcional)

Para que los stack traces muestren tu código fuente en lugar del bundle minificado, sube los maps de cada release desde tu paso de build.

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

6Comprueba que funciona

Añade un botón que lance un error, o ejecuta esto en la consola del navegador. Abre Incidencias en app.blipit.io. El primer evento aparece en unos segundos, agrupado en una incidencia, y los responsables reciben un correo.

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

Conviene saber

React sin Next.js: npm install @blipit/browser y llama a Blipit.init antes de renderizar; consulta Cualquier sitio web.
En el servidor, environment y release toman por defecto VERCEL_ENV y VERCEL_GIT_COMMIT_SHA cuando los omites.
¿Ya usas un SDK de Sentry? @sentry/nextjs funciona sin cambios con el DSN https://<public key>@in.blipit.io/<project id>; omite withSentryConfig, que sube los source maps a Sentry.

¿Atascado? Escribe a support@blipit.io. Las claves y el DSN exacto de cada proyecto están en Claves API en app.blipit.io.