Instalar Blipit

1Obtén tus claves

Inicia sesión en app.blipit.io y abre Claves API en la barra lateral y luego tu proyecto. Cada proyecto tiene dos claves. La clave pública empieza por blipit_pk_: va en el código del navegador y de las apps, solo puede enviar eventos y cualquiera puede verla sin riesgo. La clave secreta empieza por blipit_sk_: se queda en tu servidor o en Odoo, nunca en un navegador, porque también puede leer y cambiar incidencias. La clave secreta solo se muestra una vez, justo al crearla, así que cópiala entonces; si la pierdes, pulsa Crear una nueva clave secreta y la anterior deja de funcionar al instante. Algunos SDKs también necesitan el id del proyecto, que aparece en la misma página.

2Con npm

Llama a init una vez en tu archivo de entrada, antes de que la app se renderice, con la clave pública. Con Vite (React, Vue, Svelte), guarda la clave en .env como VITE_BLIPIT_KEY; solo las variables VITE_ llegan al navegador, y el servidor de desarrollo lee .env solo al arrancar.

npm install @blipit/browser

VITE_BLIPIT_KEY=blipit_pk_your_public_key

import * as Blipit from "@blipit/browser";

Blipit.init({
  key: import.meta.env.VITE_BLIPIT_KEY,
  environment: import.meta.env.MODE,
  release: "2026.09.28",
  replay: { onErrorSampleRate: 1 },
});

3Sin bundler: una etiqueta script

Pega esto en el <head> de cada página, o en el espacio para código personalizado de tu plataforma, con tu clave pública escrita. No pasa nada: la clave pública solo puede enviar eventos.

<script src="https://blipit.io/sdk/blipit.js"></script>
<script>
  Blipit.init({ key: "blipit_pk_your_public_key", environment: "production", release: "2026.09.28", replay: { onErrorSampleRate: 1 } });
</script>

4Mantén las claves fuera de git

Guarda las claves en variables de entorno o en los ajustes de secretos de tu hosting, nunca en código que subas con commit, y añade tus archivos .env a .gitignore. Una clave pública en una página web es normal. Si alguna vez una clave secreta acaba en git, en una página pública, en una captura o en un chat, abre Claves API, pulsa Crear una nueva clave secreta y pega la nueva clave donde se usaba la anterior: la clave anterior deja de funcionar al instante.

.env
.env.local
.env.*.local

5Dile a Blipit quién es el usuario (opcional)

Tras el inicio de sesión, adjunta el usuario para que las incidencias muestren quién se vio afectado y los replays puedan buscarse por usuario.

Blipit.setUser({ id: "42", email: "ana@example.com" });

6React, Vue, Angular y Svelte: reporta los errores capturados

Los frameworks capturan los errores dentro de los componentes antes de que el navegador los vea, así que pásalos también a Blipit. Los errores no capturados en cualquier otro sitio se reportan solos.

createRoot(document.getElementById("root")!, {
  onCaughtError: (error) => Blipit.captureException(error),
  onUncaughtError: (error) => Blipit.captureException(error),
}).render(<App />);

class ErrorBoundary extends React.Component<{ children: React.ReactNode }, { failed: boolean }> {
  state = { failed: false };
  static getDerivedStateFromError() {
    return { failed: true };
  }
  componentDidCatch(error: Error) {
    Blipit.captureException(error);
  }
  render() {
    return this.state.failed ? <p>Something went wrong.</p> : this.props.children;
  }
}

const app = createApp(App);
app.config.errorHandler = (err) => Blipit.captureException(err);
app.mount("#app");

import { ErrorHandler } from "@angular/core";
import * as Blipit from "@blipit/browser";

class BlipitErrorHandler implements ErrorHandler {
  handleError(error: unknown) {
    Blipit.captureException(error);
    console.error(error);
  }
}

export const appConfig = { providers: [{ provide: ErrorHandler, useClass: BlipitErrorHandler }] };

import * as Blipit from "@blipit/browser";
import type { HandleClientError } from "@sveltejs/kit";

export const handleError: HandleClientError = ({ error }) => {
  Blipit.captureException(error);
};

7Informes de errores: el botón Reportar un error

En cuanto el SDK arranca con tu clave pública, aparece un botón Reportar un error en la esquina inferior derecha de cada página, en el idioma del visitante. Un clic abre el formulario de reporte: una captura de la página para marcar, un selector de elementos, una grabación de pantalla opcional y un título y una descripción. Cambia la posición, el estilo, el texto, el color y el atajo de teclado en el código, como se muestra abajo, o para todos tus sitios a la vez en app.blipit.io, Ajustes del proyecto, Widget de informes de errores; las opciones del código tienen prioridad. La guía del botón de informes de errores muestra cada opción con capturas y una demo en vivo.

Blipit.init({
  key: import.meta.env.VITE_BLIPIT_KEY,
  feedbackWidget: {
    position: "bottom-left",
    style: "icon",
    text: "Report Issue",
    color: "#E11D48",
    shortcut: "ctrl+shift+b",
  },
});

8Abre el formulario de reporte desde tu propio botón

Para poner un botón Reportar un error en tu propio encabezado o menú, usa el oficial: Blipit.reportButton() devuelve un botón listo con el icono de Blipit y Reportar un error en el idioma del visitante, y las apps de React pueden mostrar <BlipitReportButton /> desde @blipit/nextjs/react (npm install @blipit/nextjs). ¿Prefieres tu propio diseño? Llama a openReport() desde cualquier manejador de clic, o a attachReport(element) para conectar un elemento que ya existe. En ambos casos el formulario se abre igual que desde el botón flotante. El icono de Blipit solo puede usarse junto a Reportar un error, como muestra el botón oficial.

<nav id="help-menu"></nav>
<script>
  document.getElementById("help-menu").append(Blipit.reportButton());
</script>

import { BlipitReportButton } from "@blipit/nextjs/react";

export function Header() {
  return (
    <header>
      <a href="/">Acme</a>
      <BlipitReportButton variant="outline" size="sm" />
    </header>
  );
}

<script setup>
import { onMounted, ref } from "vue";
import { reportButton } from "@blipit/browser";

const slot = ref();
onMounted(() => slot.value.append(reportButton({ variant: "outline", size: "sm" })));
</script>

<template>
  <span ref="slot"></span>
</template>

<button id="report-issue">Report Issue</button>
<script>
  Blipit.attachReport(document.getElementById("report-issue"));
</script>

<button onclick="Blipit.openReport()">Report Issue</button>

import { openReport } from "@blipit/browser";

export function ReportIssue() {
  return <button onClick={() => openReport()}>Report Issue</button>;
}

<script setup>
import { openReport } from "@blipit/browser";
</script>

<template>
  <button @click="openReport()">Report Issue</button>
</template>

9Ocultar el botón por defecto

Para quedarte solo con tu propio botón, desactiva el flotante con feedbackWidget: false en el código (feedbackWidget={false} en <Blipit />), o desactiva Mostrar el botón de informes en los ajustes del Widget de informes de errores del proyecto para ocultarlo en todos los sitios que usan la clave. openReport() y attachReport() siguen funcionando en cualquier caso.

Blipit.init({ key: import.meta.env.VITE_BLIPIT_KEY, feedbackWidget: false });

10Rellena el formulario de reporte y añade contexto

Llama a setUser tras el inicio de sesión: el nombre y el correo de quien reporta se rellenan solos, y recibe un correo cuando respondes o cambias el estado. setReportMetadata añade tus propios campos, como el plan o el tamaño del carrito, a cada reporte; se ejecuta cuando se envía un reporte, así que los valores están al día.

Blipit.setUser({ id: "42", username: "Ana Lima", email: "ana@example.com" });

Blipit.setReportMetadata(() => ({ plan: "pro", cartItems: cart.length }));

11Todas las opciones y funciones

