Installer Blipit

1Obtenir vos clés

Connectez-vous sur app.blipit.io et ouvrez Clés API dans la barre latérale, puis votre projet. Chaque projet a deux clés. La clé publique commence par blipit_pk_ : elle va dans le code navigateur et applicatif, ne peut qu'envoyer des événements et peut être vue par n'importe qui sans risque. La clé secrète commence par blipit_sk_ : elle reste sur votre serveur ou dans Odoo, jamais dans un navigateur, car elle peut aussi lire et modifier les problèmes. La clé secrète n'est affichée qu'une fois, juste après sa création, alors copiez-la à ce moment-là ; si vous la perdez, appuyez sur Créer une nouvelle clé secrète, et l'ancienne cesse aussitôt de fonctionner. Certains SDK ont aussi besoin de l'identifiant de projet, affiché sur la même page.

2Avec npm

Appelez init une seule fois dans votre fichier d'entrée, avant le rendu de l'application, avec la clé publique. Avec Vite (React, Vue, Svelte), gardez la clé dans .env sous le nom VITE_BLIPIT_KEY ; seules les variables VITE_ atteignent le navigateur, et le serveur de développement ne lit .env qu'au démarrage.

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

3Sans bundler : une balise script

Collez ceci dans le <head> de chaque page, ou dans l'emplacement de code personnalisé de votre plateforme, avec votre clé publique écrite en clair. Ce n'est pas un problème : la clé publique ne peut qu'envoyer des événements.

<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>

4Gardez les clés hors de git

Gardez les clés dans des variables d'environnement ou dans les réglages de secrets de votre hébergeur, jamais dans du code que vous committez, et ajoutez vos fichiers .env à .gitignore. Une clé publique dans une page web est normale. Si une clé secrète se retrouve un jour dans git, sur une page publique, dans une capture d'écran ou dans un chat, ouvrez Clés API, appuyez sur Créer une nouvelle clé secrète, et collez la nouvelle clé partout où l'ancienne était utilisée : l'ancienne clé cesse immédiatement de fonctionner.

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

5Indiquer à Blipit qui est l'utilisateur (facultatif)

Après la connexion, attachez l'utilisateur pour que les problèmes indiquent qui a été touché et que les replays puissent être retrouvés par utilisateur.

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

6React, Vue, Angular et Svelte : signaler les erreurs interceptées

Les frameworks interceptent les erreurs dans les composants avant que le navigateur ne les voie, donc transmettez-les aussi à Blipit. Les erreurs non interceptées partout ailleurs sont signalées d'elles-mêmes.

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

7Rapports de bugs : le bouton Signaler un bug

Dès que le SDK démarre avec votre clé publique, un bouton Signaler un bug apparaît dans le coin inférieur droit de chaque page, dans la langue du visiteur. Un clic ouvre le formulaire de signalement : une capture de la page à annoter, un sélecteur d'élément, un enregistrement d'écran facultatif, ainsi qu'un titre et une description. Modifiez la position, le style, le texte, la couleur et le raccourci clavier dans le code, comme ci-dessous, ou pour tous vos sites à la fois dans app.blipit.io, Paramètres du projet, Widget de rapport de bug ; les options du code l'emportent. Le guide du bouton de rapport de bug présente chaque option avec des captures d'écran et une démo en direct.

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

8Ouvrir le formulaire depuis votre propre bouton

Pour placer un bouton Signaler un bug dans votre propre en-tête ou menu, utilisez le bouton officiel : Blipit.reportButton() renvoie un bouton prêt à l'emploi avec l'icône Blipit et Signaler un bug dans la langue du visiteur, et les apps React peuvent afficher <BlipitReportButton /> depuis @blipit/nextjs/react (npm install @blipit/nextjs). Vous préférez votre propre design ? Appelez openReport() depuis n'importe quel gestionnaire de clic, ou attachReport(element) pour brancher un élément qui existe déjà. Dans les deux cas, le formulaire s'ouvre exactement comme depuis le bouton flottant. L'icône Blipit ne peut être utilisée qu'à côté de Signaler un bug, comme le montre le bouton officiel.

<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>

9Masquer le bouton par défaut

Pour ne garder que votre propre bouton, désactivez le bouton flottant avec feedbackWidget: false dans le code (feedbackWidget={false} sur <Blipit />), ou désactivez Afficher le bouton de rapport de bug dans les réglages Widget de rapport de bug du projet pour le masquer sur tous les sites qui utilisent la clé. openReport() et attachReport() continuent de fonctionner dans les deux cas.

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

10Pré-remplir le formulaire et ajouter du contexte

Appelez setUser après la connexion : le nom et l'e-mail de la personne qui signale sont pré-remplis, et elle reçoit un e-mail quand vous répondez ou changez le statut. setReportMetadata ajoute vos propres champs, comme le forfait ou la taille du panier, à chaque signalement ; il s'exécute à l'envoi du signalement, donc les valeurs sont à jour.

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

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

11Toutes les options et fonctions

