Blipit installieren

Wählen Sie, womit Ihre App gebaut ist. Sie erhalten die genauen Schritte aus der Anleitung, und ein Klick zeigt sie in app.blipit.io mit Ihren eigenen Schlüsseln.

1Stack wählen

2Schritte für Beliebige Website

Bei Blipit angemeldet? Öffnen Sie Ihre Schlüsselseite: Dort stehen diese Schritte mit den Schlüsseln Ihres Projekts bereits ausgefüllt, fertig zum Kopieren.

Meine Schlüssel zeigen

Installation npm install @blipit/browser

1Schlüssel abrufen

Melden Sie sich bei app.blipit.io an und öffnen Sie API-Schlüssel in der Seitenleiste, dann Ihr Projekt. Jedes Projekt hat zwei Schlüssel. Der öffentliche Schlüssel beginnt mit blipit_pk_: Er gehört in Browser- und App-Code, kann nur Events senden und darf von jedem gesehen werden. Der geheime Schlüssel beginnt mit blipit_sk_: Er bleibt auf Ihrem Server oder in Odoo, nie in einem Browser, weil er auch Issues lesen und ändern kann. Der geheime Schlüssel wird nur einmal angezeigt, direkt nach der Erstellung, kopieren Sie ihn also dann; geht er verloren, klicken Sie auf Neuen geheimen Schlüssel erstellen, und der alte funktioniert sofort nicht mehr. Manche SDKs brauchen zusätzlich die Projekt-ID, die auf derselben Seite steht.

API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.

2Mit npm

Rufen Sie init einmal in Ihrer Einstiegsdatei auf, bevor die App rendert, mit dem öffentlichen Schlüssel. Mit Vite (React, Vue, Svelte) legen Sie den Schlüssel in .env als VITE_BLIPIT_KEY ab; nur VITE_-Variablen erreichen den Browser, und der Dev-Server liest .env nur beim Start.

sh
npm install @blipit/browser
.env
VITE_BLIPIT_KEY=blipit_pk_your_public_key
src/main.js
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 },
});

3Ohne Bundler: ein Script-Tag

Fügen Sie dies in den <head> jeder Seite oder in das Feld für eigenen Code Ihrer Plattform ein, mit Ihrem öffentlichen Schlüssel direkt eingetragen. Das ist in Ordnung: Der öffentliche Schlüssel kann nur Events senden.

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

4Schlüssel aus Git heraushalten

Bewahren Sie Schlüssel in Umgebungsvariablen oder den Secret-Einstellungen Ihres Hosters auf, nie in Code, den Sie committen, und tragen Sie Ihre .env-Dateien in .gitignore ein. Ein öffentlicher Schlüssel in einer Webseite ist normal. Landet ein geheimer Schlüssel je in Git, auf einer öffentlichen Seite, in einem Screenshot oder einem Chat, öffnen Sie API-Schlüssel, klicken Sie auf Neuen geheimen Schlüssel erstellen und fügen Sie den neuen Schlüssel überall ein, wo der alte verwendet wurde: Der alte Schlüssel funktioniert sofort nicht mehr.

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

5Blipit mitteilen, wer der Nutzer ist (optional)

Hängen Sie nach der Anmeldung den Nutzer an, damit Issues zeigen, wer betroffen war, und Replays nach Nutzer gefunden werden können.

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

6React, Vue, Angular und Svelte: abgefangene Fehler melden

Frameworks fangen Fehler in Komponenten ab, bevor der Browser sie sieht, übergeben Sie diese daher ebenfalls an Blipit. Nicht abgefangene Fehler an anderer Stelle werden von selbst gemeldet.

React 19 (src/main.tsx)
createRoot(document.getElementById("root")!, {
  onCaughtError: (error) => Blipit.captureException(error),
  onUncaughtError: (error) => Blipit.captureException(error),
}).render(<App />);
Oder, React 18 und älter: eine Error Boundary
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;
  }
}
Vue (src/main.ts)
const app = createApp(App);
app.config.errorHandler = (err) => Blipit.captureException(err);
app.mount("#app");
Angular (app.config.ts)
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 }] };
SvelteKit (src/hooks.client.ts)
import * as Blipit from "@blipit/browser";
import type { HandleClientError } from "@sveltejs/kit";

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

7Fehlerberichte: der Button Fehler melden

Sobald das SDK mit Ihrem öffentlichen Schlüssel startet, erscheint unten rechts auf jeder Seite ein Button Fehler melden, in der Sprache des Besuchers. Ein Klick öffnet den Reporter: einen Screenshot der Seite zum Markieren, eine Elementauswahl, eine optionale Bildschirmaufnahme sowie Titel und Beschreibung. Position, Stil, Text, Farbe und Tastenkürzel ändern Sie wie unten im Code oder für alle Websites auf einmal in app.blipit.io unter Projekteinstellungen, Fehlerbericht-Widget; Optionen im Code haben Vorrang. Die Anleitung zum Fehlerbericht-Button zeigt jede Option mit Screenshots und einer Live-Demo.

js
Blipit.init({
  key: import.meta.env.VITE_BLIPIT_KEY,
  feedbackWidget: {
    position: "bottom-left",
    style: "icon",
    text: "Report Issue",
    color: "#E11D48",
    shortcut: "ctrl+shift+b",
  },
});
Der Standard-Button Fehler melden, unten rechts.
Der Standard-Button Fehler melden, unten rechts.
Der Reporter: ein markierter Screenshot, der Titel und was passiert ist.
Der Reporter: ein markierter Screenshot, der Titel und was passiert ist.

8Den Reporter über Ihren eigenen Button öffnen

Für einen Fehler-melden-Button in Ihrem eigenen Header oder Menü nehmen Sie den offiziellen: Blipit.reportButton() liefert einen fertigen Button mit dem Blipit-Symbol und Fehler melden in der Sprache der Besucher, und React-Apps können <BlipitReportButton /> aus @blipit/nextjs/react rendern (npm install @blipit/nextjs). Lieber ein eigenes Design? Rufen Sie openReport() aus einem beliebigen Klick-Handler auf oder attachReport(element), um ein bereits vorhandenes Element anzubinden. So oder so öffnet sich der Reporter genau wie über den schwebenden Button. Das Blipit-Symbol darf nur neben Fehler melden stehen, so wie es der offizielle Button zeigt.

Offizieller Button, reines HTML
<nav id="help-menu"></nav>
<script>
  document.getElementById("help-menu").append(Blipit.reportButton());
</script>
Offizieller Button, React
import { BlipitReportButton } from "@blipit/nextjs/react";

export function Header() {
  return (
    <header>
      <a href="/">Acme</a>
      <BlipitReportButton variant="outline" size="sm" />
    </header>
  );
}
Offizieller Button, Vue
<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>
Reines HTML
<button id="report-issue">Report Issue</button>
<script>
  Blipit.attachReport(document.getElementById("report-issue"));
</script>

<button onclick="Blipit.openReport()">Report Issue</button>
React
import { openReport } from "@blipit/browser";

export function ReportIssue() {
  return <button onClick={() => openReport()}>Report Issue</button>;
}
Vue
<script setup>
import { openReport } from "@blipit/browser";
</script>

<template>
  <button @click="openReport()">Report Issue</button>
</template>
Der offizielle Button Fehler melden im Header einer Website.
Der offizielle Button Fehler melden im Header einer Website.
Ein eigener Button Report Issue im Seiten-Header öffnet den Blipit-Reporter.
Ein eigener Button Report Issue im Seiten-Header öffnet den Blipit-Reporter.

9Den Standard-Button ausblenden

Um nur Ihren eigenen Button zu behalten, schalten Sie den schwebenden mit feedbackWidget: false im Code aus (feedbackWidget={false} an <Blipit />), oder deaktivieren Sie Fehlerbericht-Button anzeigen in den Fehlerbericht-Widget-Einstellungen des Projekts, um ihn auf jeder Website auszublenden, die den Schlüssel nutzt. openReport() und attachReport() funktionieren in beiden Fällen weiter.

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

10Den Reporter vorausfüllen und Kontext hinzufügen

Rufen Sie setUser nach der Anmeldung auf: Name und E-Mail der meldenden Person werden vorausgefüllt, und sie erhält eine E-Mail, wenn Sie antworten oder den Status ändern. setReportMetadata fügt jedem Bericht eigene Felder hinzu, etwa den Plan oder die Warenkorbgröße; die Funktion läuft beim Senden eines Berichts, daher sind die Werte aktuell.

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

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

