Blipit installeren

1Haal je sleutels op

Log in op app.blipit.io en open API-sleutels in de zijbalk, en dan je project. Elk project heeft twee sleutels. De publieke sleutel begint met blipit_pk_: hij gaat in browser- en appcode, kan alleen events insturen en mag door iedereen gezien worden. De geheime sleutel begint met blipit_sk_: hij blijft op je server of in Odoo, nooit in een browser, omdat hij ook issues kan lezen en wijzigen. De geheime sleutel wordt maar één keer getoond, direct na het aanmaken, dus kopieer hem dan; raak je hem kwijt, druk dan op Nieuwe geheime sleutel aanmaken, en de oude werkt meteen niet meer. Sommige SDK's hebben ook het project-id nodig, dat op dezelfde pagina staat.

2Met npm

Roep init één keer aan in je entry-bestand, voordat de app rendert, met de publieke sleutel. Met Vite (React, Vue, Svelte) zet je de sleutel in .env als VITE_BLIPIT_KEY; alleen VITE_-variabelen bereiken de browser, en de dev-server leest .env alleen bij het starten.

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

3Zonder bundler: één script-tag

Plak dit in de <head> van elke pagina, of in het vak voor eigen code van je platform, met je publieke sleutel erin. Dat is prima: de publieke sleutel kan alleen events insturen.

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

4Houd sleutels buiten git

Bewaar sleutels in omgevingsvariabelen of in de geheime instellingen van je host, nooit in code die je commit, en zet je .env-bestanden in .gitignore. Een publieke sleutel in een webpagina is normaal. Belandt een geheime sleutel ooit in git, op een openbare pagina, in een screenshot of in een chat, open dan API-sleutels, druk op Nieuwe geheime sleutel aanmaken en plak de nieuwe sleutel overal waar de oude werd gebruikt: de oude sleutel werkt meteen niet meer.

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

5Vertel Blipit wie de gebruiker is (optioneel)

Koppel na het inloggen de gebruiker, zodat issues tonen wie getroffen was en replays op gebruiker gevonden kunnen worden.

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

6React, Vue, Angular en Svelte: opgevangen fouten melden

Frameworks vangen fouten binnen componenten op voordat de browser ze ziet, dus geef die ook door aan Blipit. Niet-opgevangen fouten elders worden vanzelf gemeld.

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

7Bugmeldingen: de knop Bug melden

Zodra de SDK start met je publieke sleutel, verschijnt rechtsonder op elke pagina een knop Bug melden, in de taal van de bezoeker. Een klik opent het meldformulier: een screenshot van de pagina om te markeren, een elementkiezer, een optionele schermopname, en een titel en beschrijving. Wijzig positie, stijl, tekst, kleur en sneltoets in code, zoals hieronder, of voor alle sites tegelijk in app.blipit.io, Projectinstellingen, Bugmeldingswidget; opties in code winnen. De handleiding Bugmeldingsknop toont elke optie met screenshots en een live demo.

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

8Het meldformulier openen vanuit je eigen knop

Wilt u een Bug melden-knop in uw eigen header of menu, gebruik dan de officiële: Blipit.reportButton() geeft een kant-en-klare knop met het Blipit-icoon en Bug melden in de taal van de bezoeker, en React-apps kunnen <BlipitReportButton /> uit @blipit/nextjs/react tonen (npm install @blipit/nextjs). Liever een eigen ontwerp? Roep openReport() aan vanuit een klikhandler, of attachReport(element) om een bestaand element te koppelen. In beide gevallen opent het meldformulier precies zoals vanaf de zwevende knop. Het Blipit-icoon mag alleen naast Bug melden staan, zoals de officiële knop laat zien.

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

9De standaardknop verbergen

Wil je alleen je eigen knop, zet de zwevende knop dan uit met feedbackWidget: false in code (feedbackWidget={false} op <Blipit />), of zet Bugmeldingsknop tonen uit in de Bugmeldingswidget-instellingen van het project om hem te verbergen op elke site die de sleutel gebruikt. openReport() en attachReport() blijven in beide gevallen werken.

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

10Het meldformulier vooraf invullen en context toevoegen

Roep setUser aan na het inloggen: naam en e-mail van de melder worden ingevuld, en ze krijgen een e-mail als je antwoordt of de status wijzigt. setReportMetadata voegt je eigen velden, zoals het abonnement of de grootte van de winkelwagen, aan elke melding toe; het draait op het moment dat een melding wordt verstuurd, dus de waarden zijn actueel.

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

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

11Alle opties en functies

• key: de publieke sleutel (blipit_pk_). Verplicht.
• environment en release: getoond bij elk event; release maakt regressies en source maps mogelijk. environment is standaard production.
• debug: true logt wat de SDK doet in de console, met regels die met [blipit] beginnen.
• sampleRate (0 tot 1), ignoreErrors (strings of patronen) en beforeSend (een event aanpassen, of null teruggeven om het te laten vallen) bepalen wat er wordt verstuurd. autoMuteExtensions (standaard aan) laat fouten vallen die alleen van browserextensies komen.
• webVitals (standaard aan), replay ({ sessionSampleRate, onErrorSampleRate }) en autoSessionTracking (crashvrije percentages, vereist release).
• feedbackWidget: false verbergt de knop Bug melden, of een object met position, style, text, color en shortcut wijzigt hem. theme: "light", "dark" of "auto" bepaalt het thema van het meldformulier.
• user ({ id, name, email }) en company (een naam of { id, name }) vullen het meldformulier in en worden aan meldingen toegevoegd.
• endpoint: alleen voor een zelfgehoste ingest; de standaard is https://in.blipit.io/api/v1/events.
• Functies: captureException(error), captureMessage(text, level), setUser, setTag(key, value), addBreadcrumb({ category, message }), openReport(), attachReport(element), reportButton(options), updateWidget(options), setReportMetadata(fn), showFeedback() en flush(), dat een promise teruggeeft zodra events in de wachtrij zijn verstuurd.
• Widgetinstellingen die je in het dashboard wijzigt, bereiken browsers binnen een uur, omdat de SDK ze zo lang bewaart; een privévenster toont de wijziging meteen.