• key : la clé publique (blipit_pk_). Obligatoire.
• environment et release : affichés sur chaque événement ; release alimente les régressions et les source maps. environment vaut production par défaut.
• debug: true affiche dans la console ce que fait le SDK, avec des lignes qui commencent par [blipit].
• sampleRate (de 0 à 1), ignoreErrors (chaînes ou motifs) et beforeSend (modifie un événement, ou renvoie null pour l'ignorer) contrôlent ce qui est envoyé. autoMuteExtensions (activé par défaut) ignore les erreurs qui proviennent uniquement d'extensions de navigateur.
• webVitals (activé par défaut), replay ({ sessionSampleRate, onErrorSampleRate }) et autoSessionTracking (taux sans crash, nécessite release).
• feedbackWidget: false masque le bouton Signaler un bug, ou un objet avec position, style, text, color et shortcut le modifie. theme: "light", "dark" ou "auto" définit le thème du formulaire.
• user ({ id, name, email }) et company (un nom ou { id, name }) pré-remplissent le formulaire et sont ajoutés aux signalements.
• endpoint : uniquement pour un ingest auto-hébergé ; la valeur par défaut est https://in.blipit.io/api/v1/events.
• Fonctions : captureException(error), captureMessage(text, level), setUser, setTag(key, value), addBreadcrumb({ category, message }), openReport(), attachReport(element), reportButton(options), updateWidget(options), setReportMetadata(fn), showFeedback() et flush(), qui renvoie une promesse une fois les événements en file d'attente envoyés.
• Les réglages du widget modifiés dans le tableau de bord atteignent les navigateurs en moins d'une heure, car le SDK les conserve aussi longtemps ; une fenêtre privée affiche la modification immédiatement.

12Vérifier que ça fonctionne

Rechargez votre site. Le bouton Signaler un bug apparaît dans le coin inférieur droit, et en moins d'une minute la page vue s'affiche sous Web vitals dans app.blipit.io. Envoyez ensuite un événement de test : appelez captureMessage une fois depuis votre code, ou, avec la balise script, exécutez la ligne ci-dessous dans la console du navigateur. Il apparaît sous Problèmes en quelques secondes.

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

13Si le bouton ou les événements n'apparaissent pas

• Ouvrez la console du navigateur et cherchez les lignes qui commencent par [blipit]. Activez debug (debug: true dans init, ou debug sur <Blipit />) pour savoir si le bouton a été affiché, désactivé dans le code ou masqué par le réglage du projet.
• Next.js n'envoie au navigateur que les variables dont le nom commence par NEXT_PUBLIC_, donc utilisez NEXT_PUBLIC_BLIPIT_KEY. Vite n'envoie que les variables VITE_, donc utilisez VITE_BLIPIT_KEY. Avec tout autre nom, la clé est vide dans le navigateur et Blipit ne démarre pas.
• Redémarrez le serveur de développement après avoir ajouté ou modifié .env ou .env.local. Il ne les lit qu'au démarrage.
• Sur Vercel ou tout autre hébergeur, ajoutez la même variable dans les variables d'environnement du projet et redéployez. Les valeurs NEXT_PUBLIC_ et VITE_ sont écrites dans le build, donc un déploiement en cours ne voit jamais une valeur ajoutée plus tard.
• Utilisez la clé publique (blipit_pk_). Une clé secrète (blipit_sk_) est refusée dans le navigateur avec une erreur dans la console ; si l'une d'elles s'est déjà retrouvée sur une page, créez une nouvelle clé secrète.
• Dans Next.js, <Blipit /> se place dans le app/layout.tsx racine (ou pages/_app.tsx) pour s'exécuter sur chaque page. Dans les autres applications, appelez init une seule fois dans le fichier d'entrée, avant le rendu de l'application.
• Afficher le bouton de rapport de bug doit être activé dans app.blipit.io, Paramètres du projet, Widget de rapport de bug, et votre code ne doit pas passer feedbackWidget: false. Le SDK conserve les paramètres du projet jusqu'à une heure, donc testez une modification dans une fenêtre privée.
• Les bloqueurs de publicité et les extensions de confidentialité peuvent bloquer in.blipit.io. Essayez une fenêtre privée avec les extensions désactivées.
• Si votre site envoie une Content Security Policy, autorisez script-src https://blipit.io, connect-src https://in.blipit.io, img-src data: et media-src blob:. L'éditeur du signalement se charge depuis blipit.io/sdk au premier clic, la capture est dessinée à partir d'une image data: et les enregistrements d'écran sont eux aussi envoyés à in.blipit.io. Avec debug, la console indique quand la politique a bloqué la capture. Pour que les enregistrements d'écran aient du son, l'en-tête Permissions-Policy de votre site doit autoriser microphone=(self), et display-capture=(self) pour l'enregistrement d'écran ; avec microphone=() les enregistrements fonctionnent sans son.
• Vérifiez la version installée avec npm ls @blipit/browser @blipit/nextjs (ou pnpm list @blipit/browser @blipit/nextjs) et comparez-la au journal des modifications. pnpm 11 attend un jour avant d'installer une nouvelle version (minimum-release-age) : le jour de la sortie, pnpm add installe donc sans prévenir la version précédente. Pour obtenir la nouvelle tout de suite : pnpm add @blipit/browser@<version> @blipit/nextjs@<version> --config.minimum-release-age=0.
• Toujours bloqué ? Écrivez à support@blipit.io en joignant les lignes [blipit] de la console.

1Installation

npm install @blipit/nextjs

2Obtenir vos clés

Connectez-vous sur app.blipit.io et ouvrez Clés API dans la barre latérale, puis votre projet. Chaque projet a deux clés. La clé publique commence par blipit_pk_ : elle va dans le code navigateur et applicatif, ne peut qu'envoyer des événements et peut être vue par n'importe qui sans risque. La clé secrète commence par blipit_sk_ : elle reste sur votre serveur ou dans Odoo, jamais dans un navigateur, car elle peut aussi lire et modifier les problèmes. La clé secrète n'est affichée qu'une fois, juste après sa création, alors copiez-la à ce moment-là ; si vous la perdez, appuyez sur Créer une nouvelle clé secrète, et l'ancienne cesse aussitôt de fonctionner. Certains SDK ont aussi besoin de l'identifiant de projet, affiché sur la même page.

3Mettez les clés dans .env.local

Créez .env.local à la racine du projet avec la clé publique pour le navigateur et, si vous utilisez la partie serveur ci-dessous, la clé secrète pour le serveur. Seuls les noms qui commencent par NEXT_PUBLIC_ atteignent le navigateur, donc ne donnez jamais ce préfixe à la clé secrète. Relancez npm run dev après avoir enregistré le fichier. En production, ajoutez les mêmes variables chez votre hébergeur (sur Vercel : Project, Settings, Environment Variables, pour Production et Preview) et redéployez : les valeurs NEXT_PUBLIC_ sont écrites dans le build, donc un déploiement fait avant leur ajout a une clé vide.

NEXT_PUBLIC_BLIPIT_KEY=blipit_pk_your_public_key
BLIPIT_SECRET_KEY=blipit_sk_your_secret_key

4Côté navigateur

Ajoutez le composant une seule fois dans le layout racine. Il lit la clé publique depuis NEXT_PUBLIC_BLIPIT_KEY. Si la variable est vide, il ne démarre rien et l'indique dans la console du navigateur.

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

5Côté serveur

Next.js 15 et suivants appellent onRequestError pour les erreurs des composants serveur, route handlers et server actions. Une ligne dans instrumentation.ts le relie à Blipit. Depuis @blipit/nextjs 0.2.1, la même ligne fonctionne aussi dans les apps qui ont un middleware.ts et dans les routes Edge (runtime = "edge") : l'app se compile, et les erreurs du middleware et d'Edge sont signalées elles aussi. Next.js 14 n'a pas onRequestError : enveloppez alors chaque route handler et server action dans withBlipit, comme dans le second exemple ; il signale l'erreur puis la relance, et ignore les redirections et notFound(). Définissez BLIPIT_SECRET_KEY dans l'environnement serveur, jamais en 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());
});