• key: la clave pública (blipit_pk_). Obligatoria.
• environment y release: se muestran en cada evento; release habilita las regresiones y los source maps. environment toma por defecto production.
• debug: true registra en la consola lo que hace el SDK, con líneas que empiezan por [blipit].
• sampleRate (de 0 a 1), ignoreErrors (cadenas o patrones) y beforeSend (edita un evento, o devuelve null para descartarlo) controlan lo que se envía. autoMuteExtensions (activado por defecto) descarta los errores que solo vienen de extensiones del navegador.
• webVitals (activado por defecto), replay ({ sessionSampleRate, onErrorSampleRate }) y autoSessionTracking (tasas sin fallos, necesita release).
• feedbackWidget: false oculta el botón Reportar un error, o un objeto con position, style, text, color y shortcut lo cambia. theme: "light", "dark" o "auto" define el tema del formulario de reporte.
• user ({ id, name, email }) y company (un nombre o { id, name }) rellenan el formulario de reporte y se añaden a los reportes.
• endpoint: solo para una ingesta self-hosted; el valor por defecto es https://in.blipit.io/api/v1/events.
• Funciones: captureException(error), captureMessage(text, level), setUser, setTag(key, value), addBreadcrumb({ category, message }), openReport(), attachReport(element), reportButton(options), updateWidget(options), setReportMetadata(fn), showFeedback() y flush(), que devuelve una promesa cuando se han enviado los eventos en cola.
• Los cambios en los ajustes del widget hechos en el panel llegan a los navegadores en menos de una hora, porque el SDK los guarda ese tiempo; una ventana privada muestra el cambio al instante.

12Comprueba que funciona

Recarga tu sitio. El botón Reportar un error aparece en la esquina inferior derecha y, en menos de un minuto, la vista de página aparece en Web vitals en app.blipit.io. Después envía un evento de prueba: llama una vez a captureMessage desde tu código o, con la etiqueta script, ejecuta la línea de abajo en la consola del navegador. Aparece en Incidencias en unos segundos.

Blipit.captureMessage("Hello from " + location.host, "info");

13Si el botón o los eventos no aparecen

• Abre la consola del navegador y busca las líneas que empiezan por [blipit]. Activa debug (debug: true en init, o debug en <Blipit />) para ver si el botón se mostró, se desactivó en el código o lo ocultó el ajuste del proyecto.
• Next.js solo envía al navegador las variables cuyo nombre empieza por NEXT_PUBLIC_, así que usa NEXT_PUBLIC_BLIPIT_KEY. Vite solo envía las variables VITE_, así que usa VITE_BLIPIT_KEY. Con cualquier otro nombre la clave queda vacía en el navegador y Blipit no arranca.
• Reinicia el servidor de desarrollo después de añadir o cambiar .env o .env.local. Solo los lee al arrancar.
• En Vercel o en cualquier otro hosting, añade la misma variable en las variables de entorno del proyecto y vuelve a desplegar. Los valores NEXT_PUBLIC_ y VITE_ se escriben en el build, así que un despliegue en marcha nunca ve un valor añadido después.
• Usa la clave pública (blipit_pk_). Una clave secreta (blipit_sk_) se rechaza en el navegador con un error en la consola; si alguna vez estuvo en una página, crea una nueva clave secreta.
• En Next.js, <Blipit /> va en el app/layout.tsx raíz (o en pages/_app.tsx) para que se ejecute en todas las páginas. En otras apps, llama a init una vez en el archivo de entrada, antes de que la app se renderice.
• Mostrar el botón de informes tiene que estar activado en app.blipit.io, Ajustes del proyecto, Widget de informes de errores, y tu código no debe pasar feedbackWidget: false. El SDK guarda los ajustes del proyecto hasta una hora, así que prueba los cambios en una ventana privada.
• Los bloqueadores de anuncios y las extensiones de privacidad pueden bloquear in.blipit.io. Prueba en una ventana privada con las extensiones desactivadas.
• Si tu sitio envía una Content Security Policy, permite script-src https://blipit.io, connect-src https://in.blipit.io, img-src data: y media-src blob:. El editor del reporte se carga desde blipit.io/sdk con el primer clic, la captura se dibuja a partir de una imagen data: y las grabaciones de pantalla también se suben a in.blipit.io. Con debug activado, la consola indica cuándo la política bloqueó la captura. Para que las grabaciones de pantalla tengan voz, la cabecera Permissions-Policy de tu sitio debe permitir microphone=(self), y display-capture=(self) para grabar la pantalla; con microphone=() las grabaciones funcionan sin sonido.
• Comprueba qué versión está instalada con npm ls @blipit/browser @blipit/nextjs (o pnpm list @blipit/browser @blipit/nextjs) y compárala con el registro de cambios. pnpm 11 espera un día antes de instalar una versión nueva (minimum-release-age), así que el día del lanzamiento pnpm add instala sin avisar la versión anterior. Para obtener la nueva enseguida: pnpm add @blipit/browser@<version> @blipit/nextjs@<version> --config.minimum-release-age=0.
• ¿Sigue sin funcionar? Escribe a support@blipit.io con las líneas [blipit] de la consola.

1Instalar

npm install @blipit/nextjs

2Obtén tus claves

Inicia sesión en app.blipit.io y abre Claves API en la barra lateral y luego tu proyecto. Cada proyecto tiene dos claves. La clave pública empieza por blipit_pk_: va en el código del navegador y de las apps, solo puede enviar eventos y cualquiera puede verla sin riesgo. La clave secreta empieza por blipit_sk_: se queda en tu servidor o en Odoo, nunca en un navegador, porque también puede leer y cambiar incidencias. La clave secreta solo se muestra una vez, justo al crearla, así que cópiala entonces; si la pierdes, pulsa Crear una nueva clave secreta y la anterior deja de funcionar al instante. Algunos SDKs también necesitan el id del proyecto, que aparece en la misma página.

3Pon las claves en .env.local

Crea .env.local en la raíz del proyecto con la clave pública para el navegador y, si usas el lado del servidor descrito abajo, la clave secreta para el servidor. Solo los nombres que empiezan por NEXT_PUBLIC_ llegan al navegador, así que nunca le pongas ese prefijo a la clave secreta. Reinicia npm run dev después de guardar el archivo. Para producción, añade las mismas variables en tu hosting (en Vercel: Project, Settings, Environment Variables, para Production y Preview) y vuelve a desplegar: los valores NEXT_PUBLIC_ se escriben en el build, así que un despliegue hecho antes de añadirlos tiene la clave vacía.

NEXT_PUBLIC_BLIPIT_KEY=blipit_pk_your_public_key
BLIPIT_SECRET_KEY=blipit_sk_your_secret_key

4Lado del navegador

Añade el componente una sola vez en el layout raíz. Lee la clave pública de NEXT_PUBLIC_BLIPIT_KEY. Si la variable está vacía, no inicia nada y lo indica en la consola del navegador.

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

5Lado 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 en instrumentation.ts lo conecta con Blipit. Desde @blipit/nextjs 0.2.1, la misma línea también funciona en apps con un middleware.ts y en rutas Edge (runtime = "edge"): la app compila y los errores del middleware y de Edge también se reportan. Next.js 14 no tiene onRequestError, así que envuelve cada route handler y server action con withBlipit, como en el segundo ejemplo: reporta el error y lo vuelve a lanzar, y omite las redirecciones y notFound(). Define BLIPIT_SECRET_KEY en el entorno del servidor, nunca como NEXT_PUBLIC_.

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

import { withBlipit } from "@blipit/nextjs/server";

export const GET = withBlipit(async (request: Request) => {
  return Response.json(await loadOrders());
});

6Dependencias y salud del servidor