12Check of het werkt

Herlaad je site. De knop Bug melden verschijnt rechtsonder, en binnen een minuut staat de paginaweergave onder Web vitals in app.blipit.io. Stuur dan een test-event: roep captureMessage één keer aan vanuit je code, of voer met de script-tag de regel hieronder uit in de browserconsole. Het staat binnen een paar seconden onder Issues.

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

13Als de knop of de events niet verschijnen

• Open de browserconsole en zoek naar regels die met [blipit] beginnen. Zet debug aan (debug: true in init, of debug op <Blipit />) om te zien of de knop werd getoond, in code werd uitgezet of door de projectinstelling werd verborgen.
• Next.js stuurt alleen variabelen waarvan de naam met NEXT_PUBLIC_ begint naar de browser, dus gebruik NEXT_PUBLIC_BLIPIT_KEY. Vite stuurt alleen VITE_-variabelen, dus gebruik VITE_BLIPIT_KEY. Met elke andere naam is de sleutel leeg in de browser en start Blipit niet.
• Herstart de dev-server nadat je .env of .env.local hebt toegevoegd of gewijzigd. Hij leest ze alleen bij het starten.
• Voeg op Vercel of een andere host dezelfde variabele toe aan de omgevingsvariabelen van het project en deploy opnieuw. NEXT_PUBLIC_- en VITE_-waarden worden in de build geschreven, dus een draaiende deployment ziet nooit een waarde die later is toegevoegd.
• Gebruik de publieke sleutel (blipit_pk_). Een geheime sleutel (blipit_sk_) wordt in de browser geweigerd met een consolefout; heeft er ooit een op een pagina gestaan, maak dan een nieuwe geheime sleutel aan.
• In Next.js hoort <Blipit /> in de root app/layout.tsx (of pages/_app.tsx), zodat hij op elke pagina draait. Roep in andere apps init één keer aan in het entry-bestand, voordat de app rendert.
• Bugmeldingsknop tonen moet aan staan in app.blipit.io, Projectinstellingen, Bugmeldingswidget, en je code mag geen feedbackWidget: false meegeven. De SDK bewaart de projectinstellingen tot een uur, dus test een wijziging in een privévenster.
• Adblockers en privacy-extensies kunnen in.blipit.io blokkeren. Probeer een privévenster met extensies uitgeschakeld.
• Als je site een Content Security Policy stuurt, sta dan script-src https://blipit.io, connect-src https://in.blipit.io, img-src data: en media-src blob: toe. De editor van de melding laadt bij de eerste klik van blipit.io/sdk, de screenshot wordt getekend vanuit een data:-afbeelding en ook schermopnames worden naar in.blipit.io geüpload. Met debug aan meldt de console wanneer de policy de screenshot heeft geblokkeerd. Voor geluid in schermopnames moet de Permissions-Policy-header van je site microphone=(self) toestaan, en display-capture=(self) voor schermopname; met microphone=() werken opnames zonder geluid.
• Controleer welke versie geïnstalleerd is met npm ls @blipit/browser @blipit/nextjs (of pnpm list @blipit/browser @blipit/nextjs) en vergelijk die met de changelog. pnpm 11 wacht een dag voordat het een nieuwe release installeert (minimum-release-age), dus op de releasedag installeert pnpm add stilletjes de vorige versie. Zo krijg je de nieuwe meteen: pnpm add @blipit/browser@<version> @blipit/nextjs@<version> --config.minimum-release-age=0.
• Kom je er nog steeds niet uit? Mail support@blipit.io met de [blipit]-regels uit de console.

1Installeren

npm install @blipit/nextjs

2Haal je sleutels op

Log in op app.blipit.io en open API-sleutels in de zijbalk, en dan je project. Elk project heeft twee sleutels. De publieke sleutel begint met blipit_pk_: hij gaat in browser- en appcode, kan alleen events insturen en mag door iedereen gezien worden. De geheime sleutel begint met blipit_sk_: hij blijft op je server of in Odoo, nooit in een browser, omdat hij ook issues kan lezen en wijzigen. De geheime sleutel wordt maar één keer getoond, direct na het aanmaken, dus kopieer hem dan; raak je hem kwijt, druk dan op Nieuwe geheime sleutel aanmaken, en de oude werkt meteen niet meer. Sommige SDK's hebben ook het project-id nodig, dat op dezelfde pagina staat.

3Zet de sleutels in .env.local

Maak .env.local aan in de projectroot met de publieke sleutel voor de browser en, als je de serverkant hieronder gebruikt, de geheime sleutel voor de server. Alleen namen die met NEXT_PUBLIC_ beginnen bereiken de browser, dus geef de geheime sleutel nooit dat voorvoegsel. Herstart npm run dev nadat je het bestand hebt opgeslagen. Voeg voor productie dezelfde variabelen toe bij je host (op Vercel: Project, Settings, Environment Variables, voor Production en Preview) en deploy opnieuw: NEXT_PUBLIC_-waarden worden in de build geschreven, dus een deployment van vóór het toevoegen heeft een lege sleutel.

NEXT_PUBLIC_BLIPIT_KEY=blipit_pk_your_public_key
BLIPIT_SECRET_KEY=blipit_sk_your_secret_key

4Browserkant

Voeg de component één keer toe in de root layout. Hij leest de publieke sleutel uit NEXT_PUBLIC_BLIPIT_KEY. Is de variabele leeg, dan start hij niets en meldt dat in de browserconsole.

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

5Serverkant

Next.js 15 en later roepen onRequestError aan bij fouten in server components, route handlers en server actions. Eén regel in instrumentation.ts koppelt het aan Blipit. Vanaf @blipit/nextjs 0.2.1 werkt dezelfde regel ook in apps met een middleware.ts en in Edge-routes (runtime = "edge"): de app bouwt, en fouten uit middleware en Edge worden ook gemeld. Next.js 14 heeft geen onRequestError; wikkel daar elke route handler en server action in withBlipit, zoals in het tweede voorbeeld: het meldt de fout, gooit hem opnieuw en slaat redirects en notFound() over. Zet BLIPIT_SECRET_KEY in de serveromgeving, nooit als 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());
});