6Dépendances et santé des serveurs

À partir de @blipit/nextjs 0.3, exportez aussi register pour que Blipit démarre avec le serveur. Il enregistre alors les appels à la base de données et aux services externes sur la page Dépendances, et le CPU, la mémoire et la boucle d'événements du serveur sur Santé des serveurs. Il ne fait rien dans le runtime Edge. Sur Vercel, register peut ne pas voir la requête entrante : depuis @blipit/nextjs 0.4, enveloppez les route handlers et server actions dans withBlipit et chacun devient une requête sur la page Pulse avec ses appels à la base de données et aux services externes, envoyée après la réponse sans la retarder.

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

7Erreurs interceptées par error.tsx

Les erreurs interceptées par une boundary error.tsx ou global-error.tsx n'atteignent jamais le gestionnaire d'erreurs du navigateur, donc signalez-les depuis la boundary. Ces deux fichiers sont des 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>
  );
}

8Gardez les clés hors de git

Gardez les clés dans des variables d'environnement ou dans les réglages de secrets de votre hébergeur, jamais dans du code que vous committez, et ajoutez vos fichiers .env à .gitignore. Une clé publique dans une page web est normale. Si une clé secrète se retrouve un jour dans git, sur une page publique, dans une capture d'écran ou dans un chat, ouvrez Clés API, appuyez sur Créer une nouvelle clé secrète, et collez la nouvelle clé partout où l'ancienne était utilisée : l'ancienne clé cesse immédiatement de fonctionner.

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

9Content Security Policy

Si votre site envoie une Content Security Policy, autorisez script-src https://blipit.io (la balise script, ainsi que l'éditeur du signalement et le module de replay, chargés depuis blipit.io/sdk/<version>/ à la première utilisation), connect-src https://in.blipit.io (les événements, les captures et les enregistrements d'écran partent tous vers in.blipit.io), img-src data: (la capture est dessinée à partir d'une image de la page) et media-src blob: (les enregistrements sont lus dans le signalement). La capture recharge les images et les polices de la page : leurs hôtes doivent donc aussi figurer dans connect-src, sinon elles restent vides. Aucun changement de style-src n'est nécessaire. Avec la balise script, appelez Blipit.init depuis votre propre fichier .js ou donnez un nonce au script en ligne, car une politique stricte bloque les scripts en ligne. Pour que les enregistrements d'écran aient du son, l'en-tête Permissions-Policy de votre site doit autoriser microphone=(self), et display-capture=(self) pour l'enregistrement d'écran ; avec microphone=() les enregistrements fonctionnent sans son.

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

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

11Rapports de bugs : le bouton Signaler un bug

Dès que le SDK démarre avec votre clé publique, un bouton Signaler un bug apparaît dans le coin inférieur droit de chaque page, dans la langue du visiteur. Un clic ouvre le formulaire de signalement : une capture de la page à annoter, un sélecteur d'élément, un enregistrement d'écran facultatif, ainsi qu'un titre et une description. Modifiez la position, le style, le texte, la couleur et le raccourci clavier dans le code, comme ci-dessous, ou pour tous vos sites à la fois dans app.blipit.io, Paramètres du projet, Widget de rapport de bug ; les options du code l'emportent. Le guide du bouton de rapport de bug présente chaque option avec des captures d'écran et une démo en direct.

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

12Ouvrir le formulaire depuis votre propre bouton

Placez le bouton officiel n'importe où avec <BlipitReportButton />, y compris dans les server components : il affiche l'icône Blipit et Signaler un bug dans la langue du visiteur et ouvre le formulaire. Vous préférez votre propre design ? Le composant qui appelle openReport doit être un client component, donc mettez "use client" en haut de son fichier. <Blipit /> doit déjà être dans app/layout.tsx. Les apps React classiques importent le bouton depuis @blipit/nextjs/react et openReport depuis @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>;
}

13Masquer le bouton par défaut

Pour ne garder que votre propre bouton, désactivez le bouton flottant avec feedbackWidget: false dans le code (feedbackWidget={false} sur <Blipit />), ou désactivez Afficher le bouton de rapport de bug dans les réglages Widget de rapport de bug du projet pour le masquer sur tous les sites qui utilisent la clé. openReport() et attachReport() continuent de fonctionner dans les deux cas.

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

14Pré-remplir le formulaire et ajouter du contexte

Appelez setUser après la connexion : le nom et l'e-mail de la personne qui signale sont pré-remplis, et elle reçoit un e-mail quand vous répondez ou changez le statut. setReportMetadata ajoute vos propres champs, comme le forfait ou la taille du panier, à chaque signalement ; il s'exécute à l'envoi du signalement, donc les valeurs sont à jour.

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

15Vérifier que ça fonctionne

Rechargez l'application. Le bouton Signaler un bug apparaît dans le coin inférieur droit, et en moins d'une minute la page vue s'affiche sous Web vitals dans app.blipit.io. Ajoutez ensuite un bouton qui appelle captureMessage, ou un bouton qui lève une erreur, et cliquez dessus : l'événement apparaît sous Problèmes en quelques secondes.

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

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

16Si le bouton ou les événements n'apparaissent pas