11Alle Optionen und Funktionen

  • key: der öffentliche Schlüssel (blipit_pk_). Erforderlich.
  • environment und release: werden an jedem Event angezeigt; release ermöglicht Regressionen und Source Maps. environment ist standardmäßig production.
  • debug: true protokolliert in der Konsole, was das SDK tut, mit Zeilen, die mit [blipit] beginnen.
  • sampleRate (0 bis 1), ignoreErrors (Strings oder Muster) und beforeSend (ein Event bearbeiten oder null zurückgeben, um es zu verwerfen) steuern, was gesendet wird. autoMuteExtensions (standardmäßig an) verwirft Fehler, die nur aus Browser-Erweiterungen stammen.
  • webVitals (standardmäßig an), replay ({ sessionSampleRate, onErrorSampleRate }) und autoSessionTracking (absturzfreie Raten, benötigt release).
  • feedbackWidget: false blendet den Button Fehler melden aus, oder ein Objekt mit position, style, text, color und shortcut ändert ihn. theme: "light", "dark" oder "auto" legt das Design des Reporters fest.
  • user ({ id, name, email }) und company (ein Name oder { id, name }) füllen den Reporter vor und werden zu Berichten hinzugefügt.
  • endpoint: nur für eine selbst gehostete Annahme; der Standard ist https://in.blipit.io/api/v1/events.
  • Funktionen: captureException(error), captureMessage(text, level), setUser, setTag(key, value), addBreadcrumb({ category, message }), openReport(), attachReport(element), reportButton(options), updateWidget(options), setReportMetadata(fn), showFeedback() und flush(), das ein Promise zurückgibt, sobald Events in der Warteschlange gesendet sind.
  • Im Dashboard geänderte Widget-Einstellungen erreichen Browser innerhalb einer Stunde, weil das SDK sie so lange speichert; ein privates Fenster zeigt die Änderung sofort.

12Prüfen, ob es funktioniert

Laden Sie Ihre Website neu. Der Button Fehler melden erscheint unten rechts, und innerhalb einer Minute erscheint der Seitenaufruf unter Web Vitals in app.blipit.io. Senden Sie dann ein Test-Event: Rufen Sie captureMessage einmal aus Ihrem Code auf, oder führen Sie beim Script-Tag die Zeile unten in der Browser-Konsole aus. Es erscheint innerhalb weniger Sekunden unter Issues.

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

13Wenn der Button oder die Events nicht erscheinen

  • Öffnen Sie die Browser-Konsole und suchen Sie nach Zeilen, die mit [blipit] beginnen. Schalten Sie debug ein (debug: true in init oder debug an <Blipit />), um zu sehen, ob der Button angezeigt, im Code ausgeschaltet oder durch die Projekteinstellung ausgeblendet wurde.
  • Next.js sendet nur Variablen, deren Namen mit NEXT_PUBLIC_ beginnen, an den Browser, verwenden Sie daher NEXT_PUBLIC_BLIPIT_KEY. Vite sendet nur VITE_-Variablen, verwenden Sie daher VITE_BLIPIT_KEY. Mit jedem anderen Namen ist der Schlüssel im Browser leer, und Blipit startet nicht.
  • Starten Sie den Dev-Server neu, nachdem Sie .env oder .env.local hinzugefügt oder geändert haben. Er liest sie nur beim Start.
  • Fügen Sie auf Vercel oder bei jedem anderen Hoster dieselbe Variable in den Umgebungsvariablen des Projekts hinzu und deployen Sie erneut. NEXT_PUBLIC_- und VITE_-Werte werden in den Build geschrieben, daher sieht ein laufendes Deployment einen später hinzugefügten Wert nie.
  • Verwenden Sie den öffentlichen Schlüssel (blipit_pk_). Ein geheimer Schlüssel (blipit_sk_) wird im Browser mit einem Konsolenfehler abgelehnt; war einer je auf einer Seite, erstellen Sie einen neuen geheimen Schlüssel.
  • In Next.js gehört <Blipit /> in das Root-Layout app/layout.tsx (oder pages/_app.tsx), damit es auf jeder Seite läuft. In anderen Apps rufen Sie init einmal in der Einstiegsdatei auf, bevor die App rendert.
  • Fehlerbericht-Button anzeigen muss in app.blipit.io unter Projekteinstellungen, Fehlerbericht-Widget eingeschaltet sein, und Ihr Code darf nicht feedbackWidget: false übergeben. Das SDK speichert die Projekteinstellungen bis zu einer Stunde, testen Sie eine Änderung daher in einem privaten Fenster.
  • Werbeblocker und Datenschutz-Erweiterungen können in.blipit.io blockieren. Versuchen Sie es in einem privaten Fenster mit deaktivierten Erweiterungen.
  • Wenn Ihre Website eine Content Security Policy sendet, erlauben Sie script-src https://blipit.io, connect-src https://in.blipit.io, img-src data: und media-src blob:. Der Reporter-Editor wird beim ersten Klick von blipit.io/sdk geladen, der Screenshot wird aus einem data:-Bild gezeichnet, und Bildschirmaufnahmen werden ebenfalls zu in.blipit.io hochgeladen. Mit debug zeigt die Konsole an, wenn die Policy den Screenshot blockiert hat. Damit Bildschirmaufnahmen Ton enthalten, muss der Permissions-Policy-Header Ihrer Website microphone=(self) erlauben, für die Bildschirmaufnahme außerdem display-capture=(self); mit microphone=() funktionieren Aufnahmen ohne Ton.
  • Prüfen Sie die installierte Version mit npm ls @blipit/browser @blipit/nextjs (oder pnpm list @blipit/browser @blipit/nextjs) und vergleichen Sie sie mit dem Changelog. pnpm 11 wartet einen Tag, bevor es eine neue Version installiert (minimum-release-age), daher installiert pnpm add am Veröffentlichungstag stillschweigend die vorherige Version. So erhalten Sie die neue sofort: pnpm add @blipit/browser@<version> @blipit/nextjs@<version> --config.minimum-release-age=0.
  • Kommen Sie nicht weiter? Schreiben Sie an support@blipit.io und fügen Sie die [blipit]-Zeilen aus der Konsole bei.

Vollständige Beliebige Website-Anleitung öffnen

2Schritte für Next.js und React

Bei Blipit angemeldet? Öffnen Sie Ihre Schlüsselseite: Dort stehen diese Schritte mit den Schlüsseln Ihres Projekts bereits ausgefüllt, fertig zum Kopieren.

Meine Schlüssel zeigen

Installation npm install @blipit/nextjs

1Installation

sh
npm install @blipit/nextjs

2Schlüssel abrufen

Melden Sie sich bei app.blipit.io an und öffnen Sie API-Schlüssel in der Seitenleiste, dann Ihr Projekt. Jedes Projekt hat zwei Schlüssel. Der öffentliche Schlüssel beginnt mit blipit_pk_: Er gehört in Browser- und App-Code, kann nur Events senden und darf von jedem gesehen werden. Der geheime Schlüssel beginnt mit blipit_sk_: Er bleibt auf Ihrem Server oder in Odoo, nie in einem Browser, weil er auch Issues lesen und ändern kann. Der geheime Schlüssel wird nur einmal angezeigt, direkt nach der Erstellung, kopieren Sie ihn also dann; geht er verloren, klicken Sie auf Neuen geheimen Schlüssel erstellen, und der alte funktioniert sofort nicht mehr. Manche SDKs brauchen zusätzlich die Projekt-ID, die auf derselben Seite steht.

API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.

3Die Schlüssel in .env.local ablegen

Legen Sie im Projektstamm .env.local an, mit dem öffentlichen Schlüssel für den Browser und, falls Sie die Serverseite unten nutzen, dem geheimen Schlüssel für den Server. Nur Namen, die mit NEXT_PUBLIC_ beginnen, erreichen den Browser, geben Sie dem geheimen Schlüssel dieses Präfix also nie. Starten Sie npm run dev nach dem Speichern der Datei neu. Für die Produktion fügen Sie dieselben Variablen bei Ihrem Hoster hinzu (auf Vercel: Project, Settings, Environment Variables, für Production und Preview) und deployen erneut: NEXT_PUBLIC_-Werte werden in den Build geschrieben, daher hat ein Deployment, das vor dem Hinzufügen erstellt wurde, einen leeren Schlüssel.

.env.local
NEXT_PUBLIC_BLIPIT_KEY=blipit_pk_your_public_key
BLIPIT_SECRET_KEY=blipit_sk_your_secret_key

4Browserseite

Fügen Sie die Komponente einmal im Root-Layout ein. Sie liest den öffentlichen Schlüssel aus NEXT_PUBLIC_BLIPIT_KEY. Ist die Variable leer, startet sie nichts und meldet das in der Browser-Konsole.

app/layout.tsx
import { Blipit } from "@blipit/nextjs";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Blipit
          publicKey={process.env.NEXT_PUBLIC_BLIPIT_KEY!}
          environment={process.env.NEXT_PUBLIC_VERCEL_ENV ?? "development"}
          release={process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA}
          replay={{ onErrorSampleRate: 1 }}
        />
        {children}
      </body>
    </html>
  );
}

5Serverseite