Desde @blipit/nextjs 0.3, exporta también register para que Blipit arranque con el servidor. Así registra las llamadas a la base de datos y a servicios externos en la página Dependencias, y la CPU, memoria y bucle de eventos del servidor en Salud del servidor. No hace nada en el runtime Edge. En Vercel, register puede no ver la petición entrante: desde @blipit/nextjs 0.4, envuelve los route handlers y server actions en withBlipit y cada uno se convierte en una petición en la página Pulse con sus llamadas a la base de datos y a servicios externos, enviada después de la respuesta sin retrasarla.

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

import { withBlipit } from "@blipit/nextjs/server";

export const GET = withBlipit(async (request: Request) => Response.json(await loadOrders()));

7Errores capturados por error.tsx

Los errores que captura un boundary error.tsx o global-error.tsx nunca llegan al manejador de errores del navegador, así que repórtalos desde el boundary. Ambos archivos son client components.

"use client";

import { useEffect } from "react";
import { captureException } from "@blipit/nextjs";

export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  useEffect(() => {
    captureException(error);
  }, [error]);
  return (
    <div>
      <p>Something went wrong.</p>
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}

"use client";

import { useEffect } from "react";
import { captureException } from "@blipit/nextjs";

export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
  useEffect(() => {
    captureException(error);
  }, [error]);
  return (
    <html>
      <body>
        <p>Something went wrong.</p>
      </body>
    </html>
  );
}

8Mantén las claves fuera de git

Guarda las claves en variables de entorno o en los ajustes de secretos de tu hosting, nunca en código que subas con commit, y añade tus archivos .env a .gitignore. Una clave pública en una página web es normal. Si alguna vez una clave secreta acaba en git, en una página pública, en una captura o en un chat, abre Claves API, pulsa Crear una nueva clave secreta y pega la nueva clave donde se usaba la anterior: la clave anterior deja de funcionar al instante.

.env
.env.local
.env.*.local

9Content Security Policy

Si tu sitio envía una Content Security Policy, permite script-src https://blipit.io (la etiqueta script, y el editor del reporte y el complemento de replay, que se cargan desde blipit.io/sdk/<version>/ la primera vez que se usan), connect-src https://in.blipit.io (los eventos, las capturas y las grabaciones de pantalla van todos a in.blipit.io), img-src data: (la captura se dibuja a partir de una imagen de la página) y media-src blob: (las grabaciones se reproducen en el reporte). La captura vuelve a cargar las imágenes y fuentes de la página, así que sus hosts también deben estar en connect-src; si no, quedan en blanco. No hace falta cambiar style-src. Con la etiqueta script, llama a Blipit.init desde tu propio archivo .js o da un nonce al script en línea, porque una política estricta bloquea los scripts en línea. Para que las grabaciones de pantalla tengan voz, la cabecera Permissions-Policy de tu sitio debe permitir microphone=(self), y display-capture=(self) para grabar la pantalla; con microphone=() las grabaciones funcionan sin sonido.

10Source 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"

11Informes de errores: el botón Reportar un error

En cuanto el SDK arranca con tu clave pública, aparece un botón Reportar un error en la esquina inferior derecha de cada página, en el idioma del visitante. Un clic abre el formulario de reporte: una captura de la página para marcar, un selector de elementos, una grabación de pantalla opcional y un título y una descripción. Cambia la posición, el estilo, el texto, el color y el atajo de teclado en el código, como se muestra abajo, o para todos tus sitios a la vez en app.blipit.io, Ajustes del proyecto, Widget de informes de errores; las opciones del código tienen prioridad. La guía del botón de informes de errores muestra cada opción con capturas y una demo en vivo.

<Blipit
  publicKey={process.env.NEXT_PUBLIC_BLIPIT_KEY!}
  feedbackWidget={{
    position: "bottom-left",
    style: "icon",
    text: "Report Issue",
    color: "#E11D48",
    shortcut: "ctrl+shift+b",
  }}
/>

12Abre el formulario de reporte desde tu propio botón

Pon el botón oficial donde quieras con <BlipitReportButton />, también en server components: muestra el icono de Blipit y Reportar un error en el idioma del visitante y abre el formulario. ¿Prefieres tu propio diseño? El componente que llama a openReport debe ser un client component, así que pon "use client" al principio de su archivo. <Blipit /> ya debe estar en app/layout.tsx. Las apps de React sin Next.js importan el botón desde @blipit/nextjs/react y openReport desde @blipit/browser.

import { BlipitReportButton } from "@blipit/nextjs";

export function Header() {
  return (
    <header>
      <a href="/">Acme</a>
      <BlipitReportButton />
    </header>
  );
}

import { BlipitReportButton } from "@blipit/nextjs/react";

<BlipitReportButton variant="outline" size="sm" />

"use client";

import { openReport } from "@blipit/nextjs";

export function ReportIssue() {
  return <button onClick={() => openReport()}>Report Issue</button>;
}

import { openReport } from "@blipit/browser";

export function ReportIssue() {
  return <button onClick={() => openReport()}>Report Issue</button>;
}

13Ocultar el botón por defecto

Para quedarte solo con tu propio botón, desactiva el flotante con feedbackWidget: false en el código (feedbackWidget={false} en <Blipit />), o desactiva Mostrar el botón de informes en los ajustes del Widget de informes de errores del proyecto para ocultarlo en todos los sitios que usan la clave. openReport() y attachReport() siguen funcionando en cualquier caso.

<Blipit publicKey={process.env.NEXT_PUBLIC_BLIPIT_KEY!} feedbackWidget={false} />

14Rellena el formulario de reporte y añade contexto

Llama a setUser tras el inicio de sesión: el nombre y el correo de quien reporta se rellenan solos, y recibe un correo cuando respondes o cambias el estado. setReportMetadata añade tus propios campos, como el plan o el tamaño del carrito, a cada reporte; se ejecuta cuando se envía un reporte, así que los valores están al día.

"use client";

import { useEffect } from "react";
import { setReportMetadata, setUser } from "@blipit/nextjs";

export function BlipitUser({ user }: { user: { id: string; name: string; email: string; plan: string } }) {
  useEffect(() => {
    setUser({ id: user.id, username: user.name, email: user.email });
    setReportMetadata(() => ({ plan: user.plan }));
  }, [user]);
  return null;
}

15Comprueba que funciona

Recarga la app. El botón Reportar un error aparece en la esquina inferior derecha y, en menos de un minuto, la vista de página aparece en Web vitals en app.blipit.io. Después añade un botón que llame a captureMessage, o uno que lance un error, y haz clic: el evento aparece en Incidencias en unos segundos.

"use client";
import { captureMessage } from "@blipit/nextjs";

export function TestBlipit() {
  return <button onClick={() => captureMessage("Hello from Next.js")}>Send a test event</button>;
}

16Si el botón o los eventos no aparecen