• Ouvrez la console du navigateur et cherchez les lignes qui commencent par [blipit]. Activez debug (debug: true dans init, ou debug sur <Blipit />) pour savoir si le bouton a été affiché, désactivé dans le code ou masqué par le réglage du projet.
• Next.js n'envoie au navigateur que les variables dont le nom commence par NEXT_PUBLIC_, donc utilisez NEXT_PUBLIC_BLIPIT_KEY. Vite n'envoie que les variables VITE_, donc utilisez VITE_BLIPIT_KEY. Avec tout autre nom, la clé est vide dans le navigateur et Blipit ne démarre pas.
• Redémarrez le serveur de développement après avoir ajouté ou modifié .env ou .env.local. Il ne les lit qu'au démarrage.
• Sur Vercel ou tout autre hébergeur, ajoutez la même variable dans les variables d'environnement du projet et redéployez. Les valeurs NEXT_PUBLIC_ et VITE_ sont écrites dans le build, donc un déploiement en cours ne voit jamais une valeur ajoutée plus tard.
• Utilisez la clé publique (blipit_pk_). Une clé secrète (blipit_sk_) est refusée dans le navigateur avec une erreur dans la console ; si l'une d'elles s'est déjà retrouvée sur une page, créez une nouvelle clé secrète.
• Dans Next.js, <Blipit /> se place dans le app/layout.tsx racine (ou pages/_app.tsx) pour s'exécuter sur chaque page. Dans les autres applications, appelez init une seule fois dans le fichier d'entrée, avant le rendu de l'application.
• Afficher le bouton de rapport de bug doit être activé dans app.blipit.io, Paramètres du projet, Widget de rapport de bug, et votre code ne doit pas passer feedbackWidget: false. Le SDK conserve les paramètres du projet jusqu'à une heure, donc testez une modification dans une fenêtre privée.
• Les bloqueurs de publicité et les extensions de confidentialité peuvent bloquer in.blipit.io. Essayez une fenêtre privée avec les extensions désactivées.
• Si votre site envoie une Content Security Policy, autorisez script-src https://blipit.io, connect-src https://in.blipit.io, img-src data: et media-src blob:. L'éditeur du signalement se charge depuis blipit.io/sdk au premier clic, la capture est dessinée à partir d'une image data: et les enregistrements d'écran sont eux aussi envoyés à in.blipit.io. Avec debug, la console indique quand la politique a bloqué la capture. Pour que les enregistrements d'écran aient du son, l'en-tête Permissions-Policy de votre site doit autoriser microphone=(self), et display-capture=(self) pour l'enregistrement d'écran ; avec microphone=() les enregistrements fonctionnent sans son.
• Vérifiez la version installée avec npm ls @blipit/browser @blipit/nextjs (ou pnpm list @blipit/browser @blipit/nextjs) et comparez-la au journal des modifications. pnpm 11 attend un jour avant d'installer une nouvelle version (minimum-release-age) : le jour de la sortie, pnpm add installe donc sans prévenir la version précédente. Pour obtenir la nouvelle tout de suite : pnpm add @blipit/browser@<version> @blipit/nextjs@<version> --config.minimum-release-age=0.
• Toujours bloqué ? Écrivez à support@blipit.io en joignant les lignes [blipit] de la console.

1Installation

npm install @blipit/node

2Obtenir vos clés

Connectez-vous sur app.blipit.io et ouvrez Clés API dans la barre latérale, puis votre projet. Chaque projet a deux clés. La clé publique commence par blipit_pk_ : elle va dans le code navigateur et applicatif, ne peut qu'envoyer des événements et peut être vue par n'importe qui sans risque. La clé secrète commence par blipit_sk_ : elle reste sur votre serveur ou dans Odoo, jamais dans un navigateur, car elle peut aussi lire et modifier les problèmes. La clé secrète n'est affichée qu'une fois, juste après sa création, alors copiez-la à ce moment-là ; si vous la perdez, appuyez sur Créer une nouvelle clé secrète, et l'ancienne cesse aussitôt de fonctionner. Certains SDK ont aussi besoin de l'identifiant de projet, affiché sur la même page.

3Gardez la clé dans l'environnement

Node utilise la clé secrète. Placez-la dans une variable d'environnement, jamais dans le code : en local dans un fichier .env que Node 20.6 et versions ultérieures chargent avec --env-file, en production dans l'environnement ou les réglages de secrets de votre hébergeur (secrets Fly, Docker, systemd, Render, Vercel). Redémarrez le processus après l'avoir modifiée.

BLIPIT_SECRET_KEY=blipit_sk_your_secret_key

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

4Gardez les clés hors de git

Gardez les clés dans des variables d'environnement ou dans les réglages de secrets de votre hébergeur, jamais dans du code que vous committez, et ajoutez vos fichiers .env à .gitignore. Une clé publique dans une page web est normale. Si une clé secrète se retrouve un jour dans git, sur une page publique, dans une capture d'écran ou dans un chat, ouvrez Clés API, appuyez sur Créer une nouvelle clé secrète, et collez la nouvelle clé partout où l'ancienne était utilisée : l'ancienne clé cesse immédiatement de fonctionner.

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

5Initialiser en premier

Placez ceci dans un fichier qui s'exécute avant votre application, et importez-le en premier.

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 ou NestJS

Ajoutez le handler après vos routes pour que les erreurs gérées et non gérées atteignent toutes Blipit, avec la méthode, l'URL et le user agent de la requête. Koa, Hono et NestJS demandent une ligne chacun : le middleware Koa en premier, celui de Hono avant les routes. Ils signalent les erreurs avec un statut de 500 ou plus. Les requêtes apparaissent alors sur la page Pulse par route, comme GET /users/:id, au lieu d'une ligne par 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 et Vercel

Les hébergements serverless mettent la fonction en pause dès qu'elle répond, et Lambda ne lance pas le serveur HTTP de Node : enveloppez donc le handler. wrapHandler enregistre la requête (événements API Gateway, URL de fonction et load balancer par méthode et route, les autres par nom de fonction), signale les erreurs et envoie tout avant que le handler ne rende la main ; il n'attend que s'il y a quelque chose à envoyer, 2 secondes au plus. traceRequest fait de même pour tout handler qui reçoit une Request. Sur Vercel, les données partent après la réponse via waitUntil, donc rien n'est retardé. Dans Next.js, utilisez withBlipit (voir le guide 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)) };