Next.js 15 und neuer rufen onRequestError bei Fehlern in Server Components, Route Handlers und Server Actions auf. Eine Zeile in instrumentation.ts verbindet es mit Blipit. Ab @blipit/nextjs 0.2.1 funktioniert dieselbe Zeile auch in Apps mit einer middleware.ts und in Edge-Routen (runtime = "edge"): Die App lässt sich bauen, und Fehler aus Middleware und Edge werden ebenfalls gemeldet. Next.js 14 hat kein onRequestError; umschließen Sie dort jeden Route Handler und jede Server Action mit withBlipit, wie im zweiten Beispiel: Es meldet den Fehler, wirft ihn erneut und lässt Redirects und notFound() aus. Setzen Sie BLIPIT_SECRET_KEY in der Server-Umgebung, nie als NEXT_PUBLIC_.

instrumentation.ts
export { captureRequestError as onRequestError } from "@blipit/nextjs/server";
app/api/orders/route.ts
import { withBlipit } from "@blipit/nextjs/server";

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

6Abhängigkeiten und Serverzustand

Ab @blipit/nextjs 0.3 exportierst du auch register, damit Blipit beim Serverstart beginnt. Dann erscheinen Datenbank- und externe Aufrufe unter Abhängigkeiten und CPU, Speicher und Event-Loop des Servers unter Serverzustand. In der Edge-Runtime tut es nichts. Auf Vercel sieht register die eingehende Anfrage womöglich nicht: Ab @blipit/nextjs 0.4 umschließen Sie Route Handler und Server Actions mit withBlipit, dann wird jeder zu einer Anfrage auf der Seite Pulse mit ihren Datenbank- und externen Aufrufen, gesendet nach der Antwort, ohne sie zu verzögern.

instrumentation.ts
export { captureRequestError as onRequestError, register } from "@blipit/nextjs/server";
app/api/orders/route.ts
import { withBlipit } from "@blipit/nextjs/server";

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

7Von error.tsx abgefangene Fehler

Fehler, die eine error.tsx- oder global-error.tsx-Boundary abfängt, erreichen den Fehler-Handler des Browsers nie, melden Sie sie daher aus der Boundary. Beide Dateien sind Client Components.

app/error.tsx
"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>
  );
}
app/global-error.tsx
"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>
  );
}

8Schlüssel aus Git heraushalten

Bewahren Sie Schlüssel in Umgebungsvariablen oder den Secret-Einstellungen Ihres Hosters auf, nie in Code, den Sie committen, und tragen Sie Ihre .env-Dateien in .gitignore ein. Ein öffentlicher Schlüssel in einer Webseite ist normal. Landet ein geheimer Schlüssel je in Git, auf einer öffentlichen Seite, in einem Screenshot oder einem Chat, öffnen Sie API-Schlüssel, klicken Sie auf Neuen geheimen Schlüssel erstellen und fügen Sie den neuen Schlüssel überall ein, wo der alte verwendet wurde: Der alte Schlüssel funktioniert sofort nicht mehr.

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

9Content Security Policy

Wenn Ihre Website eine Content Security Policy sendet, erlauben Sie script-src https://blipit.io (das Script-Tag sowie den Reporter-Editor und das Replay-Add-on, die beim ersten Gebrauch von blipit.io/sdk/<version>/ geladen werden), connect-src https://in.blipit.io (Ereignisse, Screenshots und Bildschirmaufnahmen gehen alle an in.blipit.io), img-src data: (der Screenshot wird aus einem Bild der Seite gezeichnet) und media-src blob: (Aufnahmen werden im Reporter abgespielt). Der Screenshot lädt die Bilder und Schriften der Seite neu, daher gehören deren Hosts ebenfalls in connect-src, sonst bleiben sie leer. Eine Änderung an style-src ist nicht nötig. Rufen Sie beim Script-Tag Blipit.init aus einer eigenen .js-Datei auf oder geben Sie dem Inline-Script eine Nonce, denn eine strenge Policy blockiert Inline-Scripts. Damit Bildschirmaufnahmen Ton enthalten, muss der Permissions-Policy-Header Ihrer Website microphone=(self) erlauben, für die Bildschirmaufnahme außerdem display-capture=(self); mit microphone=() funktionieren Aufnahmen ohne Ton.

10Source Maps (optional)

Damit Stack Traces Ihren Quellcode statt des minifizierten Bundles zeigen, laden Sie die Maps für jedes Release aus Ihrem Build-Schritt hoch.

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

11Fehlerberichte: der Button Fehler melden

Sobald das SDK mit Ihrem öffentlichen Schlüssel startet, erscheint unten rechts auf jeder Seite ein Button Fehler melden, in der Sprache des Besuchers. Ein Klick öffnet den Reporter: einen Screenshot der Seite zum Markieren, eine Elementauswahl, eine optionale Bildschirmaufnahme sowie Titel und Beschreibung. Position, Stil, Text, Farbe und Tastenkürzel ändern Sie wie unten im Code oder für alle Websites auf einmal in app.blipit.io unter Projekteinstellungen, Fehlerbericht-Widget; Optionen im Code haben Vorrang. Die Anleitung zum Fehlerbericht-Button zeigt jede Option mit Screenshots und einer Live-Demo.

app/layout.tsx
<Blipit
  publicKey={process.env.NEXT_PUBLIC_BLIPIT_KEY!}
  feedbackWidget={{
    position: "bottom-left",
    style: "icon",
    text: "Report Issue",
    color: "#E11D48",
    shortcut: "ctrl+shift+b",
  }}
/>
Der Standard-Button Fehler melden, unten rechts.
Der Standard-Button Fehler melden, unten rechts.
Der Reporter: ein markierter Screenshot, der Titel und was passiert ist.
Der Reporter: ein markierter Screenshot, der Titel und was passiert ist.

12Den Reporter über Ihren eigenen Button öffnen

Setzen Sie den offiziellen Button mit <BlipitReportButton /> an eine beliebige Stelle, auch in Server Components: Er zeigt das Blipit-Symbol und Fehler melden in der Sprache der Besucher und öffnet den Reporter. Lieber ein eigenes Design? Die Komponente, die openReport aufruft, muss eine Client Component sein, setzen Sie also "use client" an den Anfang ihrer Datei. <Blipit /> muss bereits in app/layout.tsx stehen. Reine React-Apps importieren den Button aus @blipit/nextjs/react und openReport aus @blipit/browser.

app/header.tsx
import { BlipitReportButton } from "@blipit/nextjs";

export function Header() {
  return (
    <header>
      <a href="/">Acme</a>
      <BlipitReportButton />
    </header>
  );
}
React ohne Next.js
import { BlipitReportButton } from "@blipit/nextjs/react";

<BlipitReportButton variant="outline" size="sm" />
app/report-issue.tsx
"use client";

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

export function ReportIssue() {
  return <button onClick={() => openReport()}>Report Issue</button>;
}
React (@blipit/browser)
import { openReport } from "@blipit/browser";

export function ReportIssue() {
  return <button onClick={() => openReport()}>Report Issue</button>;
}
Der offizielle Button Fehler melden im Header einer Website.
Der offizielle Button Fehler melden im Header einer Website.
Eine Next.js-App: Der eigene Button Report Issue im Header hat den Blipit-Reporter geöffnet.
Eine Next.js-App: Der eigene Button Report Issue im Header hat den Blipit-Reporter geöffnet.

13Den Standard-Button ausblenden

Um nur Ihren eigenen Button zu behalten, schalten Sie den schwebenden mit feedbackWidget: false im Code aus (feedbackWidget={false} an <Blipit />), oder deaktivieren Sie Fehlerbericht-Button anzeigen in den Fehlerbericht-Widget-Einstellungen des Projekts, um ihn auf jeder Website auszublenden, die den Schlüssel nutzt. openReport() und attachReport() funktionieren in beiden Fällen weiter.

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

14Den Reporter vorausfüllen und Kontext hinzufügen

Rufen Sie setUser nach der Anmeldung auf: Name und E-Mail der meldenden Person werden vorausgefüllt, und sie erhält eine E-Mail, wenn Sie antworten oder den Status ändern. setReportMetadata fügt jedem Bericht eigene Felder hinzu, etwa den Plan oder die Warenkorbgröße; die Funktion läuft beim Senden eines Berichts, daher sind die Werte aktuell.

app/blipit-user.tsx
"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;
}

15Prüfen, ob es funktioniert

Laden Sie die App neu. Der Button Fehler melden erscheint unten rechts, und innerhalb einer Minute erscheint der Seitenaufruf unter Web Vitals in app.blipit.io. Fügen Sie dann einen Button hinzu, der captureMessage aufruft oder einen Fehler wirft, und klicken Sie darauf: Das Event erscheint innerhalb weniger Sekunden unter Issues.

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

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