• Abre la consola del navegador y busca las líneas que empiezan por [blipit]. Activa debug (debug: true en init, o debug en <Blipit />) para ver si el botón se mostró, se desactivó en el código o lo ocultó el ajuste del proyecto.
• Next.js solo envía al navegador las variables cuyo nombre empieza por NEXT_PUBLIC_, así que usa NEXT_PUBLIC_BLIPIT_KEY. Vite solo envía las variables VITE_, así que usa VITE_BLIPIT_KEY. Con cualquier otro nombre la clave queda vacía en el navegador y Blipit no arranca.
• Reinicia el servidor de desarrollo después de añadir o cambiar .env o .env.local. Solo los lee al arrancar.
• En Vercel o en cualquier otro hosting, añade la misma variable en las variables de entorno del proyecto y vuelve a desplegar. Los valores NEXT_PUBLIC_ y VITE_ se escriben en el build, así que un despliegue en marcha nunca ve un valor añadido después.
• Usa la clave pública (blipit_pk_). Una clave secreta (blipit_sk_) se rechaza en el navegador con un error en la consola; si alguna vez estuvo en una página, crea una nueva clave secreta.
• En Next.js, <Blipit /> va en el app/layout.tsx raíz (o en pages/_app.tsx) para que se ejecute en todas las páginas. En otras apps, llama a init una vez en el archivo de entrada, antes de que la app se renderice.
• Mostrar el botón de informes tiene que estar activado en app.blipit.io, Ajustes del proyecto, Widget de informes de errores, y tu código no debe pasar feedbackWidget: false. El SDK guarda los ajustes del proyecto hasta una hora, así que prueba los cambios en una ventana privada.
• Los bloqueadores de anuncios y las extensiones de privacidad pueden bloquear in.blipit.io. Prueba en una ventana privada con las extensiones desactivadas.
• Si tu sitio envía una Content Security Policy, permite script-src https://blipit.io, connect-src https://in.blipit.io, img-src data: y media-src blob:. El editor del reporte se carga desde blipit.io/sdk con el primer clic, la captura se dibuja a partir de una imagen data: y las grabaciones de pantalla también se suben a in.blipit.io. Con debug activado, la consola indica cuándo la política bloqueó la captura. Para que las grabaciones de pantalla tengan voz, la cabecera Permissions-Policy de tu sitio debe permitir microphone=(self), y display-capture=(self) para grabar la pantalla; con microphone=() las grabaciones funcionan sin sonido.
• Comprueba qué versión está instalada con npm ls @blipit/browser @blipit/nextjs (o pnpm list @blipit/browser @blipit/nextjs) y compárala con el registro de cambios. pnpm 11 espera un día antes de instalar una versión nueva (minimum-release-age), así que el día del lanzamiento pnpm add instala sin avisar la versión anterior. Para obtener la nueva enseguida: pnpm add @blipit/browser@<version> @blipit/nextjs@<version> --config.minimum-release-age=0.
• ¿Sigue sin funcionar? Escribe a support@blipit.io con las líneas [blipit] de la consola.

1Instalar

npm install @blipit/node

2Obtén tus claves

Inicia sesión en app.blipit.io y abre Claves API en la barra lateral y luego tu proyecto. Cada proyecto tiene dos claves. La clave pública empieza por blipit_pk_: va en el código del navegador y de las apps, solo puede enviar eventos y cualquiera puede verla sin riesgo. La clave secreta empieza por blipit_sk_: se queda en tu servidor o en Odoo, nunca en un navegador, porque también puede leer y cambiar incidencias. La clave secreta solo se muestra una vez, justo al crearla, así que cópiala entonces; si la pierdes, pulsa Crear una nueva clave secreta y la anterior deja de funcionar al instante. Algunos SDKs también necesitan el id del proyecto, que aparece en la misma página.

3Guarda la clave en el entorno

Node usa la clave secreta. Ponla en una variable de entorno, nunca en el código: en local, en un archivo .env que Node 20.6 y posteriores cargan con --env-file; en producción, en las variables de entorno o los ajustes de secretos de tu hosting (Fly secrets, Docker, systemd, Render, Vercel). Reinicia el proceso después de cambiarla.

BLIPIT_SECRET_KEY=blipit_sk_your_secret_key

node --env-file=.env --import ./instrument.mjs server.mjs

4Mantén las claves fuera de git

Guarda las claves en variables de entorno o en los ajustes de secretos de tu hosting, nunca en código que subas con commit, y añade tus archivos .env a .gitignore. Una clave pública en una página web es normal. Si alguna vez una clave secreta acaba en git, en una página pública, en una captura o en un chat, abre Claves API, pulsa Crear una nueva clave secreta y pega la nueva clave donde se usaba la anterior: la clave anterior deja de funcionar al instante.

.env
.env.local
.env.*.local

5Inicializa primero

Pon esto en un archivo que se ejecute antes que tu app, e impórtalo primero.

import * as Blipit from "@blipit/node";

Blipit.init({
  key: process.env.BLIPIT_SECRET_KEY,
  environment: process.env.NODE_ENV,
  release: process.env.RELEASE,
  serverName: "api",
});

6Express, Fastify, Koa, Hono o NestJS

Añade el handler después de tus rutas para que tanto los errores controlados como los no controlados lleguen a Blipit, con el método, la URL y el user agent de la petición. Koa, Hono y NestJS necesitan una línea cada uno: el middleware de Koa va primero y el de Hono antes de las rutas. Informan de los errores con estado 500 o superior. Las peticiones aparecen entonces en la página Pulse por ruta, como GET /users/:id, en lugar de una línea por URL.

import "./instrument.mjs";
import * as Blipit from "@blipit/node";
import express from "express";

const app = express();
app.get("/", (req, res) => res.send("ok"));
app.use(Blipit.expressErrorHandler());
app.listen(3000);

await app.register(Blipit.fastifyPlugin());

app.use(Blipit.koaMiddleware());

app.use(Blipit.honoMiddleware());

app.useGlobalInterceptors(Blipit.nestInterceptor());

7Serverless: AWS Lambda y Vercel

Los hosts serverless pausan la función en cuanto responde, y Lambda no ejecuta el servidor HTTP de Node, así que envuelve el handler. wrapHandler registra la petición (eventos de API Gateway, URL de función y balanceador por método y ruta, otros eventos por nombre de función), informa de los errores y lo envía todo antes de que el handler devuelva; solo espera cuando hay algo que enviar, 2 segundos como máximo. traceRequest hace lo mismo con cualquier handler que reciba una Request. En Vercel los datos salen después de la respuesta mediante waitUntil, así que nada se retrasa. En Next.js usa withBlipit (consulta la guía de Next.js).

import * as Blipit from "@blipit/node";

export const handler = Blipit.wrapHandler(async (event, context) => {
  return { statusCode: 200, body: "ok" };
});

export default { fetch: (request) => Blipit.traceRequest(request, () => app.fetch(request)) };

8Captura manual, logs e intentos de inicio de sesión

Blipit.captureException(err);
Blipit.captureMessage("cache miss rate above 50%", "warning");
Blipit.setUser({ id: "user-42" });
Blipit.log.info("order placed", { order_id: 42 });
Blipit.captureSecurity({ kind: "login_failed", actor: email, ip, userAgent, outcome: "bad_password" });
await Blipit.flush();

9Dependencias y salud del servidor

Desde la 0.2 el SDK también registra tus llamadas a la base de datos y a servicios externos, y la CPU, memoria y bucle de eventos de tu servidor. Consulta las guías Dependencias y Salud del servidor; se controla con tracesSampleRate, tracing: false y metrics: false.

10Comprueba que funciona

Abre Incidencias en app.blipit.io. El primer evento aparece en unos segundos, agrupado en una incidencia, y los responsables reciben un correo.

Blipit.captureMessage("Hello from Node");

1Instalar

pip install blipit

2Inicializa al arrancar

En Django, ponlo al principio de settings.py. En Flask o FastAPI, antes de crear la app. La clave está en la página Claves del proyecto. Con una clave vacía, init registra un aviso y devuelve False en lugar de lanzar una excepción, así que una clave que falta nunca impide que la app arranque.

import blipit

blipit.init(
    key="<public key>",
    environment="production",
    release="myapp@1.4.2",
)

3Obtén tus claves

Inicia sesión en app.blipit.io y abre Claves API en la barra lateral y luego tu proyecto. Cada proyecto tiene dos claves. La clave pública empieza por blipit_pk_: va en el código del navegador y de las apps, solo puede enviar eventos y cualquiera puede verla sin riesgo. La clave secreta empieza por blipit_sk_: se queda en tu servidor o en Odoo, nunca en un navegador, porque también puede leer y cambiar incidencias. La clave secreta solo se muestra una vez, justo al crearla, así que cópiala entonces; si la pierdes, pulsa Crear una nueva clave secreta y la anterior deja de funcionar al instante. Algunos SDKs también necesitan el id del proyecto, que aparece en la misma página.

4Guarda la clave en el entorno