8Capture manuelle, logs et tentatives de connexion

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

9Dépendances et santé des serveurs

Depuis la 0.2, le SDK enregistre aussi vos appels à la base de données et aux services externes, ainsi que le CPU, la mémoire et la boucle d'événements de votre serveur. Voir les guides Dépendances et Santé des serveurs ; tracesSampleRate, tracing: false et metrics: false le contrôlent.

10Vérifier que ça fonctionne

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.

Blipit.captureMessage("Hello from Node");

1Installation

pip install blipit

2Initialiser au démarrage

Pour Django, placez-le en haut de settings.py. Pour Flask ou FastAPI, avant la création de l'application. La clé se trouve sur la page Clés du projet. Avec une clé vide, init écrit un avertissement dans les logs et renvoie False au lieu de lever une exception, donc une clé manquante n'empêche jamais l'application de démarrer.

import blipit

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

3Obtenir vos clés

Connectez-vous sur app.blipit.io et ouvrez Clés API dans la barre latérale, puis votre projet. Chaque projet a deux clés. La clé publique commence par blipit_pk_ : elle va dans le code navigateur et applicatif, ne peut qu'envoyer des événements et peut être vue par n'importe qui sans risque. La clé secrète commence par blipit_sk_ : elle reste sur votre serveur ou dans Odoo, jamais dans un navigateur, car elle peut aussi lire et modifier les problèmes. La clé secrète n'est affichée qu'une fois, juste après sa création, alors copiez-la à ce moment-là ; si vous la perdez, appuyez sur Créer une nouvelle clé secrète, et l'ancienne cesse aussitôt de fonctionner. Certains SDK ont aussi besoin de l'identifiant de projet, affiché sur la même page.

4Gardez la clé dans l'environnement

Ce SDK envoie avec la clé publique de la page Clés API du projet. Gardez-la dans une variable d'environnement : en local dans un fichier .env chargé par votre framework ou par python-dotenv, en production dans les réglages de votre hébergeur. N'utilisez la clé secrète que si vous envoyez des tentatives de connexion.

BLIPIT_KEY=blipit_pk_your_public_key

import os
import blipit

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

5Gardez les clés hors de git

Gardez les clés dans des variables d'environnement ou dans les réglages de secrets de votre hébergeur, jamais dans du code que vous committez, et ajoutez vos fichiers .env à .gitignore. Une clé publique dans une page web est normale. Si une clé secrète se retrouve un jour dans git, sur une page publique, dans une capture d'écran ou dans un chat, ouvrez Clés API, appuyez sur Créer une nouvelle clé secrète, et collez la nouvelle clé partout où l'ancienne était utilisée : l'ancienne clé cesse immédiatement de fonctionner.

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

6Capture manuelle et tentatives de connexion

Les tentatives de connexion exigent la clé secrète : sur le serveur, initialisez avec la clé secrète au lieu de la clé publique, sinon l'ingestion les refuse avec 403 security_needs_secret_key. Offre 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")

7Vérifier que ça fonctionne

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.

blipit.capture_message("Hello from Python")

1Installation

composer require blipit/blipit

2Initialiser au démarrage

PHP simple : en haut de votre contrôleur frontal, avant le traitement de toute requête. Laravel démarre Blipit depuis sa configuration, comme à l'étape suivante. La clé se trouve sur la page Clés du projet. Avec une clé vide, init écrit un avertissement dans le log d'erreurs et renvoie false au lieu de lever une exception.

use Blipit\Blipit;

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

3Obtenir vos clés

Connectez-vous sur app.blipit.io et ouvrez Clés API dans la barre latérale, puis votre projet. Chaque projet a deux clés. La clé publique commence par blipit_pk_ : elle va dans le code navigateur et applicatif, ne peut qu'envoyer des événements et peut être vue par n'importe qui sans risque. La clé secrète commence par blipit_sk_ : elle reste sur votre serveur ou dans Odoo, jamais dans un navigateur, car elle peut aussi lire et modifier les problèmes. La clé secrète n'est affichée qu'une fois, juste après sa création, alors copiez-la à ce moment-là ; si vous la perdez, appuyez sur Créer une nouvelle clé secrète, et l'ancienne cesse aussitôt de fonctionner. Certains SDK ont aussi besoin de l'identifiant de projet, affiché sur la même page.

4Gardez la clé dans l'environnement

Ce SDK envoie avec la clé publique. Laravel : ajoutez-la à .env et à config/services.php ; le service provider Blipit est découvert automatiquement et démarre Blipit depuis cette configuration, rien d'autre n'est nécessaire. Lisez les valeurs via config, car env() ne renvoie plus rien dans le code de l'application une fois la configuration mise en cache. PHP simple : lisez la clé avec getenv() depuis l'environnement du serveur.

BLIPIT_KEY=blipit_pk_your_public_key

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

5Gardez les clés hors de git

Gardez les clés dans des variables d'environnement ou dans les réglages de secrets de votre hébergeur, jamais dans du code que vous committez, et ajoutez vos fichiers .env à .gitignore. Une clé publique dans une page web est normale. Si une clé secrète se retrouve un jour dans git, sur une page publique, dans une capture d'écran ou dans un chat, ouvrez Clés API, appuyez sur Créer une nouvelle clé secrète, et collez la nouvelle clé partout où l'ancienne était utilisée : l'ancienne clé cesse immédiatement de fonctionner.

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

6Laravel et Symfony

Laravel : chaque exception signalée par son gestionnaire arrive dans Blipit, donc les 404 et les erreurs de validation restent à l'écart. Les requêtes SQL, les lignes de log et les appels du client HTTP deviennent des breadcrumbs, et les jobs en file d'attente sont tracés. Une ligne Blipit::captureException déjà présente dans bootstrap/app.php peut rester : la même exception n'est jamais envoyée deux fois. Symfony : enregistrez le listener dans config/services.yaml et appelez Blipit::init tôt dans public/index.php et 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 }