16Wenn der Button oder die Events nicht erscheinen

  • Öffnen Sie die Browser-Konsole und suchen Sie nach Zeilen, die mit [blipit] beginnen. Schalten Sie debug ein (debug: true in init oder debug an <Blipit />), um zu sehen, ob der Button angezeigt, im Code ausgeschaltet oder durch die Projekteinstellung ausgeblendet wurde.
  • Next.js sendet nur Variablen, deren Namen mit NEXT_PUBLIC_ beginnen, an den Browser, verwenden Sie daher NEXT_PUBLIC_BLIPIT_KEY. Vite sendet nur VITE_-Variablen, verwenden Sie daher VITE_BLIPIT_KEY. Mit jedem anderen Namen ist der Schlüssel im Browser leer, und Blipit startet nicht.
  • Starten Sie den Dev-Server neu, nachdem Sie .env oder .env.local hinzugefügt oder geändert haben. Er liest sie nur beim Start.
  • Fügen Sie auf Vercel oder bei jedem anderen Hoster dieselbe Variable in den Umgebungsvariablen des Projekts hinzu und deployen Sie erneut. NEXT_PUBLIC_- und VITE_-Werte werden in den Build geschrieben, daher sieht ein laufendes Deployment einen später hinzugefügten Wert nie.
  • Verwenden Sie den öffentlichen Schlüssel (blipit_pk_). Ein geheimer Schlüssel (blipit_sk_) wird im Browser mit einem Konsolenfehler abgelehnt; war einer je auf einer Seite, erstellen Sie einen neuen geheimen Schlüssel.
  • In Next.js gehört <Blipit /> in das Root-Layout app/layout.tsx (oder pages/_app.tsx), damit es auf jeder Seite läuft. In anderen Apps rufen Sie init einmal in der Einstiegsdatei auf, bevor die App rendert.
  • Fehlerbericht-Button anzeigen muss in app.blipit.io unter Projekteinstellungen, Fehlerbericht-Widget eingeschaltet sein, und Ihr Code darf nicht feedbackWidget: false übergeben. Das SDK speichert die Projekteinstellungen bis zu einer Stunde, testen Sie eine Änderung daher in einem privaten Fenster.
  • Werbeblocker und Datenschutz-Erweiterungen können in.blipit.io blockieren. Versuchen Sie es in einem privaten Fenster mit deaktivierten Erweiterungen.
  • Wenn Ihre Website eine Content Security Policy sendet, erlauben Sie script-src https://blipit.io, connect-src https://in.blipit.io, img-src data: und media-src blob:. Der Reporter-Editor wird beim ersten Klick von blipit.io/sdk geladen, der Screenshot wird aus einem data:-Bild gezeichnet, und Bildschirmaufnahmen werden ebenfalls zu in.blipit.io hochgeladen. Mit debug zeigt die Konsole an, wenn die Policy den Screenshot blockiert hat. Damit Bildschirmaufnahmen Ton enthalten, muss der Permissions-Policy-Header Ihrer Website microphone=(self) erlauben, für die Bildschirmaufnahme außerdem display-capture=(self); mit microphone=() funktionieren Aufnahmen ohne Ton.
  • Prüfen Sie die installierte Version mit npm ls @blipit/browser @blipit/nextjs (oder pnpm list @blipit/browser @blipit/nextjs) und vergleichen Sie sie mit dem Changelog. pnpm 11 wartet einen Tag, bevor es eine neue Version installiert (minimum-release-age), daher installiert pnpm add am Veröffentlichungstag stillschweigend die vorherige Version. So erhalten Sie die neue sofort: pnpm add @blipit/browser@<version> @blipit/nextjs@<version> --config.minimum-release-age=0.
  • Kommen Sie nicht weiter? Schreiben Sie an support@blipit.io und fügen Sie die [blipit]-Zeilen aus der Konsole bei.

Vollständige Next.js und React-Anleitung öffnen

2Schritte für Node.js

Bei Blipit angemeldet? Öffnen Sie Ihre Schlüsselseite: Dort stehen diese Schritte mit den Schlüsseln Ihres Projekts bereits ausgefüllt, fertig zum Kopieren.

Meine Schlüssel zeigen

Installation npm install @blipit/node

1Installation

sh
npm install @blipit/node

2Schlüssel abrufen

Melden Sie sich bei app.blipit.io an und öffnen Sie API-Schlüssel in der Seitenleiste, dann Ihr Projekt. Jedes Projekt hat zwei Schlüssel. Der öffentliche Schlüssel beginnt mit blipit_pk_: Er gehört in Browser- und App-Code, kann nur Events senden und darf von jedem gesehen werden. Der geheime Schlüssel beginnt mit blipit_sk_: Er bleibt auf Ihrem Server oder in Odoo, nie in einem Browser, weil er auch Issues lesen und ändern kann. Der geheime Schlüssel wird nur einmal angezeigt, direkt nach der Erstellung, kopieren Sie ihn also dann; geht er verloren, klicken Sie auf Neuen geheimen Schlüssel erstellen, und der alte funktioniert sofort nicht mehr. Manche SDKs brauchen zusätzlich die Projekt-ID, die auf derselben Seite steht.

API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.

3Den Schlüssel in der Umgebung ablegen

Node verwendet den geheimen Schlüssel. Legen Sie ihn in eine Umgebungsvariable, nie in den Code: lokal in eine .env-Datei, die Node 20.6 und neuer mit --env-file lädt, in der Produktion in die Umgebungs- oder Secret-Einstellungen Ihres Hosters (Fly secrets, Docker, systemd, Render, Vercel). Starten Sie den Prozess nach einer Änderung neu.

.env
BLIPIT_SECRET_KEY=blipit_sk_your_secret_key
sh
node --env-file=.env --import ./instrument.mjs server.mjs

4Schlüssel aus Git heraushalten

Bewahren Sie Schlüssel in Umgebungsvariablen oder den Secret-Einstellungen Ihres Hosters auf, nie in Code, den Sie committen, und tragen Sie Ihre .env-Dateien in .gitignore ein. Ein öffentlicher Schlüssel in einer Webseite ist normal. Landet ein geheimer Schlüssel je in Git, auf einer öffentlichen Seite, in einem Screenshot oder einem Chat, öffnen Sie API-Schlüssel, klicken Sie auf Neuen geheimen Schlüssel erstellen und fügen Sie den neuen Schlüssel überall ein, wo der alte verwendet wurde: Der alte Schlüssel funktioniert sofort nicht mehr.

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

5Zuerst initialisieren

Legen Sie dies in eine Datei, die vor Ihrer App läuft, und importieren Sie sie zuerst.

instrument.mjs
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 oder NestJS

Fügen Sie den Handler nach Ihren Routen hinzu, damit behandelte und unbehandelte Fehler beide Blipit erreichen, mit Methode, URL und User Agent des Requests. Koa, Hono und NestJS brauchen je eine Zeile: die Koa-Middleware zuerst, die von Hono vor den Routen. Sie melden Fehler mit einem Status ab 500. Anfragen erscheinen dann auf der Seite Pulse nach Route, etwa GET /users/:id, statt einer Zeile pro URL.

js
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);
Fastify
await app.register(Blipit.fastifyPlugin());
Koa
app.use(Blipit.koaMiddleware());
Hono
app.use(Blipit.honoMiddleware());
NestJS
app.useGlobalInterceptors(Blipit.nestInterceptor());

7Serverless: AWS Lambda und Vercel

Serverless-Hosts pausieren die Funktion, sobald sie antwortet, und Lambda startet den HTTP-Server von Node nicht. Umschließen Sie deshalb den Handler. wrapHandler erfasst die Anfrage (API-Gateway-, Function-URL- und Load-Balancer-Ereignisse nach Methode und Route, andere Ereignisse nach Funktionsname), meldet Fehler und sendet alles, bevor der Handler zurückkehrt; er wartet nur, wenn es etwas zu senden gibt, höchstens 2 Sekunden. traceRequest macht dasselbe für jeden Handler, der einen Request erhält. Auf Vercel gehen die Daten nach der Antwort über waitUntil hinaus, nichts wird verzögert. In Next.js nutzen Sie withBlipit (siehe Next.js-Anleitung).

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

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

8Manuelles Erfassen, Logs und Anmeldeversuche

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

9Abhängigkeiten und Serverzustand

Ab 0.2 erfasst das SDK auch deine Datenbank- und externen Aufrufe sowie CPU, Speicher und Event-Loop deines Servers. Siehe die Anleitungen Abhängigkeiten und Serverzustand; gesteuert wird es mit tracesSampleRate, tracing: false und metrics: false.

10Prüfen, ob es funktioniert

Öffnen Sie Issues in app.blipit.io. Das erste Event erscheint innerhalb weniger Sekunden, gruppiert zu einem Issue, und die verantwortlichen Personen erhalten eine E-Mail.

js
Blipit.captureMessage("Hello from Node");

Vollständige Node.js-Anleitung öffnen

2Schritte für Python

Bei Blipit angemeldet? Öffnen Sie Ihre Schlüsselseite: Dort stehen diese Schritte mit den Schlüsseln Ihres Projekts bereits ausgefüllt, fertig zum Kopieren.

Meine Schlüssel zeigen

Installation pip install blipit

1Installation

sh
pip install blipit

2Beim Start initialisieren

