Sentry-, Bugsnag- & Datadog-RUM-Bridge

Beschleunigen Sie Ihre Entwicklungs- und QA-Prozesse, indem Sie JavaScript-Ausnahmen direkt mit den MousePlayer-Sitzungsaufzeichnungen verknüpfen.

1. Das Problem: Stacktraces zeigen keinen Nutzerkontext

Wenn ein unbehandelter JavaScript-Fehler oder ein Netzwerkabsturz auf Ihrer Website auftritt, liefern Tools wie Sentry trockene Stacktraces und User-Agent-Zeichenketten. Entwickler stellen sich jedoch oft die Frage: "Auf welche Schaltfläche hat der Benutzer unmittelbar vor dem Absturz geklickt?" oder "Welche Daten wurden in das Formular eingegeben?"

Die MousePlayer Error Tracking Bridge löst dieses Problem automatisch, indem sie visuelle Replay-URLs direkt in Ihre Fehlerberichte einbettet. Bei einer Ausnahme können Entwickler auf einen Link im Sentry- oder Bugsnag-Dashboard klicken und eine Videoaufzeichnung des Bildschirms bis zur genauen Millisekunde des Absturzes ansehen.

Null-Overhead-Integration: Die Bridge läuft im Hintergrund im Skript mp.js. Sie erkennt Ihr Fehlerüberwachungs-SDK automatisch, ohne die Ladezeit oder Core Web Vitals zu beeinträchtigen.

2. Aktivierung & Provider-Auswahl

Sie können die Error-Tracking-Bridge über das Dashboard-Interface oder programmgesteuert über unser SDK-Konfigurationsobjekt aktivieren.

Methode A: Aktivierung über das Dashboard (No-Code)

  1. Loggen Sie sich in Ihren MousePlayer-Arbeitsbereich ein und öffnen Sie Ihre Projekte (Your Properties).
  2. Klicken Sie auf die Schaltfläche Einstellungen / Integrationen (Settings) neben Ihrer Domain.
  3. Aktivieren Sie im Integrationsfenster die Option Sentry, Bugsnag & Datadog RUM Bridge.
  4. Wählen Sie Ihren Anbieter (sentry, bugsnag oder datadog) und klicken Sie auf Änderungen speichern.

Methode B: Manuelle Skriptkonfiguration

Wenn Sie die Konfiguration im Code bevorzugen, fügen Sie error_bridge_active: true in Ihr window.mp_config-Objekt ein:

<!-- MousePlayer SDK mit aktivierter Error-Tracking-Bridge --> <script> window.mp_config = { channel: 'IHRE_CHANNEL_ID', error_bridge_active: true, error_provider: 'sentry' // 'sentry', 'bugsnag', oder 'datadog' }; </script>

3. Übersicht der ausgeführten API-Methoden

Abhängig von Ihrem gewählten Anbieter führt MousePlayer automatisch die offiziellen JavaScript-SDK-Methoden aus:

Anbieter Ausgeführte JavaScript-Methode Injizierter Metadaten-Schlüssel
Sentry window.Sentry.setTag(...) mouseplayer_session_url
Bugsnag window.Bugsnag.addMetadata('MousePlayer', { ... }) session_url
Datadog RUM window.DD_RUM.setGlobalContextProperty(...) mouseplayer_session_url

4. Wo finden Sie die Replay-URLs im Fehlerbericht?

Sobald die Bridge aktiv ist, erscheinen Replay-URLs sofort in Ihren Fehler-Dashboards, wenn ein Frontend-Absturz registriert wird.

Sentry Issue Details

Öffnen Sie einen beliebigen Fehler in Ihrem Sentry-Projekt und scrollen Sie zum Abschnitt Tags. Dort sehen Sie einen Tag namens mouseplayer_session_url. Sie können in der Sentry-Suchleiste auch filtern mit: mouseplayer_session_url:*.

Bugsnag-Metadaten-Tabs

Prüfen Sie im Bugsnag-Fehlerbericht die unteren Navigations-Tabs. Ein neuer benutzerdefinierter Tab namens MousePlayer erscheint mit dem anklickbaren Link session_url.

Datadog RUM Error Explorer

Navigieren Sie in Datadog RUM zu einer betroffenen Sitzung und prüfen Sie den JSON-Baum unter Global Context / Attributes. Die URL ist unter @mouseplayer_session_url indexiert.

Alle genannten Marken gehören ihren jeweiligen Inhabern. MousePlayer steht in keiner geschäftlichen Verbindung zu diesen Anbietern.