Este SDK envía con la clave pública de la página Claves API del proyecto. Guárdala en una variable de entorno: en local, en un archivo .env que cargue tu framework o python-dotenv; en producción, en los ajustes de tu hosting. Usa la clave secreta solo si envías intentos de inicio de sesión.

BLIPIT_KEY=blipit_pk_your_public_key

import os
import blipit

blipit.init(key=os.environ.get("BLIPIT_KEY"))

5Mantén las claves fuera de git

Guarda las claves en variables de entorno o en los ajustes de secretos de tu hosting, nunca en código que subas con commit, y añade tus archivos .env a .gitignore. Una clave pública en una página web es normal. Si alguna vez una clave secreta acaba en git, en una página pública, en una captura o en un chat, abre Claves API, pulsa Crear una nueva clave secreta y pega la nueva clave donde se usaba la anterior: la clave anterior deja de funcionar al instante.

.env
.env.local
.env.*.local

6Captura manual e intentos de inicio de sesión

Los intentos de inicio de sesión necesitan la clave secreta: en el servidor, inicializa con la clave secreta en lugar de la pública, o la ingesta los rechaza con 403 security_needs_secret_key. Plan Scale.

blipit.capture_exception(err)
blipit.capture_message("cache miss rate above 50%", level="warning")
blipit.set_user({"id": "42", "email": "ana@example.com"})
blipit.set_context("order", {"id": 1042, "total": 99.5})
blipit.capture_security("login_failed", actor=email, ip=request.META.get("REMOTE_ADDR"), outcome="bad_password")

7Comprueba que funciona

Abre Incidencias en app.blipit.io. El primer evento aparece en unos segundos, agrupado en una incidencia, y los responsables reciben un correo.

blipit.capture_message("Hello from Python")

1Instalar

composer require blipit/blipit

2Inicializa al arrancar

PHP sin framework: al principio de tu front controller, antes de atender cualquier petición. Laravel arranca Blipit desde su configuración, como en el siguiente paso. La clave está en la página Claves del proyecto. Con una clave vacía, init escribe un aviso en el log de errores y devuelve false en lugar de lanzar una excepción.

use Blipit\Blipit;

Blipit::init([
    "key" => "<public key>",
    "environment" => "production",
    "release" => "myapp@1.4.2",
]);

3Obtén tus claves

Inicia sesión en app.blipit.io y abre Claves API en la barra lateral y luego tu proyecto. Cada proyecto tiene dos claves. La clave pública empieza por blipit_pk_: va en el código del navegador y de las apps, solo puede enviar eventos y cualquiera puede verla sin riesgo. La clave secreta empieza por blipit_sk_: se queda en tu servidor o en Odoo, nunca en un navegador, porque también puede leer y cambiar incidencias. La clave secreta solo se muestra una vez, justo al crearla, así que cópiala entonces; si la pierdes, pulsa Crear una nueva clave secreta y la anterior deja de funcionar al instante. Algunos SDKs también necesitan el id del proyecto, que aparece en la misma página.

4Guarda la clave en el entorno

Este SDK envía con la clave pública. Laravel: añádela a .env y a config/services.php; el service provider de Blipit se detecta solo y arranca Blipit desde esa configuración, así que no hace falta nada más. Lee los valores a través de config, porque env() no devuelve nada en el código de la app una vez cacheada la configuración. PHP sin framework: lee la clave con getenv() del entorno del servidor.

BLIPIT_KEY=blipit_pk_your_public_key

'blipit' => [
    'key' => env('BLIPIT_KEY'),
    'environment' => env('APP_ENV'),
    'release' => env('GIT_SHA'),
],

5Mantén las claves fuera de git

Guarda las claves en variables de entorno o en los ajustes de secretos de tu hosting, nunca en código que subas con commit, y añade tus archivos .env a .gitignore. Una clave pública en una página web es normal. Si alguna vez una clave secreta acaba en git, en una página pública, en una captura o en un chat, abre Claves API, pulsa Crear una nueva clave secreta y pega la nueva clave donde se usaba la anterior: la clave anterior deja de funcionar al instante.

.env
.env.local
.env.*.local

6Laravel y Symfony

Laravel: toda excepción que reporta su handler llega a Blipit, así que los 404 y los errores de validación quedan fuera. Las consultas, las líneas de log y las llamadas del cliente HTTP se convierten en breadcrumbs, y los jobs en cola se trazan. Una línea Blipit::captureException que ya tengas en bootstrap/app.php puede quedarse: la misma excepción nunca se envía dos veces. Symfony: registra el listener en config/services.yaml y llama a Blipit::init pronto en public/index.php y bin/console.

Blipit\Symfony\BlipitListener:
    arguments: ['@router']
    tags:
        - { name: kernel.event_listener, event: kernel.exception, method: onKernelException }
        - { name: kernel.event_listener, event: kernel.request, method: onKernelRequest }
        - { name: kernel.event_listener, event: kernel.terminate, method: onKernelTerminate }
        - { name: kernel.event_listener, event: console.error, method: onConsoleError }

7Captura manual e intentos de inicio de sesión

Los intentos de inicio de sesión necesitan la clave secreta: en el servidor, inicializa con la clave secreta en lugar de la pública, o la ingesta los rechaza con 403 security_needs_secret_key. Plan Scale.

Blipit::captureException($e);
Blipit::captureMessage("cache miss rate above 50%", "warning");
Blipit::setUser(["id" => "42", "email" => "ana@example.com"]);
Blipit::captureSecurity("login_failed", $email, "bad_password", null, $request->ip(), $request->userAgent());

8Comprueba que funciona

Abre Incidencias en app.blipit.io. El primer evento aparece en unos segundos, agrupado en una incidencia, y los responsables reciben un correo.

Blipit::captureMessage("Hello from PHP");

1Gemfile

gem "blipit"

2Inicializa al arrancar

Rails: config/initializers/blipit.rb; no hay que instalar nada más, porque Blipit añade por su cuenta su middleware de Rack y el reporte de Active Job y Rails.error. Las apps de Rack y Sinatra añaden use Blipit::Rack. Scripts: antes de que se ejecute tu código. La clave está en la página Claves del proyecto. Con una clave vacía, init muestra un aviso y devuelve false en lugar de lanzar una excepción.

Blipit.init(
  key: "<public key>",
  environment: Rails.env,
  release: ENV["RELEASE"],
)

3Obtén tus claves

Inicia sesión en app.blipit.io y abre Claves API en la barra lateral y luego tu proyecto. Cada proyecto tiene dos claves. La clave pública empieza por blipit_pk_: va en el código del navegador y de las apps, solo puede enviar eventos y cualquiera puede verla sin riesgo. La clave secreta empieza por blipit_sk_: se queda en tu servidor o en Odoo, nunca en un navegador, porque también puede leer y cambiar incidencias. La clave secreta solo se muestra una vez, justo al crearla, así que cópiala entonces; si la pierdes, pulsa Crear una nueva clave secreta y la anterior deja de funcionar al instante. Algunos SDKs también necesitan el id del proyecto, que aparece en la misma página.

4Guarda la clave en las credentials de Rails

Este SDK envía con la clave pública. En Rails, guárdala en las credenciales cifradas y léela en el initializer; en otros casos, usa una variable de entorno.

bin/rails credentials:edit

blipit:
  key: blipit_pk_your_public_key

Blipit.init(
  key: Rails.application.credentials.dig(:blipit, :key),
  environment: Rails.env,
)

5Mantén las claves fuera de git

Guarda las claves en variables de entorno o en los ajustes de secretos de tu hosting, nunca en código que subas con commit, y añade tus archivos .env a .gitignore. Una clave pública en una página web es normal. Si alguna vez una clave secreta acaba en git, en una página pública, en una captura o en un chat, abre Claves API, pulsa Crear una nueva clave secreta y pega la nueva clave donde se usaba la anterior: la clave anterior deja de funcionar al instante.

.env
.env.local
.env.*.local

6Captura manual e intentos de inicio de sesión