Bei Django ganz oben in settings.py. Bei Flask oder FastAPI, bevor die App erstellt wird. Der Schlüssel steht auf der Schlüssel-Seite des Projekts. Mit einem leeren Schlüssel schreibt init eine Warnung ins Log und gibt False zurück, statt eine Exception auszulösen, sodass ein fehlender Schlüssel den Start der App nie verhindert.

python
import blipit

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

3Schlüssel abrufen

Melden Sie sich bei app.blipit.io an und öffnen Sie API-Schlüssel in der Seitenleiste, dann Ihr Projekt. Jedes Projekt hat zwei Schlüssel. Der öffentliche Schlüssel beginnt mit blipit_pk_: Er gehört in Browser- und App-Code, kann nur Events senden und darf von jedem gesehen werden. Der geheime Schlüssel beginnt mit blipit_sk_: Er bleibt auf Ihrem Server oder in Odoo, nie in einem Browser, weil er auch Issues lesen und ändern kann. Der geheime Schlüssel wird nur einmal angezeigt, direkt nach der Erstellung, kopieren Sie ihn also dann; geht er verloren, klicken Sie auf Neuen geheimen Schlüssel erstellen, und der alte funktioniert sofort nicht mehr. Manche SDKs brauchen zusätzlich die Projekt-ID, die auf derselben Seite steht.

API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.

4Den Schlüssel in der Umgebung ablegen

Dieses SDK sendet mit dem öffentlichen Schlüssel von der Seite API-Schlüssel des Projekts. Bewahren Sie ihn in einer Umgebungsvariable auf: lokal in einer .env-Datei, die Ihr Framework oder python-dotenv lädt, in der Produktion in den Einstellungen Ihres Hosters. Verwenden Sie den geheimen Schlüssel nur, wenn Sie Anmeldeversuche senden.

.env
BLIPIT_KEY=blipit_pk_your_public_key
python
import os
import blipit

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

5Schlüssel aus Git heraushalten

Bewahren Sie Schlüssel in Umgebungsvariablen oder den Secret-Einstellungen Ihres Hosters auf, nie in Code, den Sie committen, und tragen Sie Ihre .env-Dateien in .gitignore ein. Ein öffentlicher Schlüssel in einer Webseite ist normal. Landet ein geheimer Schlüssel je in Git, auf einer öffentlichen Seite, in einem Screenshot oder einem Chat, öffnen Sie API-Schlüssel, klicken Sie auf Neuen geheimen Schlüssel erstellen und fügen Sie den neuen Schlüssel überall ein, wo der alte verwendet wurde: Der alte Schlüssel funktioniert sofort nicht mehr.

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

6Manuelles Erfassen und Anmeldeversuche

Anmeldeversuche brauchen den geheimen Schlüssel: Initialisieren Sie auf dem Server mit dem geheimen statt dem öffentlichen Schlüssel, sonst lehnt die Annahme sie mit 403 security_needs_secret_key ab. Scale-Tarif.

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

7Prüfen, ob es funktioniert

Öffnen Sie Issues in app.blipit.io. Das erste Event erscheint innerhalb weniger Sekunden, gruppiert zu einem Issue, und die verantwortlichen Personen erhalten eine E-Mail.

python
blipit.capture_message("Hello from Python")

Vollständige Python-Anleitung öffnen

2Schritte für PHP und Laravel

Bei Blipit angemeldet? Öffnen Sie Ihre Schlüsselseite: Dort stehen diese Schritte mit den Schlüsseln Ihres Projekts bereits ausgefüllt, fertig zum Kopieren.

Meine Schlüssel zeigen

Installation composer require blipit/blipit

1Installation

sh
composer require blipit/blipit

2Beim Start initialisieren

Reines PHP: ganz oben in Ihrem Front Controller, bevor eine Anfrage verarbeitet wird. Laravel startet Blipit aus seiner Konfiguration, wie im nächsten Schritt. Der Schlüssel steht auf der Schlüssel-Seite des Projekts. Mit einem leeren Schlüssel schreibt init eine Warnung ins Fehlerlog und gibt false zurück, statt eine Exception zu werfen.

php
use Blipit\Blipit;

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

3Schlüssel abrufen

Melden Sie sich bei app.blipit.io an und öffnen Sie API-Schlüssel in der Seitenleiste, dann Ihr Projekt. Jedes Projekt hat zwei Schlüssel. Der öffentliche Schlüssel beginnt mit blipit_pk_: Er gehört in Browser- und App-Code, kann nur Events senden und darf von jedem gesehen werden. Der geheime Schlüssel beginnt mit blipit_sk_: Er bleibt auf Ihrem Server oder in Odoo, nie in einem Browser, weil er auch Issues lesen und ändern kann. Der geheime Schlüssel wird nur einmal angezeigt, direkt nach der Erstellung, kopieren Sie ihn also dann; geht er verloren, klicken Sie auf Neuen geheimen Schlüssel erstellen, und der alte funktioniert sofort nicht mehr. Manche SDKs brauchen zusätzlich die Projekt-ID, die auf derselben Seite steht.

API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.

4Den Schlüssel in der Umgebung ablegen

Dieses SDK sendet mit dem öffentlichen Schlüssel. Laravel: Fügen Sie ihn in .env und config/services.php ein; der Blipit-Service-Provider wird von selbst erkannt und startet Blipit aus dieser Konfiguration, mehr ist nicht nötig. Lesen Sie Werte über config, denn env() liefert im App-Code nichts mehr, sobald die Konfiguration gecacht ist. Reines PHP: Lesen Sie den Schlüssel mit getenv() aus der Umgebung des Servers.

.env
BLIPIT_KEY=blipit_pk_your_public_key
config/services.php
'blipit' => [
    'key' => env('BLIPIT_KEY'),
    'environment' => env('APP_ENV'),
    'release' => env('GIT_SHA'),
],

5Schlüssel aus Git heraushalten

Bewahren Sie Schlüssel in Umgebungsvariablen oder den Secret-Einstellungen Ihres Hosters auf, nie in Code, den Sie committen, und tragen Sie Ihre .env-Dateien in .gitignore ein. Ein öffentlicher Schlüssel in einer Webseite ist normal. Landet ein geheimer Schlüssel je in Git, auf einer öffentlichen Seite, in einem Screenshot oder einem Chat, öffnen Sie API-Schlüssel, klicken Sie auf Neuen geheimen Schlüssel erstellen und fügen Sie den neuen Schlüssel überall ein, wo der alte verwendet wurde: Der alte Schlüssel funktioniert sofort nicht mehr.

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

6Laravel und Symfony

Laravel: Jede Exception, die sein Handler meldet, erreicht Blipit, sodass 404-Fehler und Validierungsfehler draußen bleiben. Abfragen, Logzeilen und HTTP-Client-Aufrufe werden zu Breadcrumbs, und Jobs in der Warteschlange werden getraced. Eine Zeile Blipit::captureException, die Sie schon in bootstrap/app.php haben, kann bleiben: Dieselbe Exception wird nie zweimal gesendet. Symfony: Registrieren Sie den Listener in config/services.yaml und rufen Sie Blipit::init früh in public/index.php und bin/console auf.

config/services.yaml
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 }

7Manuelles Erfassen und Anmeldeversuche

Anmeldeversuche brauchen den geheimen Schlüssel: Initialisieren Sie auf dem Server mit dem geheimen statt dem öffentlichen Schlüssel, sonst lehnt die Annahme sie mit 403 security_needs_secret_key ab. Scale-Tarif.

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

8Prüfen, ob es funktioniert

Öffnen Sie Issues in app.blipit.io. Das erste Event erscheint innerhalb weniger Sekunden, gruppiert zu einem Issue, und die verantwortlichen Personen erhalten eine E-Mail.

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

Vollständige PHP und Laravel-Anleitung öffnen

2Schritte für Ruby und Rails

Bei Blipit angemeldet? Öffnen Sie Ihre Schlüsselseite: Dort stehen diese Schritte mit den Schlüsseln Ihres Projekts bereits ausgefüllt, fertig zum Kopieren.

Meine Schlüssel zeigen

Installation gem install blipit

1Gemfile

ruby
gem "blipit"

2Beim Start initialisieren

Rails: config/initializers/blipit.rb; sonst ist nichts zu installieren, denn Blipit fügt seine Rack-Middleware sowie die Meldungen für Active Job und Rails.error von selbst hinzu. Rack- und Sinatra-Apps ergänzen use Blipit::Rack. Skripte: bevor Ihr Code läuft. Der Schlüssel steht auf der Schlüssel-Seite des Projekts. Mit einem leeren Schlüssel gibt init eine Warnung aus und liefert false zurück, statt eine Exception auszulösen.

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

3Schlüssel abrufen