6Afhankelijkheden en servergezondheid

Vanaf @blipit/nextjs 0.3 exporteer je ook register, zodat Blipit start wanneer de server opstart. Dan verschijnen database- en externe aanroepen op de pagina Afhankelijkheden en de CPU, het geheugen en de event loop van de server op Servergezondheid. In de Edge-runtime doet het niets. Op Vercel ziet register het binnenkomende verzoek misschien niet: wikkel vanaf @blipit/nextjs 0.4 route handlers en server actions in withBlipit, dan wordt elk een verzoek op de pagina Pulse met zijn database- en externe aanroepen, verstuurd na het antwoord zonder het te vertragen.

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

7Fouten opgevangen door error.tsx

Fouten die een error.tsx- of global-error.tsx-boundary opvangt, bereiken nooit de error handler van de browser, dus meld ze vanuit de boundary. Beide bestanden zijn 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>
  );
}

8Houd sleutels buiten git

Bewaar sleutels in omgevingsvariabelen of in de geheime instellingen van je host, nooit in code die je commit, en zet je .env-bestanden in .gitignore. Een publieke sleutel in een webpagina is normaal. Belandt een geheime sleutel ooit in git, op een openbare pagina, in een screenshot of in een chat, open dan API-sleutels, druk op Nieuwe geheime sleutel aanmaken en plak de nieuwe sleutel overal waar de oude werd gebruikt: de oude sleutel werkt meteen niet meer.

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

9Content Security Policy

Als je site een Content Security Policy stuurt, sta dan script-src https://blipit.io toe (de scripttag, en de editor van de melding en de replay-add-on, die bij het eerste gebruik van blipit.io/sdk/<version>/ laden), connect-src https://in.blipit.io (events, screenshots en schermopnames gaan allemaal naar in.blipit.io), img-src data: (de screenshot wordt getekend vanuit een afbeelding van de pagina) en media-src blob: (opnames worden in de melding afgespeeld). De screenshot laadt de afbeeldingen en lettertypen van de pagina opnieuw, dus hun hosts horen ook in connect-src, anders blijven ze leeg. Een wijziging in style-src is niet nodig. Roep bij de scripttag Blipit.init aan vanuit je eigen .js-bestand of geef het inline script een nonce, want een strikte policy blokkeert inline scripts. Voor geluid in schermopnames moet de Permissions-Policy-header van je site microphone=(self) toestaan, en display-capture=(self) voor schermopname; met microphone=() werken opnames zonder geluid.

10Source maps (optioneel)

Om stack traces je broncode te laten tonen in plaats van de geminificeerde bundel, upload je de maps voor elke release vanuit je build-stap.

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

11Bugmeldingen: de knop Bug melden

Zodra de SDK start met je publieke sleutel, verschijnt rechtsonder op elke pagina een knop Bug melden, in de taal van de bezoeker. Een klik opent het meldformulier: een screenshot van de pagina om te markeren, een elementkiezer, een optionele schermopname, en een titel en beschrijving. Wijzig positie, stijl, tekst, kleur en sneltoets in code, zoals hieronder, of voor alle sites tegelijk in app.blipit.io, Projectinstellingen, Bugmeldingswidget; opties in code winnen. De handleiding Bugmeldingsknop toont elke optie met screenshots en een live demo.

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

12Het meldformulier openen vanuit je eigen knop

Zet de officiële knop overal neer met <BlipitReportButton />, ook in server components: hij toont het Blipit-icoon en Bug melden in de taal van de bezoeker en opent het meldformulier. Liever een eigen ontwerp? Het component dat openReport aanroept moet een client component zijn, dus zet "use client" bovenaan het bestand. <Blipit /> moet al in app/layout.tsx staan. Gewone React-apps importeren de knop uit @blipit/nextjs/react en openReport uit @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>;
}

13De standaardknop verbergen

Wil je alleen je eigen knop, zet de zwevende knop dan uit met feedbackWidget: false in code (feedbackWidget={false} op <Blipit />), of zet Bugmeldingsknop tonen uit in de Bugmeldingswidget-instellingen van het project om hem te verbergen op elke site die de sleutel gebruikt. openReport() en attachReport() blijven in beide gevallen werken.

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

14Het meldformulier vooraf invullen en context toevoegen

Roep setUser aan na het inloggen: naam en e-mail van de melder worden ingevuld, en ze krijgen een e-mail als je antwoordt of de status wijzigt. setReportMetadata voegt je eigen velden, zoals het abonnement of de grootte van de winkelwagen, aan elke melding toe; het draait op het moment dat een melding wordt verstuurd, dus de waarden zijn actueel.

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

15Check of het werkt

Herlaad de app. De knop Bug melden verschijnt rechtsonder, en binnen een minuut staat de paginaweergave onder Web vitals in app.blipit.io. Voeg dan een knop toe die captureMessage aanroept, of een die een fout gooit, en klik erop: het event staat binnen een paar seconden onder Issues.

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

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

16Als de knop of de events niet verschijnen

