Brygga för Sentry, Bugsnag & Datadog RUM

Gör utvecklings- och QA-arbetet snabbare genom att koppla JavaScript-undantag i frontend direkt till visuella sessionsinspelningar i MousePlayer.

1. Problemet: stackspår visar inte användarens sammanhang

När ett ohanterat JavaScript-undantag eller en nätverkskrasch inträffar på webbplatsen ger felövervakningsverktyg som Sentry torra stackspår och webbläsarens user-agent-strängar. Utvecklarna undrar ändå: ”Vilken knapp klickade användaren på precis före kraschen?” eller ”Vilka data angavs i formuläret?”

Vår MousePlayer-brygga för felspårning löser detta automatiskt genom att lägga in visuella uppspelningslänkar direkt i felrapporterna. När ett undantag inträffar kan utvecklaren klicka på en enda länk i Sentry- eller Bugsnag-dashboarden och se en inspelning av användarens skärm fram till exakt den millisekund då kraschen inträffade.

Integration utan extra belastning: Bryggan körs tyst som bakgrundsövervakare i mp.js. Den upptäcker ditt felspårnings-SDK automatiskt utan mätbar extra belastning eller påverkan på Core Web Vitals.

2. Aktivering & val av leverantör

Du kan aktivera felspårningsbryggan via dashboarden eller programmatiskt via SDK-konfigurationsobjektet.

Metod A: aktivering i dashboarden (utan kod)

  1. Logga in i din MousePlayer-arbetsyta och öppna Dina webbplatser.
  2. Klicka på knappen Inställningar / Integrationer bredvid webbplatsen.
  3. Ställ i integrationsfönstret Brygga för Sentry, Bugsnag & Datadog RUM på ON.
  4. Välj leverantör (sentry, bugsnag eller datadog) och klicka på Spara ändringar.

Metod B: manuell skriptkonfiguration

Om du föredrar att hårdkoda konfigurationen anger du error_bridge_active: true i ditt window.mp_config-objekt:

<!-- MousePlayer SDK with Error Tracking Bridge Enabled --> <script> window.mp_config = { channel: 'YOUR_CHANNEL_ID', error_bridge_active: true, error_provider: 'sentry' // 'sentry', 'bugsnag', or 'datadog' }; </script>

3. Teknisk tabell över SDK-anrop

Beroende på vald leverantör kör MousePlayer automatiskt de officiella JavaScript-SDK-metoderna för taggning:

Leverantör JavaScript-metod som körs Infogad metadatanyckel
Sentry window.Sentry.setTag(...) mouseplayer_session_url
Bugsnag window.Bugsnag.addMetadata('MousePlayer', { ... }) session_url
Datadog RUM window.DD_RUM.setGlobalContextProperty(...) mouseplayer_session_url

4. Här hittar du uppspelningar i felrapporterna

När funktionen är aktiv visas uppspelningslänkar direkt i dina felövervakningsverktyg när en frontend-krasch registreras.

Ärendedetaljer i Sentry

Öppna valfritt ärende i ditt Sentry-projekt och scrolla till avsnittet Taggar. Där finns en tagg med namnet mouseplayer_session_url. Du kan också filtrera Sentry-ärenden med sökfältet: mouseplayer_session_url:*.

Metadataflikar i Bugsnag

Titta på navigeringsflikarna längst ned i Bugsnags felrapport. En ny egen flik med namnet MousePlayer visas med den klickbara länken session_url.

Felutforskaren i Datadog RUM

Gå i Datadog RUM till valfri registrerad felsession och granska JSON-trädet Global kontext / Attribut. URL:en är indexerad under @mouseplayer_session_url.

Alla nämnda varumärken tillhör respektive ägare. MousePlayer har ingen affärsrelation med leverantörerna.