Melden Sie sich bei app.blipit.io an und öffnen Sie API-Schlüssel in der Seitenleiste, dann Ihr Projekt. Jedes Projekt hat zwei Schlüssel. Der öffentliche Schlüssel beginnt mit blipit_pk_: Er gehört in Browser- und App-Code, kann nur Events senden und darf von jedem gesehen werden. Der geheime Schlüssel beginnt mit blipit_sk_: Er bleibt auf Ihrem Server oder in Odoo, nie in einem Browser, weil er auch Issues lesen und ändern kann. Der geheime Schlüssel wird nur einmal angezeigt, direkt nach der Erstellung, kopieren Sie ihn also dann; geht er verloren, klicken Sie auf Neuen geheimen Schlüssel erstellen, und der alte funktioniert sofort nicht mehr. Manche SDKs brauchen zusätzlich die Projekt-ID, die auf derselben Seite steht.

API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.

4Den Schlüssel in den Rails Credentials ablegen

Dieses SDK sendet mit dem öffentlichen Schlüssel. Bewahren Sie ihn in Rails in den verschlüsselten Credentials auf und lesen Sie ihn im Initializer; anderswo verwenden Sie eine Umgebungsvariable.

sh
bin/rails credentials:edit
credentials
blipit:
  key: blipit_pk_your_public_key
config/initializers/blipit.rb
Blipit.init(
  key: Rails.application.credentials.dig(:blipit, :key),
  environment: Rails.env,
)

5Schlüssel aus Git heraushalten

Bewahren Sie Schlüssel in Umgebungsvariablen oder den Secret-Einstellungen Ihres Hosters auf, nie in Code, den Sie committen, und tragen Sie Ihre .env-Dateien in .gitignore ein. Ein öffentlicher Schlüssel in einer Webseite ist normal. Landet ein geheimer Schlüssel je in Git, auf einer öffentlichen Seite, in einem Screenshot oder einem Chat, öffnen Sie API-Schlüssel, klicken Sie auf Neuen geheimen Schlüssel erstellen und fügen Sie den neuen Schlüssel überall ein, wo der alte verwendet wurde: Der alte Schlüssel funktioniert sofort nicht mehr.

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

6Manuelles Erfassen und Anmeldeversuche

Anmeldeversuche brauchen den geheimen Schlüssel: Initialisieren Sie auf dem Server mit dem geheimen statt dem öffentlichen Schlüssel, sonst lehnt die Annahme sie mit 403 security_needs_secret_key ab. Scale-Tarif.

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

7Prüfen, ob es funktioniert

Öffnen Sie Issues in app.blipit.io. Das erste Event erscheint innerhalb weniger Sekunden, gruppiert zu einem Issue, und die verantwortlichen Personen erhalten eine E-Mail.

ruby
Blipit.capture_message("Hello from Rails")

Vollständige Ruby und Rails-Anleitung öffnen

2Schritte für Go

Bei Blipit angemeldet? Öffnen Sie Ihre Schlüsselseite: Dort stehen diese Schritte mit den Schlüsseln Ihres Projekts bereits ausgefüllt, fertig zum Kopieren.

Meine Schlüssel zeigen

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

1Installation

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

2In main initialisieren

Init löst nie eine Panic aus: Mit einem leeren Schlüssel oder einer leeren Projekt-ID gibt es einen Fehler zurück und Blipit bleibt aus. Protokollieren Sie den Fehler also, statt das Programm zu beenden.

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

3Schlüssel abrufen

Melden Sie sich bei app.blipit.io an und öffnen Sie API-Schlüssel in der Seitenleiste, dann Ihr Projekt. Jedes Projekt hat zwei Schlüssel. Der öffentliche Schlüssel beginnt mit blipit_pk_: Er gehört in Browser- und App-Code, kann nur Events senden und darf von jedem gesehen werden. Der geheime Schlüssel beginnt mit blipit_sk_: Er bleibt auf Ihrem Server oder in Odoo, nie in einem Browser, weil er auch Issues lesen und ändern kann. Der geheime Schlüssel wird nur einmal angezeigt, direkt nach der Erstellung, kopieren Sie ihn also dann; geht er verloren, klicken Sie auf Neuen geheimen Schlüssel erstellen, und der alte funktioniert sofort nicht mehr. Manche SDKs brauchen zusätzlich die Projekt-ID, die auf derselben Seite steht.

API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.

4Den Schlüssel in der Umgebung ablegen

Dieses SDK sendet mit dem öffentlichen Schlüssel und der Projekt-ID. Lesen Sie sie aus Umgebungsvariablen, die Ihr Hoster, eine systemd-Unit oder docker run -e setzt.

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

5Schlüssel aus Git heraushalten

Bewahren Sie Schlüssel in Umgebungsvariablen oder den Secret-Einstellungen Ihres Hosters auf, nie in Code, den Sie committen, und tragen Sie Ihre .env-Dateien in .gitignore ein. Ein öffentlicher Schlüssel in einer Webseite ist normal. Landet ein geheimer Schlüssel je in Git, auf einer öffentlichen Seite, in einem Screenshot oder einem Chat, öffnen Sie API-Schlüssel, klicken Sie auf Neuen geheimen Schlüssel erstellen und fügen Sie den neuen Schlüssel überall ein, wo der alte verwendet wurde: Der alte Schlüssel funktioniert sofort nicht mehr.

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

6Manuelles Erfassen und Anmeldeversuche

Anmeldeversuche brauchen den geheimen Schlüssel: Initialisieren Sie auf dem Server mit dem geheimen statt dem öffentlichen Schlüssel, sonst lehnt die Annahme sie mit 403 security_needs_secret_key ab. Scale-Tarif.

go
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 und net/http

defer blipit.Recover() am Anfang von main oder einer beliebigen Goroutine meldet eine Panic mit ihrem Stack, sendet ausstehende Events und löst die Panic erneut aus. Umschließen Sie den Handler, den Sie bereitstellen, mit blipit.Handler, um Panics mit dem Request zu melden und jeden Request auf Pulse zu messen, benannt nach seinem ServeMux-Muster. Gin, Echo und Fiber verwenden StartRequest, SetRoute und End, wie in der README des Pakets gezeigt.

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

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

8Prüfen, ob es funktioniert

Öffnen Sie Issues in app.blipit.io. Das erste Event erscheint innerhalb weniger Sekunden, gruppiert zu einem Issue, und die verantwortlichen Personen erhalten eine E-Mail.

go
blipit.CaptureMessage("Hello from Go")

Vollständige Go-Anleitung öffnen

2Schritte für Java und Kotlin

Bei Blipit angemeldet? Öffnen Sie Ihre Schlüsselseite: Dort stehen diese Schritte mit den Schlüsseln Ihres Projekts bereits ausgefüllt, fertig zum Kopieren.

Meine Schlüssel zeigen

Installation com.github.blipit-io:blipit-java

1Repository und Abhängigkeit hinzufügen

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

dependencies {
    implementation("com.github.blipit-io:blipit-java:v0.2.1")
}
pom.xml
<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>

2Beim Start initialisieren

Spring Boot: ganz oben in main, vor SpringApplication.run, oder in einer @PostConstruct-Methode einer @Configuration-Klasse. Nicht abgefangene Exceptions in jedem Thread werden in eine Warteschlange auf der Festplatte geschrieben, bevor die App stoppt, und dann gesendet, sodass ein Absturz auch ohne Netzwerk gemeldet wird; was übrig bleibt, geht beim nächsten Start raus.

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

3Schlüssel abrufen

Melden Sie sich bei app.blipit.io an und öffnen Sie API-Schlüssel in der Seitenleiste, dann Ihr Projekt. Jedes Projekt hat zwei Schlüssel. Der öffentliche Schlüssel beginnt mit blipit_pk_: Er gehört in Browser- und App-Code, kann nur Events senden und darf von jedem gesehen werden. Der geheime Schlüssel beginnt mit blipit_sk_: Er bleibt auf Ihrem Server oder in Odoo, nie in einem Browser, weil er auch Issues lesen und ändern kann. Der geheime Schlüssel wird nur einmal angezeigt, direkt nach der Erstellung, kopieren Sie ihn also dann; geht er verloren, klicken Sie auf Neuen geheimen Schlüssel erstellen, und der alte funktioniert sofort nicht mehr. Manche SDKs brauchen zusätzlich die Projekt-ID, die auf derselben Seite steht.

API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.

4Den Schlüssel in der Umgebung ablegen

Dieses SDK sendet mit dem öffentlichen Schlüssel und der Projekt-ID. Lesen Sie sie aus Umgebungsvariablen oder in Spring Boot aus application.properties, das aus der Umgebung befüllt wird.

application.properties
blipit.key=${BLIPIT_KEY}
blipit.project=${BLIPIT_PROJECT}
java
Blipit.init(BlipitOptions.builder()
    .key(System.getenv("BLIPIT_KEY"))
    .project(Long.parseLong(System.getenv("BLIPIT_PROJECT")))
    .build());

5Schlüssel aus Git heraushalten