Los intentos de inicio de sesión necesitan la clave secreta: en el servidor, inicializa con la clave secreta en lugar de la pública, o la ingesta los rechaza con 403 security_needs_secret_key. Plan Scale.

Blipit.capture_exception(e)
Blipit.capture_message("cache miss rate above 50%", level: :warning)
Blipit.set_user(id: "42", email: "ana@example.com")
Blipit.capture_security("login_failed", email, outcome: "bad_password", ip: request.remote_ip, user_agent: request.user_agent)

7Comprueba que funciona

Abre Incidencias en app.blipit.io. El primer evento aparece en unos segundos, agrupado en una incidencia, y los responsables reciben un correo.

Blipit.capture_message("Hello from Rails")

1Instalar

go get github.com/blipit-io/blipit-go

2Inicializa en main

Init nunca hace panic: con una clave o un id de proyecto vacíos devuelve un error y Blipit queda desactivado, así que registra el error en lugar de salir.

import (
    "log"
    "time"

    "github.com/blipit-io/blipit-go"
)

func main() {
    if err := blipit.Init(blipit.Options{
        Key:         "<public key>",
        Project:     "<project id>",
        Environment: "production",
        Release:     "myapp@1.4.2",
    }); err != nil {
        log.Printf("blipit: %v", err)
    }
    defer blipit.Flush(2 * time.Second)
}

3Obtén tus claves

Inicia sesión en app.blipit.io y abre Claves API en la barra lateral y luego tu proyecto. Cada proyecto tiene dos claves. La clave pública empieza por blipit_pk_: va en el código del navegador y de las apps, solo puede enviar eventos y cualquiera puede verla sin riesgo. La clave secreta empieza por blipit_sk_: se queda en tu servidor o en Odoo, nunca en un navegador, porque también puede leer y cambiar incidencias. La clave secreta solo se muestra una vez, justo al crearla, así que cópiala entonces; si la pierdes, pulsa Crear una nueva clave secreta y la anterior deja de funcionar al instante. Algunos SDKs también necesitan el id del proyecto, que aparece en la misma página.

4Guarda la clave en el entorno

Este SDK envía con la clave pública y el id del proyecto. Léelos de variables de entorno definidas por tu hosting, una unidad de systemd o docker run -e.

blipit.Init(blipit.Options{
    Key:     os.Getenv("BLIPIT_KEY"),
    Project: os.Getenv("BLIPIT_PROJECT"),
})

5Mantén las claves fuera de git

Guarda las claves en variables de entorno o en los ajustes de secretos de tu hosting, nunca en código que subas con commit, y añade tus archivos .env a .gitignore. Una clave pública en una página web es normal. Si alguna vez una clave secreta acaba en git, en una página pública, en una captura o en un chat, abre Claves API, pulsa Crear una nueva clave secreta y pega la nueva clave donde se usaba la anterior: la clave anterior deja de funcionar al instante.

.env
.env.local
.env.*.local

6Captura manual e intentos de inicio de sesión

Los intentos de inicio de sesión necesitan la clave secreta: en el servidor, inicializa con la clave secreta en lugar de la pública, o la ingesta los rechaza con 403 security_needs_secret_key. Plan Scale.

blipit.CaptureException(err)
blipit.CaptureMessage("cache miss rate above 50%")
blipit.SetUser(blipit.User{ID: "42", Email: "ana@example.com"})
blipit.CaptureSecurity(blipit.Security{Kind: "login_failed", Actor: email, IP: ip, UserAgent: agent, Outcome: "bad_password"})

7Panics y net/http

defer blipit.Recover() al principio de main o de cualquier goroutine reporta un panic con su stack, envía lo pendiente y vuelve a hacer panic. Envuelve el handler que sirves con blipit.Handler para reportar los panics con la petición y medir cada petición en Pulse, con el nombre de su patrón de ServeMux. Gin, Echo y Fiber usan StartRequest, SetRoute y End, como muestra el README del paquete.

go func() {
    defer blipit.Recover()
    work()
}()

mux := http.NewServeMux()
mux.HandleFunc("GET /items/{id}", item)
http.ListenAndServe(":8080", blipit.Handler(mux))

8Comprueba que funciona

Abre Incidencias en app.blipit.io. El primer evento aparece en unos segundos, agrupado en una incidencia, y los responsables reciben un correo.

blipit.CaptureMessage("Hello from Go")

1Añade el repositorio y la dependencia

repositories {
    mavenCentral()
    maven("https://jitpack.io")
}

dependencies {
    implementation("com.github.blipit-io:blipit-java:v0.2.1")
}

<repositories>
  <repository>
    <id>jitpack.io</id>
    <url>https://jitpack.io</url>
  </repository>
</repositories>

<dependency>
  <groupId>com.github.blipit-io</groupId>
  <artifactId>blipit-java</artifactId>
  <version>v0.2.1</version>
</dependency>

2Inicializa al arrancar

Spring Boot: al principio de main, antes de SpringApplication.run, o en un método @PostConstruct de una clase @Configuration. Las excepciones no capturadas en cualquier hilo se escriben en una cola en disco antes de que la app se detenga y luego se envían, así que un fallo se reporta aunque la red no esté disponible; lo que quede pendiente se envía en el siguiente arranque.

import io.blipit.Blipit;
import io.blipit.BlipitOptions;

Blipit.init(BlipitOptions.builder()
    .key("<public key>")
    .project(<project id>)
    .environment("production")
    .release("myapp@1.4.2")
    .build());

3Obtén tus claves

Inicia sesión en app.blipit.io y abre Claves API en la barra lateral y luego tu proyecto. Cada proyecto tiene dos claves. La clave pública empieza por blipit_pk_: va en el código del navegador y de las apps, solo puede enviar eventos y cualquiera puede verla sin riesgo. La clave secreta empieza por blipit_sk_: se queda en tu servidor o en Odoo, nunca en un navegador, porque también puede leer y cambiar incidencias. La clave secreta solo se muestra una vez, justo al crearla, así que cópiala entonces; si la pierdes, pulsa Crear una nueva clave secreta y la anterior deja de funcionar al instante. Algunos SDKs también necesitan el id del proyecto, que aparece en la misma página.

4Guarda la clave en el entorno

Este SDK envía con la clave pública y el id del proyecto. Léelos de variables de entorno o, en Spring Boot, de application.properties rellenado desde el entorno.

blipit.key=${BLIPIT_KEY}
blipit.project=${BLIPIT_PROJECT}

Blipit.init(BlipitOptions.builder()
    .key(System.getenv("BLIPIT_KEY"))
    .project(Long.parseLong(System.getenv("BLIPIT_PROJECT")))
    .build());

5Mantén las claves fuera de git

Guarda las claves en variables de entorno o en los ajustes de secretos de tu hosting, nunca en código que subas con commit, y añade tus archivos .env a .gitignore. Una clave pública en una página web es normal. Si alguna vez una clave secreta acaba en git, en una página pública, en una captura o en un chat, abre Claves API, pulsa Crear una nueva clave secreta y pega la nueva clave donde se usaba la anterior: la clave anterior deja de funcionar al instante.

.env
.env.local
.env.*.local

6Captura manual e intentos de inicio de sesión

Los intentos de inicio de sesión necesitan la clave secreta: en el servidor, inicializa con la clave secreta en lugar de la pública, o la ingesta los rechaza con 403 security_needs_secret_key. Plan Scale.

Blipit.captureException(err);
Blipit.captureMessage("cache miss rate above 50%");
Blipit.captureMessage("disk almost full", Level.WARNING);
Blipit.setUser("42", "ana@example.com");
Blipit.addBreadcrumb("GET /api/cart 500", "http", Level.ERROR);
Blipit.captureSecurity("login_failed", email, "bad_password", null, ip, userAgent, null);

7Comprueba que funciona

Abre Incidencias en app.blipit.io. El primer evento aparece en unos segundos, agrupado en una incidencia, y los responsables reciben un correo.