• Open de browserconsole en zoek naar regels die met [blipit] beginnen. Zet debug aan (debug: true in init, of debug op <Blipit />) om te zien of de knop werd getoond, in code werd uitgezet of door de projectinstelling werd verborgen.
• Next.js stuurt alleen variabelen waarvan de naam met NEXT_PUBLIC_ begint naar de browser, dus gebruik NEXT_PUBLIC_BLIPIT_KEY. Vite stuurt alleen VITE_-variabelen, dus gebruik VITE_BLIPIT_KEY. Met elke andere naam is de sleutel leeg in de browser en start Blipit niet.
• Herstart de dev-server nadat je .env of .env.local hebt toegevoegd of gewijzigd. Hij leest ze alleen bij het starten.
• Voeg op Vercel of een andere host dezelfde variabele toe aan de omgevingsvariabelen van het project en deploy opnieuw. NEXT_PUBLIC_- en VITE_-waarden worden in de build geschreven, dus een draaiende deployment ziet nooit een waarde die later is toegevoegd.
• Gebruik de publieke sleutel (blipit_pk_). Een geheime sleutel (blipit_sk_) wordt in de browser geweigerd met een consolefout; heeft er ooit een op een pagina gestaan, maak dan een nieuwe geheime sleutel aan.
• In Next.js hoort <Blipit /> in de root app/layout.tsx (of pages/_app.tsx), zodat hij op elke pagina draait. Roep in andere apps init één keer aan in het entry-bestand, voordat de app rendert.
• Bugmeldingsknop tonen moet aan staan in app.blipit.io, Projectinstellingen, Bugmeldingswidget, en je code mag geen feedbackWidget: false meegeven. De SDK bewaart de projectinstellingen tot een uur, dus test een wijziging in een privévenster.
• Adblockers en privacy-extensies kunnen in.blipit.io blokkeren. Probeer een privévenster met extensies uitgeschakeld.
• Als je site een Content Security Policy stuurt, sta dan script-src https://blipit.io, connect-src https://in.blipit.io, img-src data: en media-src blob: toe. De editor van de melding laadt bij de eerste klik van blipit.io/sdk, de screenshot wordt getekend vanuit een data:-afbeelding en ook schermopnames worden naar in.blipit.io geüpload. Met debug aan meldt de console wanneer de policy de screenshot heeft geblokkeerd. Voor geluid in schermopnames moet de Permissions-Policy-header van je site microphone=(self) toestaan, en display-capture=(self) voor schermopname; met microphone=() werken opnames zonder geluid.
• Controleer welke versie geïnstalleerd is met npm ls @blipit/browser @blipit/nextjs (of pnpm list @blipit/browser @blipit/nextjs) en vergelijk die met de changelog. pnpm 11 wacht een dag voordat het een nieuwe release installeert (minimum-release-age), dus op de releasedag installeert pnpm add stilletjes de vorige versie. Zo krijg je de nieuwe meteen: pnpm add @blipit/browser@<version> @blipit/nextjs@<version> --config.minimum-release-age=0.
• Kom je er nog steeds niet uit? Mail support@blipit.io met de [blipit]-regels uit de console.

1Installeren

npm install @blipit/node

2Haal je sleutels op

Log in op app.blipit.io en open API-sleutels in de zijbalk, en dan je project. Elk project heeft twee sleutels. De publieke sleutel begint met blipit_pk_: hij gaat in browser- en appcode, kan alleen events insturen en mag door iedereen gezien worden. De geheime sleutel begint met blipit_sk_: hij blijft op je server of in Odoo, nooit in een browser, omdat hij ook issues kan lezen en wijzigen. De geheime sleutel wordt maar één keer getoond, direct na het aanmaken, dus kopieer hem dan; raak je hem kwijt, druk dan op Nieuwe geheime sleutel aanmaken, en de oude werkt meteen niet meer. Sommige SDK's hebben ook het project-id nodig, dat op dezelfde pagina staat.

3Bewaar de sleutel in de omgeving

Node gebruikt de geheime sleutel. Zet hem in een omgevingsvariabele, nooit in code: lokaal in een .env-bestand dat Node 20.6 en later laadt met --env-file, in productie in de omgeving of geheime instellingen van je host (Fly secrets, Docker, systemd, Render, Vercel). Herstart het proces nadat je hem hebt gewijzigd.

BLIPIT_SECRET_KEY=blipit_sk_your_secret_key

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

4Houd sleutels buiten git

Bewaar sleutels in omgevingsvariabelen of in de geheime instellingen van je host, nooit in code die je commit, en zet je .env-bestanden in .gitignore. Een publieke sleutel in een webpagina is normaal. Belandt een geheime sleutel ooit in git, op een openbare pagina, in een screenshot of in een chat, open dan API-sleutels, druk op Nieuwe geheime sleutel aanmaken en plak de nieuwe sleutel overal waar de oude werd gebruikt: de oude sleutel werkt meteen niet meer.

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

5Initialiseer als eerste

Zet dit in een bestand dat vóór je app draait, en importeer het als eerste.

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

Voeg de handler toe na je routes, zodat afgehandelde en niet-afgehandelde fouten allebei Blipit bereiken, met de methode, URL en user agent van het request. Koa, Hono en NestJS hebben elk één regel nodig: de Koa-middleware eerst, die van Hono vóór de routes. Ze melden fouten met een status van 500 of hoger. Verzoeken verschijnen dan op de pagina Pulse per route, zoals GET /users/:id, in plaats van één regel per 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 en Vercel

Serverless hosts pauzeren de functie zodra die antwoordt, en Lambda draait de HTTP-server van Node niet, dus wikkel de handler in. wrapHandler legt het verzoek vast (API Gateway-, function URL- en load balancer-events op methode en route, andere events op functienaam), meldt fouten en verstuurt alles voordat de handler terugkeert; hij wacht alleen als er iets te versturen is, hooguit 2 seconden. traceRequest doet hetzelfde voor elke handler die een Request krijgt. Op Vercel gaan de gegevens na het antwoord weg via waitUntil, dus niets wordt vertraagd. Gebruik in Next.js withBlipit (zie de Next.js-handleiding).

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

8Handmatige capture, logs en inlogpogingen

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

9Afhankelijkheden en servergezondheid

Vanaf 0.2 legt de SDK ook je database- en externe aanroepen vast, en de CPU, het geheugen en de event loop van je server. Zie de gidsen Afhankelijkheden en Servergezondheid; je stuurt het met tracesSampleRate, tracing: false en metrics: false.

10Check of het werkt

Open Issues in app.blipit.io. Het eerste event verschijnt binnen een paar seconden, gegroepeerd in een issue, en de verantwoordelijken krijgen een e-mail.

Blipit.captureMessage("Hello from Node");