7Capture manuelle et tentatives de connexion

Les tentatives de connexion exigent la clé secrète : sur le serveur, initialisez avec la clé secrète au lieu de la clé publique, sinon l'ingestion les refuse avec 403 security_needs_secret_key. Offre 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());

8Vérifier que ça fonctionne

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.

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

1Gemfile

gem "blipit"

2Initialiser au démarrage

Rails : config/initializers/blipit.rb ; rien d'autre à installer, car Blipit ajoute lui-même son middleware Rack, le suivi d'Active Job et de Rails.error. Les applications Rack et Sinatra ajoutent use Blipit::Rack. Scripts : avant l'exécution de votre code. La clé se trouve sur la page Clés du projet. Avec une clé vide, init affiche un avertissement et renvoie false au lieu de lever une exception.

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

3Obtenir vos clés

Connectez-vous sur app.blipit.io et ouvrez Clés API dans la barre latérale, puis votre projet. Chaque projet a deux clés. La clé publique commence par blipit_pk_ : elle va dans le code navigateur et applicatif, ne peut qu'envoyer des événements et peut être vue par n'importe qui sans risque. La clé secrète commence par blipit_sk_ : elle reste sur votre serveur ou dans Odoo, jamais dans un navigateur, car elle peut aussi lire et modifier les problèmes. La clé secrète n'est affichée qu'une fois, juste après sa création, alors copiez-la à ce moment-là ; si vous la perdez, appuyez sur Créer une nouvelle clé secrète, et l'ancienne cesse aussitôt de fonctionner. Certains SDK ont aussi besoin de l'identifiant de projet, affiché sur la même page.

4Gardez la clé dans les credentials Rails

Ce SDK envoie avec la clé publique. Dans Rails, gardez-la dans les credentials chiffrés et lisez-la dans l'initializer ; ailleurs, utilisez une variable d'environnement.

bin/rails credentials:edit

blipit:
  key: blipit_pk_your_public_key

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

5Gardez les clés hors de git

Gardez les clés dans des variables d'environnement ou dans les réglages de secrets de votre hébergeur, jamais dans du code que vous committez, et ajoutez vos fichiers .env à .gitignore. Une clé publique dans une page web est normale. Si une clé secrète se retrouve un jour dans git, sur une page publique, dans une capture d'écran ou dans un chat, ouvrez Clés API, appuyez sur Créer une nouvelle clé secrète, et collez la nouvelle clé partout où l'ancienne était utilisée : l'ancienne clé cesse immédiatement de fonctionner.

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

6Capture manuelle et tentatives de connexion

Les tentatives de connexion exigent la clé secrète : sur le serveur, initialisez avec la clé secrète au lieu de la clé publique, sinon l'ingestion les refuse avec 403 security_needs_secret_key. Offre 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)

7Vérifier que ça fonctionne

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.

Blipit.capture_message("Hello from Rails")

1Installation

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

2Initialiser dans main

Init ne panique jamais : avec une clé ou un identifiant de projet vide, il renvoie une erreur et Blipit reste désactivé, alors journalisez l'erreur au lieu de quitter.

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

3Obtenir vos clés

Connectez-vous sur app.blipit.io et ouvrez Clés API dans la barre latérale, puis votre projet. Chaque projet a deux clés. La clé publique commence par blipit_pk_ : elle va dans le code navigateur et applicatif, ne peut qu'envoyer des événements et peut être vue par n'importe qui sans risque. La clé secrète commence par blipit_sk_ : elle reste sur votre serveur ou dans Odoo, jamais dans un navigateur, car elle peut aussi lire et modifier les problèmes. La clé secrète n'est affichée qu'une fois, juste après sa création, alors copiez-la à ce moment-là ; si vous la perdez, appuyez sur Créer une nouvelle clé secrète, et l'ancienne cesse aussitôt de fonctionner. Certains SDK ont aussi besoin de l'identifiant de projet, affiché sur la même page.

4Gardez la clé dans l'environnement

Ce SDK envoie avec la clé publique et l'identifiant de projet. Lisez-les depuis des variables d'environnement définies par votre hébergeur, une unité systemd ou docker run -e.

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

5Gardez les clés hors de git

Gardez les clés dans des variables d'environnement ou dans les réglages de secrets de votre hébergeur, jamais dans du code que vous committez, et ajoutez vos fichiers .env à .gitignore. Une clé publique dans une page web est normale. Si une clé secrète se retrouve un jour dans git, sur une page publique, dans une capture d'écran ou dans un chat, ouvrez Clés API, appuyez sur Créer une nouvelle clé secrète, et collez la nouvelle clé partout où l'ancienne était utilisée : l'ancienne clé cesse immédiatement de fonctionner.

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

6Capture manuelle et tentatives de connexion

Les tentatives de connexion exigent la clé secrète : sur le serveur, initialisez avec la clé secrète au lieu de la clé publique, sinon l'ingestion les refuse avec 403 security_needs_secret_key. Offre 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 et net/http

defer blipit.Recover() en haut de main ou de n'importe quelle goroutine signale un panic avec sa pile, vide la file d'envoi et relance le panic. Enveloppez le handler que vous servez avec blipit.Handler pour signaler les panics avec la requête et chronométrer chaque requête dans Pulse, nommée d'après son motif ServeMux. Gin, Echo et Fiber utilisent StartRequest, SetRoute et End, montrés dans le README du paquet.

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

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

8Vérifier que ça fonctionne

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.

blipit.CaptureMessage("Hello from Go")

1Ajouter le dépôt et la dépendance

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>

2Initialiser au démarrage

Spring Boot : en haut de main, avant SpringApplication.run, ou dans une méthode @PostConstruct d'une classe @Configuration. Les exceptions non interceptées sur n'importe quel thread sont écrites dans une file sur disque avant l'arrêt de l'application, puis envoyées, donc un crash est signalé même si le réseau est coupé ; ce qui reste part au démarrage suivant.

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

3Obtenir vos clés