Blipit.captureMessage("Hello from Java");

1Instalar

dotnet add package Blipit

2Inicializa al arrancar

Mantén vivo el handle devuelto durante toda la vida del proceso. Ambos valores están en la página de Claves del proyecto.

using Blipit;

using var blipit = Blipit.Blipit.Init(new BlipitOptions
{
    Key = "<public key>",
    Project = "<project id>",
    Environment = "production",
    Release = "myapp@1.4.2",
});

3Obtén tus claves

Inicia sesión en app.blipit.io y abre Claves API en la barra lateral y luego tu proyecto. Cada proyecto tiene dos claves. La clave pública empieza por blipit_pk_: va en el código del navegador y de las apps, solo puede enviar eventos y cualquiera puede verla sin riesgo. La clave secreta empieza por blipit_sk_: se queda en tu servidor o en Odoo, nunca en un navegador, porque también puede leer y cambiar incidencias. La clave secreta solo se muestra una vez, justo al crearla, así que cópiala entonces; si la pierdes, pulsa Crear una nueva clave secreta y la anterior deja de funcionar al instante. Algunos SDKs también necesitan el id del proyecto, que aparece en la misma página.

4Guarda la clave en la configuración

Este SDK envía con la clave pública y el id del proyecto. Guárdalos en user secrets durante el desarrollo y en variables de entorno en producción (Blipit__Key y Blipit__Project), y luego léelos desde la configuración.

dotnet user-secrets set "Blipit:Key" "blipit_pk_your_public_key"
dotnet user-secrets set "Blipit:Project" "12"

using var blipit = Blipit.Blipit.Init(new BlipitOptions
{
    Key = builder.Configuration["Blipit:Key"],
    Project = builder.Configuration["Blipit:Project"],
});

5Mantén las claves fuera de git

Guarda las claves en variables de entorno o en los ajustes de secretos de tu hosting, nunca en código que subas con commit, y añade tus archivos .env a .gitignore. Una clave pública en una página web es normal. Si alguna vez una clave secreta acaba en git, en una página pública, en una captura o en un chat, abre Claves API, pulsa Crear una nueva clave secreta y pega la nueva clave donde se usaba la anterior: la clave anterior deja de funcionar al instante.

.env
.env.local
.env.*.local

6ASP.NET Core y logging

No hay que añadir nada más: llama a Init al principio de Program.cs. Las excepciones de endpoints, controladores y middleware se reportan con la petición, también cuando las gestiona UseExceptionHandler, y con TracesSampleRate configurado cada petición muestreada se mide en Pulse por su ruta. BlipitLoggerProvider convierte Information y superiores en breadcrumbs, y Error y superiores en eventos.

var builder = WebApplication.CreateBuilder(args);
using var blipit = Blipit.Blipit.Init(new BlipitOptions
{
    Key = builder.Configuration["Blipit:Key"],
    Project = builder.Configuration["Blipit:Project"],
    TracesSampleRate = 0.2,
});
builder.Logging.AddProvider(new BlipitLoggerProvider());

7Captura manual e intentos de inicio de sesión

Los intentos de inicio de sesión necesitan la clave secreta: en el servidor, inicializa con la clave secreta en lugar de la pública, o la ingesta los rechaza con 403 security_needs_secret_key. Plan Scale.

Blipit.Blipit.CaptureException(ex);
Blipit.Blipit.CaptureMessage("cache miss rate above 50%", BlipitLevel.Warning);
Blipit.Blipit.SetUser(id: "42", email: "ana@example.com");
Blipit.Blipit.CaptureSecurity("login_failed", email, "bad_password", null, ip, userAgent, null);

8Comprueba que funciona

Abre Incidencias en app.blipit.io. El primer evento aparece en unos segundos, agrupado en una incidencia, y los responsables reciben un correo.

Blipit.Blipit.CaptureMessage("Hello from .NET");

1Obtén tus claves

Inicia sesión en app.blipit.io y abre Claves API en la barra lateral y luego tu proyecto. Cada proyecto tiene dos claves. La clave pública empieza por blipit_pk_: va en el código del navegador y de las apps, solo puede enviar eventos y cualquiera puede verla sin riesgo. La clave secreta empieza por blipit_sk_: se queda en tu servidor o en Odoo, nunca en un navegador, porque también puede leer y cambiar incidencias. La clave secreta solo se muestra una vez, justo al crearla, así que cópiala entonces; si la pierdes, pulsa Crear una nueva clave secreta y la anterior deja de funcionar al instante. Algunos SDKs también necesitan el id del proyecto, que aparece en la misma página.

2React Native

El paquete enlaza un pequeño módulo nativo que arranca los SDKs propios de Blipit para Android e iOS para los fallos nativos; su archivo de Gradle añade el repositorio de JitPack por su cuenta. Envuelve el componente raíz para que también se reporten los errores de renderizado.

npm install @blipit/react-native
npx pod-install

import * as Blipit from "@blipit/react-native";

Blipit.init({ key: "<public key>", project: <project id>, environment: "production", release: "myapp@1.4.2" });

export default Blipit.wrap(App);

3Flutter

Sustituye runApp en main.dart por Blipit.init. El plugin arranca los SDKs propios de Blipit para Android e iOS para los fallos nativos, y los errores del framework de Flutter y los errores asíncronos no capturados se reportan solos.

flutter pub add blipit_flutter

import 'package:blipit_flutter/blipit_flutter.dart';

Future<void> main() async {
  await Blipit.init(
    key: '<public key>',
    project: <project id>,
    environment: 'production',
    release: 'myapp@1.4.2',
    appRunner: () => runApp(const MyApp()),
  );
}

4iOS y macOS (Swift Package)

En Xcode, File, Add Package Dependencies, e introduce la URL del repositorio; o añádelo a Package.swift y añade BlipitSwift a tu target. Con CocoaPods, usa el pod BlipitSwift. Luego llama a start una vez al arrancar. Con una clave o un id de proyecto vacíos, start muestra un aviso y devuelve false en lugar de cerrar la app.

.package(url: "https://github.com/blipit-io/blipit-swift", from: "0.6.0")

pod "BlipitSwift", "~> 0.6.0"

import BlipitSwift

Blipit.start(key: "<public key>", project: "<project id>", environment: "production", release: "myapp@1.4.2")

5Android

Añade JitPack a los repositorios en settings.gradle.kts, la dependencia al módulo de la app, y llama a init en Application.onCreate.

dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
        maven("https://jitpack.io")
    }
}

implementation("com.github.blipit-io:blipit-android:v0.6.0")

import io.blipit.android.Blipit

class App : Application() {
    override fun onCreate() {
        super.onCreate()
        Blipit.init(this) {
            key = "<public key>"
            project = "<project id>"
            environment = "production"
            release = "myapp@1.4.2"
        }
    }
}

6Dónde va la clave en una app

Las apps incluyen la clave pública y el id del proyecto dentro de la app, y no pasa nada: la clave pública solo puede enviar eventos. Nunca pongas la clave secreta en una app. Pásalas al compilar para que no queden en tu repositorio.

flutter run --dart-define=BLIPIT_KEY=blipit_pk_your_public_key --dart-define=BLIPIT_PROJECT=12

const key = String.fromEnvironment('BLIPIT_KEY');
const project = int.fromEnvironment('BLIPIT_PROJECT');

EXPO_PUBLIC_BLIPIT_KEY=blipit_pk_your_public_key
EXPO_PUBLIC_BLIPIT_PROJECT=12

buildConfigField("String", "BLIPIT_KEY", ""${project.findProperty("blipitKey")}"")

BLIPIT_KEY = blipit_pk_your_public_key

7Informes de errores en apps