1Installeren

pip install blipit

2Initialiseer bij het opstarten

Voor Django zet je het bovenaan settings.py. Voor Flask of FastAPI vóórdat de app wordt aangemaakt. De sleutel staat op de pagina Sleutels van het project. Met een lege sleutel logt init een waarschuwing en geeft False terug in plaats van een fout te gooien, dus een ontbrekende sleutel houdt de app nooit tegen bij het starten.

import blipit

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

3Haal je sleutels op

Log in op app.blipit.io en open API-sleutels in de zijbalk, en dan je project. Elk project heeft twee sleutels. De publieke sleutel begint met blipit_pk_: hij gaat in browser- en appcode, kan alleen events insturen en mag door iedereen gezien worden. De geheime sleutel begint met blipit_sk_: hij blijft op je server of in Odoo, nooit in een browser, omdat hij ook issues kan lezen en wijzigen. De geheime sleutel wordt maar één keer getoond, direct na het aanmaken, dus kopieer hem dan; raak je hem kwijt, druk dan op Nieuwe geheime sleutel aanmaken, en de oude werkt meteen niet meer. Sommige SDK's hebben ook het project-id nodig, dat op dezelfde pagina staat.

4Bewaar de sleutel in de omgeving

Deze SDK verstuurt met de publieke sleutel van de pagina API-sleutels van het project. Bewaar hem in een omgevingsvariabele: lokaal in een .env-bestand dat je framework of python-dotenv laadt, in productie in de instellingen van je host. Gebruik de geheime sleutel alleen als je inlogpogingen verstuurt.

BLIPIT_KEY=blipit_pk_your_public_key

import os
import blipit

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

5Houd sleutels buiten git

Bewaar sleutels in omgevingsvariabelen of in de geheime instellingen van je host, nooit in code die je commit, en zet je .env-bestanden in .gitignore. Een publieke sleutel in een webpagina is normaal. Belandt een geheime sleutel ooit in git, op een openbare pagina, in een screenshot of in een chat, open dan API-sleutels, druk op Nieuwe geheime sleutel aanmaken en plak de nieuwe sleutel overal waar de oude werd gebruikt: de oude sleutel werkt meteen niet meer.

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

6Handmatige capture en inlogpogingen

Inlogpogingen hebben de geheime sleutel nodig: initialiseer op de server met de geheime sleutel in plaats van de publieke, anders weigert de ingest ze met 403 security_needs_secret_key. Scale-abonnement.

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

7Check of het werkt

Open Issues in app.blipit.io. Het eerste event verschijnt binnen een paar seconden, gegroepeerd in een issue, en de verantwoordelijken krijgen een e-mail.

blipit.capture_message("Hello from Python")

1Installeren

composer require blipit/blipit

2Initialiseer bij het opstarten

Gewone PHP: bovenaan je front controller, voordat er een request wordt afgehandeld. Laravel start Blipit vanuit zijn config, zoals in de volgende stap. De sleutel staat op de pagina Sleutels van het project. Met een lege sleutel schrijft init een waarschuwing naar de error log en geeft false terug in plaats van een exception te gooien.

use Blipit\Blipit;

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

3Haal je sleutels op

Log in op app.blipit.io en open API-sleutels in de zijbalk, en dan je project. Elk project heeft twee sleutels. De publieke sleutel begint met blipit_pk_: hij gaat in browser- en appcode, kan alleen events insturen en mag door iedereen gezien worden. De geheime sleutel begint met blipit_sk_: hij blijft op je server of in Odoo, nooit in een browser, omdat hij ook issues kan lezen en wijzigen. De geheime sleutel wordt maar één keer getoond, direct na het aanmaken, dus kopieer hem dan; raak je hem kwijt, druk dan op Nieuwe geheime sleutel aanmaken, en de oude werkt meteen niet meer. Sommige SDK's hebben ook het project-id nodig, dat op dezelfde pagina staat.

4Bewaar de sleutel in de omgeving

Deze SDK verstuurt met de publieke sleutel. Laravel: zet hem in .env en in config/services.php; de Blipit-service provider wordt vanzelf gevonden en start Blipit vanuit die config, dus verder is niets nodig. Lees waarden via config, want env() geeft niets terug in app-code zodra de config gecachet is. Gewone PHP: lees de sleutel met getenv() uit de omgeving van de server.

BLIPIT_KEY=blipit_pk_your_public_key

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

5Houd sleutels buiten git

Bewaar sleutels in omgevingsvariabelen of in de geheime instellingen van je host, nooit in code die je commit, en zet je .env-bestanden in .gitignore. Een publieke sleutel in een webpagina is normaal. Belandt een geheime sleutel ooit in git, op een openbare pagina, in een screenshot of in een chat, open dan API-sleutels, druk op Nieuwe geheime sleutel aanmaken en plak de nieuwe sleutel overal waar de oude werd gebruikt: de oude sleutel werkt meteen niet meer.

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

6Laravel en Symfony

Laravel: elke exception die de handler meldt, komt bij Blipit aan, dus 404's en validatiefouten blijven buiten. Queries, logregels en aanroepen van de HTTP-client worden breadcrumbs, en jobs in de wachtrij worden getraced. Een regel Blipit::captureException die je al in bootstrap/app.php hebt, kan blijven: dezelfde exception wordt nooit twee keer verstuurd. Symfony: registreer de listener in config/services.yaml en roep Blipit::init vroeg aan in public/index.php en 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 }

7Handmatige capture en inlogpogingen

Inlogpogingen hebben de geheime sleutel nodig: initialiseer op de server met de geheime sleutel in plaats van de publieke, anders weigert de ingest ze met 403 security_needs_secret_key. Scale-abonnement.

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

8Check of het werkt

Open Issues in app.blipit.io. Het eerste event verschijnt binnen een paar seconden, gegroepeerd in een issue, en de verantwoordelijken krijgen een e-mail.

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

1Gemfile

gem "blipit"

2Initialiseer bij het opstarten