Bewahren Sie Schlüssel in Umgebungsvariablen oder den Secret-Einstellungen Ihres Hosters auf, nie in Code, den Sie committen, und tragen Sie Ihre .env-Dateien in .gitignore ein. Ein öffentlicher Schlüssel in einer Webseite ist normal. Landet ein geheimer Schlüssel je in Git, auf einer öffentlichen Seite, in einem Screenshot oder einem Chat, öffnen Sie API-Schlüssel, klicken Sie auf Neuen geheimen Schlüssel erstellen und fügen Sie den neuen Schlüssel überall ein, wo der alte verwendet wurde: Der alte Schlüssel funktioniert sofort nicht mehr.

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

6Manuelles Erfassen und Anmeldeversuche

Anmeldeversuche brauchen den geheimen Schlüssel: Initialisieren Sie auf dem Server mit dem geheimen statt dem öffentlichen Schlüssel, sonst lehnt die Annahme sie mit 403 security_needs_secret_key ab. Scale-Tarif.

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

7Prüfen, ob es funktioniert

Öffnen Sie Issues in app.blipit.io. Das erste Event erscheint innerhalb weniger Sekunden, gruppiert zu einem Issue, und die verantwortlichen Personen erhalten eine E-Mail.

java
Blipit.captureMessage("Hello from Java");

Vollständige Java und Kotlin-Anleitung öffnen

2Schritte für .NET

Bei Blipit angemeldet? Öffnen Sie Ihre Schlüsselseite: Dort stehen diese Schritte mit den Schlüsseln Ihres Projekts bereits ausgefüllt, fertig zum Kopieren.

Meine Schlüssel zeigen

Installation dotnet add package Blipit

1Installation

sh
dotnet add package Blipit

2Beim Start initialisieren

Halten Sie das zurückgegebene Handle für die Lebensdauer des Prozesses am Leben. Beide Werte finden Sie auf der Schlüssel-Seite des Projekts.

Program.cs
using Blipit;

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

3Schlüssel abrufen

Melden Sie sich bei app.blipit.io an und öffnen Sie API-Schlüssel in der Seitenleiste, dann Ihr Projekt. Jedes Projekt hat zwei Schlüssel. Der öffentliche Schlüssel beginnt mit blipit_pk_: Er gehört in Browser- und App-Code, kann nur Events senden und darf von jedem gesehen werden. Der geheime Schlüssel beginnt mit blipit_sk_: Er bleibt auf Ihrem Server oder in Odoo, nie in einem Browser, weil er auch Issues lesen und ändern kann. Der geheime Schlüssel wird nur einmal angezeigt, direkt nach der Erstellung, kopieren Sie ihn also dann; geht er verloren, klicken Sie auf Neuen geheimen Schlüssel erstellen, und der alte funktioniert sofort nicht mehr. Manche SDKs brauchen zusätzlich die Projekt-ID, die auf derselben Seite steht.

API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.

4Den Schlüssel in der Konfiguration ablegen

Dieses SDK sendet mit dem öffentlichen Schlüssel und der Projekt-ID. Bewahren Sie sie während der Entwicklung in User Secrets und in der Produktion in Umgebungsvariablen auf (Blipit__Key und Blipit__Project) und lesen Sie sie dann aus der Konfiguration.

sh
dotnet user-secrets set "Blipit:Key" "blipit_pk_your_public_key"
dotnet user-secrets set "Blipit:Project" "12"
Program.cs
using var blipit = Blipit.Blipit.Init(new BlipitOptions
{
    Key = builder.Configuration["Blipit:Key"],
    Project = builder.Configuration["Blipit:Project"],
});

5Schlüssel aus Git heraushalten

Bewahren Sie Schlüssel in Umgebungsvariablen oder den Secret-Einstellungen Ihres Hosters auf, nie in Code, den Sie committen, und tragen Sie Ihre .env-Dateien in .gitignore ein. Ein öffentlicher Schlüssel in einer Webseite ist normal. Landet ein geheimer Schlüssel je in Git, auf einer öffentlichen Seite, in einem Screenshot oder einem Chat, öffnen Sie API-Schlüssel, klicken Sie auf Neuen geheimen Schlüssel erstellen und fügen Sie den neuen Schlüssel überall ein, wo der alte verwendet wurde: Der alte Schlüssel funktioniert sofort nicht mehr.

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

6ASP.NET Core und Logging

Mehr ist nicht nötig: Rufen Sie Init ganz oben in Program.cs auf. Exceptions aus Endpoints, Controllern und Middleware werden mit dem Request gemeldet, auch wenn UseExceptionHandler sie behandelt, und mit gesetzter TracesSampleRate wird jeder erfasste Request auf Pulse nach seiner Route gemessen. BlipitLoggerProvider macht aus Information und höher Breadcrumbs und aus Error und höher Events.

Program.cs
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());

7Manuelles Erfassen und Anmeldeversuche

Anmeldeversuche brauchen den geheimen Schlüssel: Initialisieren Sie auf dem Server mit dem geheimen statt dem öffentlichen Schlüssel, sonst lehnt die Annahme sie mit 403 security_needs_secret_key ab. Scale-Tarif.

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

8Prüfen, ob es funktioniert

Öffnen Sie Issues in app.blipit.io. Das erste Event erscheint innerhalb weniger Sekunden, gruppiert zu einem Issue, und die verantwortlichen Personen erhalten eine E-Mail.

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

Vollständige .NET-Anleitung öffnen

2Schritte für iOS, Android, Flutter, React Native

Bei Blipit angemeldet? Öffnen Sie Ihre Schlüsselseite: Dort stehen diese Schritte mit den Schlüsseln Ihres Projekts bereits ausgefüllt, fertig zum Kopieren.

Meine Schlüssel zeigen

Installation one package per platform

1Schlüssel abrufen

Melden Sie sich bei app.blipit.io an und öffnen Sie API-Schlüssel in der Seitenleiste, dann Ihr Projekt. Jedes Projekt hat zwei Schlüssel. Der öffentliche Schlüssel beginnt mit blipit_pk_: Er gehört in Browser- und App-Code, kann nur Events senden und darf von jedem gesehen werden. Der geheime Schlüssel beginnt mit blipit_sk_: Er bleibt auf Ihrem Server oder in Odoo, nie in einem Browser, weil er auch Issues lesen und ändern kann. Der geheime Schlüssel wird nur einmal angezeigt, direkt nach der Erstellung, kopieren Sie ihn also dann; geht er verloren, klicken Sie auf Neuen geheimen Schlüssel erstellen, und der alte funktioniert sofort nicht mehr. Manche SDKs brauchen zusätzlich die Projekt-ID, die auf derselben Seite steht.

API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.

2React Native

Das Paket bindet ein kleines natives Modul ein, das Blipits eigene Android- und iOS-SDKs für native Abstürze startet; seine Gradle-Datei fügt das JitPack-Repository von selbst hinzu. Umschließen Sie die Root-Komponente, damit auch Render-Fehler gemeldet werden.

sh
npm install @blipit/react-native
npx pod-install
tsx
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

Ersetzen Sie runApp in main.dart durch Blipit.init. Das Plugin startet Blipits eigene Android- und iOS-SDKs für native Abstürze, und Fehler des Flutter-Frameworks sowie nicht abgefangene asynchrone Fehler werden von selbst gemeldet.

sh
flutter pub add blipit_flutter
main.dart
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 und macOS (Swift Package)

In Xcode: File, Add Package Dependencies, und geben Sie die Repository-URL ein; oder fügen Sie es in Package.swift hinzu und ergänzen Sie BlipitSwift in Ihrem Target. Mit CocoaPods verwenden Sie den Pod BlipitSwift. Rufen Sie dann start einmal beim Start auf. Mit einem leeren Schlüssel oder einer leeren Projekt-ID gibt start eine Warnung aus und liefert false zurück, statt die App abstürzen zu lassen.

Package.swift
.package(url: "https://github.com/blipit-io/blipit-swift", from: "0.6.0")
Podfile
pod "BlipitSwift", "~> 0.6.0"
swift
import BlipitSwift

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

5Android

Fügen Sie JitPack zu den Repositories in settings.gradle.kts hinzu, die Abhängigkeit zum App-Modul, und rufen Sie init in Application.onCreate auf.

settings.gradle.kts
dependencyResolutionManagement {
    repositories {
        google()
        mavenCentral()
        maven("https://jitpack.io")
    }
}
build.gradle.kts (app)
implementation("com.github.blipit-io:blipit-android:v0.6.0")
kotlin
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"
        }
    }
}

6Wo der Schlüssel in einer App hingehört

Apps liefern den öffentlichen Schlüssel und die Projekt-ID in der App aus, und das ist in Ordnung: Der öffentliche Schlüssel kann nur Events senden. Legen Sie den geheimen Schlüssel nie in eine App. Übergeben Sie beide zur Build-Zeit, damit sie nicht in Ihrem Repository landen.