Llama a showReport desde tu propio menú o activa el botón flotante Informar de un error. El reportador pregunta primero cómo mostrar el problema: hacer una captura, grabar la pantalla (iOS) o solo describirlo. La captura se abre a pantalla completa con las herramientas arriba y abajo, nunca encima; pellizca o toca dos veces para hacer zoom, marca el problema, añade un título y lo que pasó y envía. Los informes llegan a Informes de errores con los datos del dispositivo. React Native necesita react-native-view-shot para las capturas.

import * as Blipit from "@blipit/react-native";

export default function Root() {
  return (
    <Blipit.BlipitReporter showButton>
      <App />
    </Blipit.BlipitReporter>
  );
}

Blipit.showReport();

appRunner: () => runApp(const BlipitReporter(showButton: true, child: MyApp())),

Blipit.showReport();

Blipit.showReportButton()

Blipit.showReport()

Blipit.showReportButton()

Blipit.showReport()

8Informar desde la pantalla con el error

Una opción Informar de un error en un menú como Perfil captura el menú, no el problema. Active las formas que empiezan en la propia pantalla; todas están desactivadas por defecto y no piden ningún permiso. shakeToReport abre el formulario al agitar el teléfono. screenshotToReport pregunta "¿Informar de un error con esta pantalla?" tras una captura normal y adjunta la captura propia de Blipit (iOS y Android 14 o posterior). twoFingerReport lo abre al mantener pulsado con dos dedos alrededor de un segundo, sin bloquear los toques de la app. reportAfterCrash pregunta qué estaba haciendo la persona en el primer arranque tras un fallo y vincula el informe con ese fallo. screenPicker, activado por defecto, permite a quien abre el formulario desde un menú elegir en cuál de las últimas pantallas está el error: las instantáneas se quedan en la memoria del dispositivo y solo se sube la elegida. Las apps con Jetpack Compose y SwiftUI nombran sus pantallas con setScreen.

Blipit.init(this) {
    key = "<public key>"
    project = "<project id>"
    shakeToReport = true
    screenshotToReport = true
    twoFingerReport = true
    reportAfterCrash = true
}

navController.addOnDestinationChangedListener { _, destination, _ ->
    Blipit.setScreen(destination.route ?: "screen")
}

Blipit.start(key: "<public key>", project: "<project id>") { options in
    options.shakeToReport = true
    options.screenshotToReport = true
    options.twoFingerReport = true
    options.reportAfterCrash = true
}

CartView().onAppear { Blipit.setScreen("Cart") }

Blipit.init({
  key: "<public key>",
  project: <project id>,
  shakeToReport: true,
  screenshotToReport: true,
  twoFingerReport: true,
  reportAfterCrash: true,
});

<NavigationContainer ref={navigation} onReady={() => Blipit.trackNavigation(navigation)}>

await Blipit.init(
  key: '<public key>',
  project: <project id>,
  shakeToReport: true,
  screenshotToReport: true,
  twoFingerReport: true,
  reportAfterCrash: true,
  appRunner: () => runApp(BlipitReporter(child: MaterialApp(navigatorObservers: [BlipitNavigatorObserver()], home: const Home()))),
);

9Botón flotante solo para testers

En app.blipit.io, abra el proyecto y, en los ajustes del botón de informes de errores, ponga Botón flotante en apps móviles en Todos o Solo testers, con un ID de usuario o correo por tester. La app envía la persona que definió con setUser y Blipit solo responde sí o no, así que la lista de testers nunca va dentro de la app. Llamar a showReportButton (showButton en React Native y Flutter) sigue mostrando el botón a todos.

Blipit.setUser(id = user.id, email = user.email)

Blipit.setUser(id: user.id, email: user.email)

Blipit.setUser({ id: user.id, email: user.email });

Blipit.setUser(BlipitUser(id: user.id, email: user.email));

10Detectar una app que se queda atascada

Algunos fallos nunca provocan un cierre: la pantalla de inicio sigue girando o el inicio de sesión nunca vuelve. Activa waitForReady y llama a reportReady cuando se muestre la primera pantalla usable. Envuelve flujos como el inicio de sesión con startFlow y endFlow, y marca los pasos con flowStep. Si uno no termina a tiempo, Blipit abre una incidencia Atascada con el último paso y el recorrido anterior. Solo cuenta el tiempo en pantalla, y Blipit fija los límites de tiempo. Los nombres se envían tal cual, así que usa nombres fijos, nunca correos ni otros datos del usuario.

Blipit.init(this) {
    key = "<public key>"
    project = "<project id>"
    waitForReady = true
}

Blipit.reportReady()

Blipit.startFlow("sign-in")
Blipit.flowStep("sign-in", "google-picker")
Blipit.endFlow("sign-in")

Blipit.start(key: "<public key>", project: "<project id>", waitForReady: true)

Blipit.reportReady()

Blipit.startFlow("sign-in")
Blipit.flowStep("sign-in", "apple-sheet")
Blipit.endFlow("sign-in")

Blipit.init({ key: "<public key>", project: <project id>, waitForReady: true });

Blipit.reportReady();

Blipit.startFlow("sign-in");
Blipit.flowStep("sign-in", "google-picker");
Blipit.endFlow("sign-in");

await Blipit.init(key: '<public key>', project: <project id>, waitForReady: true, appRunner: () => runApp(const MyApp()));

Blipit.reportReady();

Blipit.startFlow('sign-in');
Blipit.flowStep('sign-in', 'google-picker');
Blipit.endFlow('sign-in');

11Comprueba que funciona

Abre Incidencias en app.blipit.io. El primer evento aparece en unos segundos, agrupado en una incidencia, y los responsables reciben un correo.

1Instala el módulo

Descárgalo de apps.odoo.com (blipit_monitor, gratis) para tu versión de Odoo e instálalo como cualquier módulo: Aplicaciones, Actualizar lista de aplicaciones, instalar Blipit Error Monitoring. Odoo Online no permite apps de terceros; Odoo.sh y los servidores propios sí.

2Obtén tus claves

Inicia sesión en app.blipit.io y abre Claves API en la barra lateral y luego tu proyecto. Cada proyecto tiene dos claves. La clave pública empieza por blipit_pk_: va en el código del navegador y de las apps, solo puede enviar eventos y cualquiera puede verla sin riesgo. La clave secreta empieza por blipit_sk_: se queda en tu servidor o en Odoo, nunca en un navegador, porque también puede leer y cambiar incidencias. La clave secreta solo se muestra una vez, justo al crearla, así que cópiala entonces; si la pierdes, pulsa Crear una nueva clave secreta y la anterior deja de funcionar al instante. Algunos SDKs también necesitan el id del proyecto, que aparece en la misma página.

3Conectar

Ajustes, Blipit: pega la clave secreta del proyecto, marca la aceptación de los Términos y la licencia del módulo, y pulsa Guardar. Se conecta por sí solo y muestra Conectado a <project>. Una clave pública o una clave ya vinculada a otra base de datos se rechaza indicando el motivo.

4Responsables

Elige a quién se envía el correo, por empresa si tienes varias. Cada persona ocupa una plaza de tu plan; Blipit comprueba el recuento al guardar.

5Informes de errores desde Odoo

El módulo añade el botón Reportar un error a Odoo por ti; no hay que escribir código. En Ajustes, Blipit, Informes de errores, Mostrado a, elige quién lo ve: Usuarios internos, Visitantes del sitio web, Ambos o Nadie, y opcionalmente limita los usuarios internos a un grupo. Los reportes incluyen el modelo, el registro y el campo en los que estaba la persona, y el nombre y el correo del usuario con sesión iniciada se rellenan solos. La posición, el color, el texto y el estilo vienen de app.blipit.io, Ajustes del proyecto, Widget de informes de errores. Consulta la guía del botón de informes de errores para ver todas las opciones.

6Comprueba que funciona

Abre la app Blipit en Odoo. El siguiente error aparece ahí y en la bandeja de entrada de los responsables. Pulsa Actualizar desde Blipit para comprobarlo al instante.