Rails: config/initializers/blipit.rb; verder niets te installeren, want Blipit voegt zelf zijn Rack-middleware, Active Job en Rails.error-meldingen toe. Rack- en Sinatra-apps voegen use Blipit::Rack toe. Scripts: voordat je code draait. De sleutel staat op de pagina Sleutels van het project. Met een lege sleutel print init een waarschuwing en geeft false terug in plaats van een fout te gooien.

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

3Haal je sleutels op

Log in op app.blipit.io en open API-sleutels in de zijbalk, en dan je project. Elk project heeft twee sleutels. De publieke sleutel begint met blipit_pk_: hij gaat in browser- en appcode, kan alleen events insturen en mag door iedereen gezien worden. De geheime sleutel begint met blipit_sk_: hij blijft op je server of in Odoo, nooit in een browser, omdat hij ook issues kan lezen en wijzigen. De geheime sleutel wordt maar één keer getoond, direct na het aanmaken, dus kopieer hem dan; raak je hem kwijt, druk dan op Nieuwe geheime sleutel aanmaken, en de oude werkt meteen niet meer. Sommige SDK's hebben ook het project-id nodig, dat op dezelfde pagina staat.

4Bewaar de sleutel in Rails credentials

Deze SDK verstuurt met de publieke sleutel. Bewaar hem in Rails in de versleutelde credentials en lees hem in de initializer; gebruik elders een omgevingsvariabele.

bin/rails credentials:edit

blipit:
  key: blipit_pk_your_public_key

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

5Houd sleutels buiten git

Bewaar sleutels in omgevingsvariabelen of in de geheime instellingen van je host, nooit in code die je commit, en zet je .env-bestanden in .gitignore. Een publieke sleutel in een webpagina is normaal. Belandt een geheime sleutel ooit in git, op een openbare pagina, in een screenshot of in een chat, open dan API-sleutels, druk op Nieuwe geheime sleutel aanmaken en plak de nieuwe sleutel overal waar de oude werd gebruikt: de oude sleutel werkt meteen niet meer.

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

6Handmatige capture en inlogpogingen

Inlogpogingen hebben de geheime sleutel nodig: initialiseer op de server met de geheime sleutel in plaats van de publieke, anders weigert de ingest ze met 403 security_needs_secret_key. Scale-abonnement.

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)

7Check of het werkt

Open Issues in app.blipit.io. Het eerste event verschijnt binnen een paar seconden, gegroepeerd in een issue, en de verantwoordelijken krijgen een e-mail.

Blipit.capture_message("Hello from Rails")

1Installeren

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

2Initialiseer in main

Init geeft nooit een panic: met een lege sleutel of een leeg project-id geeft het een fout terug en blijft Blipit uit, dus log de fout in plaats van te stoppen.

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

3Haal je sleutels op

Log in op app.blipit.io en open API-sleutels in de zijbalk, en dan je project. Elk project heeft twee sleutels. De publieke sleutel begint met blipit_pk_: hij gaat in browser- en appcode, kan alleen events insturen en mag door iedereen gezien worden. De geheime sleutel begint met blipit_sk_: hij blijft op je server of in Odoo, nooit in een browser, omdat hij ook issues kan lezen en wijzigen. De geheime sleutel wordt maar één keer getoond, direct na het aanmaken, dus kopieer hem dan; raak je hem kwijt, druk dan op Nieuwe geheime sleutel aanmaken, en de oude werkt meteen niet meer. Sommige SDK's hebben ook het project-id nodig, dat op dezelfde pagina staat.

4Bewaar de sleutel in de omgeving

Deze SDK verstuurt met de publieke sleutel en het project-id. Lees ze uit omgevingsvariabelen die je host, een systemd-unit of docker run -e instelt.

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

5Houd sleutels buiten git

Bewaar sleutels in omgevingsvariabelen of in de geheime instellingen van je host, nooit in code die je commit, en zet je .env-bestanden in .gitignore. Een publieke sleutel in een webpagina is normaal. Belandt een geheime sleutel ooit in git, op een openbare pagina, in een screenshot of in een chat, open dan API-sleutels, druk op Nieuwe geheime sleutel aanmaken en plak de nieuwe sleutel overal waar de oude werd gebruikt: de oude sleutel werkt meteen niet meer.

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

6Handmatige capture en inlogpogingen

Inlogpogingen hebben de geheime sleutel nodig: initialiseer op de server met de geheime sleutel in plaats van de publieke, anders weigert de ingest ze met 403 security_needs_secret_key. Scale-abonnement.

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 en net/http

defer blipit.Recover() bovenaan main of een goroutine meldt een panic met de stack, verstuurt wat in de wachtrij staat en geeft de panic opnieuw. Wikkel de handler die je serveert in blipit.Handler om panics met de request te melden en elke request te timen op Pulse, benoemd naar het ServeMux-patroon. Gin, Echo en Fiber gebruiken StartRequest, SetRoute en End, zoals in de README van het package.

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

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

8Check of het werkt

Open Issues in app.blipit.io. Het eerste event verschijnt binnen een paar seconden, gegroepeerd in een issue, en de verantwoordelijken krijgen een e-mail.

blipit.CaptureMessage("Hello from Go")

1Voeg de repository en dependency toe

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>

2Initialiseer bij het opstarten

Spring Boot: bovenaan main, vóór SpringApplication.run, of in een @PostConstruct-methode van een @Configuration-klasse. Niet-afgevangen exceptions op elke thread worden naar een wachtrij op schijf geschreven voordat de app stopt en daarna verstuurd, dus een crash wordt gemeld, ook als het netwerk plat ligt; wat overblijft gaat mee bij de volgende start.

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

3Haal je sleutels op