Connectez-vous sur app.blipit.io et ouvrez Clés API dans la barre latérale, puis votre projet. Chaque projet a deux clés. La clé publique commence par blipit_pk_ : elle va dans le code navigateur et applicatif, ne peut qu'envoyer des événements et peut être vue par n'importe qui sans risque. La clé secrète commence par blipit_sk_ : elle reste sur votre serveur ou dans Odoo, jamais dans un navigateur, car elle peut aussi lire et modifier les problèmes. La clé secrète n'est affichée qu'une fois, juste après sa création, alors copiez-la à ce moment-là ; si vous la perdez, appuyez sur Créer une nouvelle clé secrète, et l'ancienne cesse aussitôt de fonctionner. Certains SDK ont aussi besoin de l'identifiant de projet, affiché sur la même page.

4Gardez la clé dans l'environnement

Ce SDK envoie avec la clé publique et l'identifiant de projet. Lisez-les depuis des variables d'environnement, ou, avec Spring Boot, depuis application.properties alimenté par l'environnement.

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

5Gardez les clés hors de git

Gardez les clés dans des variables d'environnement ou dans les réglages de secrets de votre hébergeur, jamais dans du code que vous committez, et ajoutez vos fichiers .env à .gitignore. Une clé publique dans une page web est normale. Si une clé secrète se retrouve un jour dans git, sur une page publique, dans une capture d'écran ou dans un chat, ouvrez Clés API, appuyez sur Créer une nouvelle clé secrète, et collez la nouvelle clé partout où l'ancienne était utilisée : l'ancienne clé cesse immédiatement de fonctionner.

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

6Capture manuelle et tentatives de connexion

Les tentatives de connexion exigent la clé secrète : sur le serveur, initialisez avec la clé secrète au lieu de la clé publique, sinon l'ingestion les refuse avec 403 security_needs_secret_key. Offre 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);

7Vérifier que ça fonctionne

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.

Blipit.captureMessage("Hello from Java");

1Installation

dotnet add package Blipit

2Initialiser au démarrage

Conservez le handle renvoyé pendant toute la durée de vie du processus. Les deux valeurs sont sur la page Clés du projet.

using Blipit;

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

3Obtenir vos clés

Connectez-vous sur app.blipit.io et ouvrez Clés API dans la barre latérale, puis votre projet. Chaque projet a deux clés. La clé publique commence par blipit_pk_ : elle va dans le code navigateur et applicatif, ne peut qu'envoyer des événements et peut être vue par n'importe qui sans risque. La clé secrète commence par blipit_sk_ : elle reste sur votre serveur ou dans Odoo, jamais dans un navigateur, car elle peut aussi lire et modifier les problèmes. La clé secrète n'est affichée qu'une fois, juste après sa création, alors copiez-la à ce moment-là ; si vous la perdez, appuyez sur Créer une nouvelle clé secrète, et l'ancienne cesse aussitôt de fonctionner. Certains SDK ont aussi besoin de l'identifiant de projet, affiché sur la même page.

4Gardez la clé dans la configuration

Ce SDK envoie avec la clé publique et l'identifiant de projet. Gardez-les dans les user secrets pendant le développement et dans des variables d'environnement en production (Blipit__Key et Blipit__Project), puis lisez-les depuis la configuration.

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"],
});

5Gardez les clés hors de git

Gardez les clés dans des variables d'environnement ou dans les réglages de secrets de votre hébergeur, jamais dans du code que vous committez, et ajoutez vos fichiers .env à .gitignore. Une clé publique dans une page web est normale. Si une clé secrète se retrouve un jour dans git, sur une page publique, dans une capture d'écran ou dans un chat, ouvrez Clés API, appuyez sur Créer une nouvelle clé secrète, et collez la nouvelle clé partout où l'ancienne était utilisée : l'ancienne clé cesse immédiatement de fonctionner.

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

6ASP.NET Core et journalisation

Rien d'autre à ajouter : appelez Init en haut de Program.cs. Les exceptions des endpoints, contrôleurs et middlewares sont signalées avec la requête, y compris quand UseExceptionHandler les traite, et avec TracesSampleRate défini, chaque requête échantillonnée est chronométrée dans Pulse selon sa route. BlipitLoggerProvider transforme Information et au-dessus en breadcrumbs, et Error et au-dessus en événements.

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

7Capture manuelle et tentatives de connexion

Les tentatives de connexion exigent la clé secrète : sur le serveur, initialisez avec la clé secrète au lieu de la clé publique, sinon l'ingestion les refuse avec 403 security_needs_secret_key. Offre 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);

8Vérifier que ça fonctionne

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.

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

1Obtenir vos clés

Connectez-vous sur app.blipit.io et ouvrez Clés API dans la barre latérale, puis votre projet. Chaque projet a deux clés. La clé publique commence par blipit_pk_ : elle va dans le code navigateur et applicatif, ne peut qu'envoyer des événements et peut être vue par n'importe qui sans risque. La clé secrète commence par blipit_sk_ : elle reste sur votre serveur ou dans Odoo, jamais dans un navigateur, car elle peut aussi lire et modifier les problèmes. La clé secrète n'est affichée qu'une fois, juste après sa création, alors copiez-la à ce moment-là ; si vous la perdez, appuyez sur Créer une nouvelle clé secrète, et l'ancienne cesse aussitôt de fonctionner. Certains SDK ont aussi besoin de l'identifiant de projet, affiché sur la même page.

2React Native

Le paquet lie un petit module natif qui démarre les SDK Android et iOS de Blipit pour les crashs natifs ; son fichier Gradle ajoute lui-même le dépôt JitPack. Enveloppez le composant racine pour que les erreurs de rendu soient aussi signalées.

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

Remplacez runApp dans main.dart par Blipit.init. Le plugin démarre les SDK Android et iOS de Blipit pour les crashs natifs, et les erreurs du framework Flutter et les erreurs async non interceptées sont signalées d'elles-mêmes.

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 et macOS (Swift Package)

Dans Xcode, File, Add Package Dependencies, puis saisissez l'URL du dépôt ; ou ajoutez-le à Package.swift et ajoutez BlipitSwift à votre target. Avec CocoaPods, utilisez le pod BlipitSwift. Appelez ensuite start une fois au lancement. Avec une clé ou un identifiant de projet vide, start affiche un avertissement et renvoie false au lieu de faire planter l'application.