Flutter
flutter run --dart-define=BLIPIT_KEY=blipit_pk_your_public_key --dart-define=BLIPIT_PROJECT=12
main.dart
const key = String.fromEnvironment('BLIPIT_KEY');
const project = int.fromEnvironment('BLIPIT_PROJECT');
Expo (.env)
EXPO_PUBLIC_BLIPIT_KEY=blipit_pk_your_public_key
EXPO_PUBLIC_BLIPIT_PROJECT=12
Android build.gradle.kts
buildConfigField("String", "BLIPIT_KEY", ""${project.findProperty("blipitKey")}"")
iOS xcconfig
BLIPIT_KEY = blipit_pk_your_public_key

7Fehlerberichte in Apps

Rufen Sie showReport aus Ihrem eigenen Menüpunkt auf oder schalten Sie den schwebenden Button Fehler melden ein. Der Reporter fragt zuerst, wie Sie das Problem zeigen möchten: Screenshot aufnehmen, Bildschirm aufnehmen (iOS) oder nur beschreiben. Der Screenshot öffnet sich im Vollbild, die Werkzeuge darüber und darunter, nie darauf; mit zwei Fingern oder Doppeltippen zoomen, das Problem markieren, dann Titel und Ablauf ergänzen und senden. Berichte landen unter Fehlerberichte mit den Gerätedaten. React Native braucht react-native-view-shot für Screenshots.

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

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

Blipit.showReport();
Flutter
appRunner: () => runApp(const BlipitReporter(showButton: true, child: MyApp())),

Blipit.showReport();
iOS
Blipit.showReportButton()

Blipit.showReport()
Android
Blipit.showReportButton()

Blipit.showReport()

8Vom Bildschirm mit dem Fehler melden

Ein Eintrag „Fehler melden“ in einem Menü wie Profil erfasst das Menü, nicht das Problem. Schalten Sie die Wege ein, die beim Bildschirm selbst beginnen; alle sind standardmäßig aus und brauchen keine Berechtigungsabfrage. shakeToReport öffnet das Meldeformular, wenn das Telefon geschüttelt wird. screenshotToReport fragt nach einem normalen Screenshot „Einen Fehler mit diesem Bildschirm melden?“ und hängt Blipits eigene Aufnahme an (iOS sowie Android 14 und neuer). twoFingerReport öffnet es nach etwa einer Sekunde Gedrückthalten mit zwei Fingern, ohne die Berührungen der App zu blockieren. reportAfterCrash fragt beim ersten Start nach einem Absturz, was die Person gerade getan hat, und verknüpft die Meldung mit diesem Absturz. screenPicker, standardmäßig an, lässt jemanden, der das Formular aus einem Menü öffnet, wählen, auf welchem der letzten Bildschirme der Fehler ist: Die Schnappschüsse bleiben im Speicher des Geräts, und nur der gewählte wird hochgeladen. Jetpack-Compose- und SwiftUI-Apps benennen ihre Bildschirme mit setScreen.

Android
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")
}
iOS
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") }
React Native
Blipit.init({
  key: "<public key>",
  project: <project id>,
  shakeToReport: true,
  screenshotToReport: true,
  twoFingerReport: true,
  reportAfterCrash: true,
});

<NavigationContainer ref={navigation} onReady={() => Blipit.trackNavigation(navigation)}>
Flutter
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()))),
);

9Schwebender Button nur für Tester

Öffnen Sie in app.blipit.io das Projekt und stellen Sie in den Einstellungen des Fehlermelde-Buttons „Schwebender Button in Handy-Apps“ auf Alle oder Nur Tester, mit einer Benutzer-ID oder E-Mail pro Tester. Die App sendet die Person, die sie mit setUser gesetzt hat, und Blipit antwortet nur mit Ja oder Nein, sodass die Testerliste nie in der App ausgeliefert wird. Ein Aufruf von showReportButton (showButton unter React Native und Flutter) zeigt den Button weiterhin allen.

Android
Blipit.setUser(id = user.id, email = user.email)
iOS
Blipit.setUser(id: user.id, email: user.email)
React Native
Blipit.setUser({ id: user.id, email: user.email });
Flutter
Blipit.setUser(BlipitUser(id: user.id, email: user.email));

10Eine hängende App erkennen

Manche Fehler stürzen nie ab: Der Startbildschirm dreht sich weiter oder die Anmeldung kommt nie zurück. Schalten Sie waitForReady ein und rufen Sie reportReady auf, sobald der erste nutzbare Bildschirm erscheint. Fassen Sie Abläufe wie die Anmeldung in startFlow und endFlow und markieren Sie Schritte mit flowStep. Wird einer nicht rechtzeitig fertig, öffnet Blipit ein Hängt-Issue mit dem letzten Schritt und dem Verlauf davor. Nur die Zeit auf dem Bildschirm zählt, und Blipit legt die Zeitlimits fest. Namen werden so gesendet, wie sie geschrieben sind: Verwenden Sie feste Namen, niemals E-Mail-Adressen oder andere Nutzerdaten.

Android
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")
iOS
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")
React Native
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");
Flutter
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');

11Prüfen, ob es funktioniert

Öffnen Sie Issues in app.blipit.io. Das erste Event erscheint innerhalb weniger Sekunden, gruppiert zu einem Issue, und die verantwortlichen Personen erhalten eine E-Mail.

Vollständige iOS, Android, Flutter, React Native-Anleitung öffnen

2Schritte für Odoo

Bei Blipit angemeldet? Öffnen Sie Ihre Schlüsselseite: Dort stehen diese Schritte mit den Schlüsseln Ihres Projekts bereits ausgefüllt, fertig zum Kopieren.

Meine Schlüssel zeigen

Installation Blipit Error Monitoring on the Odoo Apps store

1Modul installieren

Laden Sie es von apps.odoo.com (blipit_monitor, kostenlos) für Ihre Odoo-Version herunter und installieren Sie es wie jedes Modul: Apps, App-Liste aktualisieren, Blipit Error Monitoring installieren. Odoo Online erlaubt keine Drittanbieter-Apps; Odoo.sh und On-Premise schon.

2Schlüssel abrufen

Melden Sie sich bei app.blipit.io an und öffnen Sie API-Schlüssel in der Seitenleiste, dann Ihr Projekt. Jedes Projekt hat zwei Schlüssel. Der öffentliche Schlüssel beginnt mit blipit_pk_: Er gehört in Browser- und App-Code, kann nur Events senden und darf von jedem gesehen werden. Der geheime Schlüssel beginnt mit blipit_sk_: Er bleibt auf Ihrem Server oder in Odoo, nie in einem Browser, weil er auch Issues lesen und ändern kann. Der geheime Schlüssel wird nur einmal angezeigt, direkt nach der Erstellung, kopieren Sie ihn also dann; geht er verloren, klicken Sie auf Neuen geheimen Schlüssel erstellen, und der alte funktioniert sofort nicht mehr. Manche SDKs brauchen zusätzlich die Projekt-ID, die auf derselben Seite steht.

API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
API-Schlüssel in app.blipit.io: der öffentliche Schlüssel (blipit_pk_) für Browser-Code und der geheime Schlüssel (blipit_sk_) für Server und Odoo.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.
Ein neuer geheimer Schlüssel wird einmal angezeigt. Kopieren Sie ihn sofort: Er wird gehasht gespeichert und kann nicht erneut angezeigt werden.

3Verbinden

Einstellungen, Blipit: Fügen Sie den geheimen Schlüssel des Projekts ein, setzen Sie das Häkchen für die Zustimmung zu den Nutzungsbedingungen und der Modullizenz und klicken Sie auf Speichern. Es verbindet sich von selbst und zeigt Verbunden mit <project>. Ein öffentlicher Schlüssel oder ein bereits an eine andere Datenbank gebundener Schlüssel wird mit Begründung abgelehnt.

4Verantwortliche Personen

Wählen Sie, wer E-Mails erhält, pro Unternehmen, wenn Sie mehrere haben. Jede Person belegt einen Platz Ihres Plans; Blipit prüft die Anzahl beim Speichern.

5Fehlerberichte aus Odoo

Das Modul fügt den Button Fehler melden für Sie in Odoo ein; Sie müssen keinen Code schreiben. Wählen Sie unter Einstellungen, Blipit, Bug reports, Shown to, wer ihn sieht: Internal users, Website visitors, Both oder Nobody, und beschränken Sie interne Benutzer optional auf eine Gruppe. Berichte enthalten Modell, Datensatz und Feld, auf denen sich die Person befand, und Name und E-Mail des angemeldeten Benutzers werden vorausgefüllt. Position, Farbe, Text und Stil kommen aus app.blipit.io, Projekteinstellungen, Fehlerbericht-Widget. Jede Option finden Sie in der Anleitung zum Fehlerbericht-Button.

6Prüfen, ob es funktioniert

Öffnen Sie die Blipit-App in Odoo. Der nächste Fehler erscheint dort und im Postfach der verantwortlichen Personen. Klicken Sie auf Von Blipit aktualisieren, um sofort nachzusehen.

Vollständige Odoo-Anleitung öffnen