Log in op app.blipit.io en open API-sleutels in de zijbalk, en dan je project. Elk project heeft twee sleutels. De publieke sleutel begint met blipit_pk_: hij gaat in browser- en appcode, kan alleen events insturen en mag door iedereen gezien worden. De geheime sleutel begint met blipit_sk_: hij blijft op je server of in Odoo, nooit in een browser, omdat hij ook issues kan lezen en wijzigen. De geheime sleutel wordt maar één keer getoond, direct na het aanmaken, dus kopieer hem dan; raak je hem kwijt, druk dan op Nieuwe geheime sleutel aanmaken, en de oude werkt meteen niet meer. Sommige SDK's hebben ook het project-id nodig, dat op dezelfde pagina staat.

4Bewaar de sleutel in de omgeving

Deze SDK verstuurt met de publieke sleutel en het project-id. Lees ze uit omgevingsvariabelen, of in Spring Boot uit application.properties, gevuld vanuit de omgeving.

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

5Houd sleutels buiten git

Bewaar sleutels in omgevingsvariabelen of in de geheime instellingen van je host, nooit in code die je commit, en zet je .env-bestanden in .gitignore. Een publieke sleutel in een webpagina is normaal. Belandt een geheime sleutel ooit in git, op een openbare pagina, in een screenshot of in een chat, open dan API-sleutels, druk op Nieuwe geheime sleutel aanmaken en plak de nieuwe sleutel overal waar de oude werd gebruikt: de oude sleutel werkt meteen niet meer.

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

6Handmatige capture en inlogpogingen

Inlogpogingen hebben de geheime sleutel nodig: initialiseer op de server met de geheime sleutel in plaats van de publieke, anders weigert de ingest ze met 403 security_needs_secret_key. Scale-abonnement.

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

7Check of het werkt

Open Issues in app.blipit.io. Het eerste event verschijnt binnen een paar seconden, gegroepeerd in een issue, en de verantwoordelijken krijgen een e-mail.

Blipit.captureMessage("Hello from Java");

1Installeren

dotnet add package Blipit

2Initialiseer bij het opstarten

Houd de teruggegeven handle in leven zolang het proces draait. Beide waarden staan op de pagina Sleutels van het project.

using Blipit;

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

3Haal je sleutels op

Log in op app.blipit.io en open API-sleutels in de zijbalk, en dan je project. Elk project heeft twee sleutels. De publieke sleutel begint met blipit_pk_: hij gaat in browser- en appcode, kan alleen events insturen en mag door iedereen gezien worden. De geheime sleutel begint met blipit_sk_: hij blijft op je server of in Odoo, nooit in een browser, omdat hij ook issues kan lezen en wijzigen. De geheime sleutel wordt maar één keer getoond, direct na het aanmaken, dus kopieer hem dan; raak je hem kwijt, druk dan op Nieuwe geheime sleutel aanmaken, en de oude werkt meteen niet meer. Sommige SDK's hebben ook het project-id nodig, dat op dezelfde pagina staat.

4Bewaar de sleutel in de configuratie

Deze SDK verstuurt met de publieke sleutel en het project-id. Bewaar ze tijdens het ontwikkelen in user secrets en in productie in omgevingsvariabelen (Blipit__Key en Blipit__Project), en lees ze dan uit de configuratie.

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

5Houd sleutels buiten git

Bewaar sleutels in omgevingsvariabelen of in de geheime instellingen van je host, nooit in code die je commit, en zet je .env-bestanden in .gitignore. Een publieke sleutel in een webpagina is normaal. Belandt een geheime sleutel ooit in git, op een openbare pagina, in een screenshot of in een chat, open dan API-sleutels, druk op Nieuwe geheime sleutel aanmaken en plak de nieuwe sleutel overal waar de oude werd gebruikt: de oude sleutel werkt meteen niet meer.

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

6ASP.NET Core en logging

Verder niets toe te voegen: roep Init bovenaan Program.cs aan. Exceptions uit endpoints, controllers en middleware worden met de request gemeld, ook als UseExceptionHandler ze afhandelt, en met TracesSampleRate ingesteld wordt elke gesamplede request op Pulse getimed per route. BlipitLoggerProvider maakt van Information en hoger breadcrumbs en van Error en hoger events.

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

7Handmatige capture en inlogpogingen

Inlogpogingen hebben de geheime sleutel nodig: initialiseer op de server met de geheime sleutel in plaats van de publieke, anders weigert de ingest ze met 403 security_needs_secret_key. Scale-abonnement.

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

8Check of het werkt

Open Issues in app.blipit.io. Het eerste event verschijnt binnen een paar seconden, gegroepeerd in een issue, en de verantwoordelijken krijgen een e-mail.

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

1Haal je sleutels op

Log in op app.blipit.io en open API-sleutels in de zijbalk, en dan je project. Elk project heeft twee sleutels. De publieke sleutel begint met blipit_pk_: hij gaat in browser- en appcode, kan alleen events insturen en mag door iedereen gezien worden. De geheime sleutel begint met blipit_sk_: hij blijft op je server of in Odoo, nooit in een browser, omdat hij ook issues kan lezen en wijzigen. De geheime sleutel wordt maar één keer getoond, direct na het aanmaken, dus kopieer hem dan; raak je hem kwijt, druk dan op Nieuwe geheime sleutel aanmaken, en de oude werkt meteen niet meer. Sommige SDK's hebben ook het project-id nodig, dat op dezelfde pagina staat.

2React Native

Het package koppelt een kleine native module die Blipit's eigen Android- en iOS-SDK's start voor native crashes; het Gradle-bestand ervan voegt de JitPack-repository zelf toe. Wikkel de rootcomponent in, zodat renderfouten ook gemeld worden.

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

Vervang runApp in main.dart door Blipit.init. De plugin start Blipit's eigen Android- en iOS-SDK's voor native crashes, en fouten in het Flutter-framework en niet-afgevangen async-fouten worden vanzelf gemeld.

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

In Xcode: File, Add Package Dependencies, en vul de URL van de repository in; of voeg hem toe aan Package.swift en voeg BlipitSwift toe aan je target. Met CocoaPods gebruik je de BlipitSwift-pod. Roep daarna start één keer aan bij het opstarten. Met een lege sleutel of een leeg project-id print start een waarschuwing en geeft false terug in plaats van de app te laten crashen.

.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