.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

Ajoutez JitPack aux repositories dans settings.gradle.kts, la dépendance au module app, et appelez init dans 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"
        }
    }
}

6Où placer la clé dans une application

Les applications embarquent la clé publique et l'identifiant de projet, ce qui ne pose aucun problème : la clé publique ne peut qu'envoyer des événements. Ne mettez jamais la clé secrète dans une application. Transmettez-les au moment du build pour qu'elles restent hors de votre dépôt.

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

7Rapports de bugs dans les applications

Appelez showReport depuis votre propre menu, ou activez le bouton flottant Signaler un bug. Le rapporteur demande d'abord comment montrer le problème : prendre une capture, enregistrer l'écran (iOS) ou simplement le décrire. La capture s'ouvre en plein écran avec les outils au-dessus et en dessous, jamais dessus ; pincez ou touchez deux fois pour zoomer, marquez le problème, ajoutez un titre et ce qui s'est passé, puis envoyez. Les rapports arrivent dans Rapports de bugs avec les détails de l'appareil. React Native a besoin de react-native-view-shot pour les captures.

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()

8Signaler depuis l’écran qui a le bug

Une entrée Signaler un bug dans un menu comme Profil capture le menu, pas le problème. Activez les moyens qui partent de l’écran lui-même ; tous sont désactivés par défaut et ne demandent aucune autorisation. shakeToReport ouvre le formulaire quand on secoue le téléphone. screenshotToReport demande « Signaler un bug avec cet écran ? » après une capture d’écran normale et joint la capture propre à Blipit (iOS, et Android 14 et plus récent). twoFingerReport l’ouvre après un appui long d’environ une seconde à deux doigts, sans bloquer les gestes de l’app. reportAfterCrash demande ce que la personne faisait au premier lancement après un plantage et relie le rapport à ce plantage. screenPicker, activé par défaut, permet à qui ouvre le formulaire depuis un menu de choisir sur lequel des derniers écrans se trouve le bug : les captures restent dans la mémoire de l’appareil et seule celle choisie est envoyée. Les apps Jetpack Compose et SwiftUI nomment leurs écrans avec 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()))),
);

9Bouton flottant pour les testeurs uniquement

Dans app.blipit.io, ouvrez le projet et, dans les réglages du bouton de rapport de bug, réglez Bouton flottant dans les apps mobiles sur Tout le monde ou Testeurs uniquement, avec un identifiant ou un e-mail par testeur. L’app envoie la personne définie avec setUser et Blipit répond seulement oui ou non, si bien que la liste des testeurs n’est jamais livrée dans l’app. Appeler showReportButton (showButton sous React Native et Flutter) affiche toujours le bouton pour tout le monde.

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

10Repérer une app qui reste bloquée

Certaines pannes ne plantent jamais : l'écran de démarrage tourne sans fin, ou la connexion ne revient jamais. Activez waitForReady et appelez reportReady dès que le premier écran utilisable s'affiche. Encadrez les parcours comme la connexion avec startFlow et endFlow, et marquez les étapes avec flowStep. Si l'un d'eux ne se termine pas à temps, Blipit ouvre un incident Bloquée avec la dernière étape et le fil qui la précède. Seul le temps à l'écran compte, et Blipit fixe les délais. Les noms sont envoyés tels quels : utilisez des noms fixes, jamais d'e-mails ni d'autres données utilisateur.

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

11Vérifier que ça fonctionne

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.

1Installer le module

Téléchargez-le depuis apps.odoo.com (blipit_monitor, gratuit) pour votre version d'Odoo et installez-le comme n'importe quel module : Applications, Mettre à jour la liste des applications, installer Blipit Error Monitoring. Odoo Online n'autorise pas les applications tierces ; Odoo.sh et l'installation sur site oui.

2Obtenir vos clés

Connectez-vous sur app.blipit.io et ouvrez Clés API dans la barre latérale, puis votre projet. Chaque projet a deux clés. La clé publique commence par blipit_pk_ : elle va dans le code navigateur et applicatif, ne peut qu'envoyer des événements et peut être vue par n'importe qui sans risque. La clé secrète commence par blipit_sk_ : elle reste sur votre serveur ou dans Odoo, jamais dans un navigateur, car elle peut aussi lire et modifier les problèmes. La clé secrète n'est affichée qu'une fois, juste après sa création, alors copiez-la à ce moment-là ; si vous la perdez, appuyez sur Créer une nouvelle clé secrète, et l'ancienne cesse aussitôt de fonctionner. Certains SDK ont aussi besoin de l'identifiant de projet, affiché sur la même page.

3Connecter

Paramètres, Blipit : collez la clé secrète du projet, cochez l'acceptation des Conditions et de la licence du module, puis cliquez sur Enregistrer. La connexion se fait d'elle-même et affiche Connecté à <project>. Une clé publique ou une clé déjà liée à une autre base de données est refusée avec la raison.

4Responsables

Choisissez qui reçoit les e-mails, par société si vous en avez plusieurs. Chaque personne occupe un siège de votre plan ; Blipit vérifie le nombre à l'enregistrement.

5Rapports de bugs depuis Odoo

Le module ajoute le bouton Signaler un bug à Odoo pour vous ; il n'y a aucun code à écrire. Dans Paramètres, Blipit, Rapports de bugs, Visible par, choisissez qui le voit : Utilisateurs internes, Visiteurs du site, Les deux ou Personne, et limitez éventuellement les utilisateurs internes à un groupe. Les signalements contiennent le modèle, l'enregistrement et le champ sur lesquels se trouvait la personne, et le nom et l'e-mail de l'utilisateur connecté sont pré-remplis. La position, la couleur, le texte et le style viennent de app.blipit.io, Paramètres du projet, Widget de rapport de bug. Consultez le guide du bouton de rapport de bug pour chaque option.

6Vérifier que ça fonctionne

Ouvrez l'application Blipit dans Odoo. La prochaine erreur y apparaît ainsi que dans la boîte mail des responsables. Cliquez sur Rafraîchir depuis Blipit pour vérifier immédiatement.