Voeg JitPack toe aan de repositories in settings.gradle.kts, de dependency aan de app-module, en roep init aan in 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"
        }
    }
}

6Waar de sleutel in een app komt

Apps leveren de publieke sleutel en het project-id mee in de app, en dat is prima: de publieke sleutel kan alleen events insturen. Zet de geheime sleutel nooit in een app. Geef ze mee bij het builden, zodat ze buiten je repository blijven.

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

7Bugmeldingen in apps

Roep showReport aan vanuit je eigen menu-item, of zet de zwevende knop Bug melden aan. De reporter vraagt eerst hoe je het probleem wilt laten zien: een screenshot maken, het scherm opnemen (iOS) of alleen beschrijven. De screenshot opent schermvullend met de tools erboven en eronder, nooit erop; knijp of tik twee keer om te zoomen, markeer het probleem, voeg een titel en wat er gebeurde toe en verstuur. Meldingen komen binnen onder Bugmeldingen met de apparaatgegevens. React Native heeft react-native-view-shot nodig voor screenshots.

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

8Melden vanaf het scherm met de bug

Een menu-item Bug melden in bijvoorbeeld Profiel legt het menu vast, niet het probleem. Zet de manieren aan die bij het scherm zelf beginnen; ze staan standaard uit en vragen geen toestemming. shakeToReport opent het meldformulier als de telefoon wordt geschud. screenshotToReport vraagt na een gewone screenshot "Een bug melden met dit scherm?" en voegt Blipits eigen opname toe (iOS, en Android 14 en nieuwer). twoFingerReport opent het na ongeveer een seconde met twee vingers ingedrukt houden, zonder de aanrakingen van de app te blokkeren. reportAfterCrash vraagt bij de eerste start na een crash wat de persoon aan het doen was en koppelt de melding aan die crash. screenPicker, standaard aan, laat iemand die het formulier vanuit een menu opent kiezen op welk van de laatste schermen de bug zit: de snapshots blijven in het geheugen van het toestel en alleen de gekozen wordt geüpload. Jetpack Compose- en SwiftUI-apps geven hun schermen een naam met 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()))),
);

9Zwevende knop alleen voor testers

Open in app.blipit.io het project en zet in de instellingen van de meldknop Zwevende knop in telefoonapps op Iedereen of Alleen testers, met één gebruikers-id of e-mailadres per tester. De app stuurt de persoon die met setUser is ingesteld en Blipit antwoordt alleen ja of nee, dus de testerslijst gaat nooit mee in de app. showReportButton aanroepen (showButton bij React Native en Flutter) toont de knop nog steeds aan iedereen.

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

10Een app betrappen die vastloopt

Sommige fouten crashen nooit: het opstartscherm blijft draaien, of inloggen komt nooit terug. Zet waitForReady aan en roep reportReady aan zodra het eerste bruikbare scherm verschijnt. Zet flows zoals inloggen tussen startFlow en endFlow, en markeer stappen met flowStep. Als er een niet op tijd klaar is, opent Blipit een Vastgelopen-issue met de laatste stap en het spoor daarvoor. Alleen tijd op het scherm telt, en Blipit bepaalt de tijdslimieten. Namen worden verstuurd zoals ze geschreven zijn, dus gebruik vaste namen, nooit e-mailadressen of andere gebruikersgegevens.

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

11Check of het werkt

Open Issues in app.blipit.io. Het eerste event verschijnt binnen een paar seconden, gegroepeerd in een issue, en de verantwoordelijken krijgen een e-mail.

1Installeer de module

Download hem van apps.odoo.com (blipit_monitor, gratis) voor jouw Odoo-versie en installeer hem zoals elke module: Apps, Lijst met apps bijwerken, installeer Blipit Error Monitoring. Odoo Online staat geen apps van derden toe; Odoo.sh en on-premise wel.

2Haal je sleutels op

Log in op app.blipit.io en open API-sleutels in de zijbalk, en dan je project. Elk project heeft twee sleutels. De publieke sleutel begint met blipit_pk_: hij gaat in browser- en appcode, kan alleen events insturen en mag door iedereen gezien worden. De geheime sleutel begint met blipit_sk_: hij blijft op je server of in Odoo, nooit in een browser, omdat hij ook issues kan lezen en wijzigen. De geheime sleutel wordt maar één keer getoond, direct na het aanmaken, dus kopieer hem dan; raak je hem kwijt, druk dan op Nieuwe geheime sleutel aanmaken, en de oude werkt meteen niet meer. Sommige SDK's hebben ook het project-id nodig, dat op dezelfde pagina staat.

3Koppelen

Instellingen, Blipit: plak de geheime sleutel van het project, vink het akkoord met de Voorwaarden en de modulelicentie aan en druk op Opslaan. Het koppelt vanzelf en toont Gekoppeld aan <project>. Een publieke sleutel of een sleutel die al aan een andere database is gebonden, wordt geweigerd met de reden.

4Verantwoordelijken

Kies wie een e-mail krijgt, per bedrijf als je er meerdere hebt. Elke persoon neemt één seat van je plan in; Blipit controleert het aantal bij het opslaan.

5Bugmeldingen vanuit Odoo

De module voegt de knop Bug melden voor je toe aan Odoo; je hoeft geen code te schrijven. Kies onder Instellingen, Blipit, Bugmeldingen, Zichtbaar voor wie hem ziet: Interne gebruikers, Websitebezoekers, Beide of Niemand, en beperk interne gebruikers eventueel tot één groep. Meldingen bevatten het model, het record en het veld waar de persoon was, en naam en e-mail van de ingelogde gebruiker worden ingevuld. Positie, kleur, tekst en stijl komen uit app.blipit.io, Projectinstellingen, Bugmeldingswidget. Zie de handleiding Bugmeldingsknop voor elke optie.

6Check of het werkt

Open de Blipit-app in Odoo. De volgende fout verschijnt daar en in de inbox van de verantwoordelijken. Klik op Vernieuwen vanuit Blipit om het meteen te controleren.