Bridge ng Sentry, Bugsnag & Datadog RUM

Pabilisin ang trabaho ng engineering at QA sa pag-uugnay ng mga front-end na JavaScript exception nang direkta sa mga video recording ng session ng MousePlayer.

1. Ang Problema: Walang Konteksto ng User sa Stacktrace

Kapag may hindi nahawakang JavaScript exception o network crash sa inyong website, tuyong stacktrace at user-agent string ng browser ang ibinibigay ng mga error monitoring tool gaya ng Sentry. Ngunit may tanong pa rin ang mga engineer: “Anong button ang na-click ng user bago mismo ang crash?” o “Anong datos ang inilagay sa form?”

Awtomatikong nilulutas ito ng MousePlayer Error Tracking Bridge sa paglalagay ng mga URL ng biswal na replay nang direkta sa inyong mga error report. Kapag may exception, isang link lamang sa dashboard ng Sentry o Bugsnag ang kailangang i-click ng engineer upang mapanood ang video recording ng screen ng user hanggang sa eksaktong millisecond ng crash.

Integration na Walang Karagdagang Bigat: Tahimik na tumatakbo ang bridge bilang background watcher sa loob ng mp.js. Awtomatiko nitong nakikita ang inyong error tracking SDK nang walang masusukat na dagdag na bigat o epekto sa Core Web Vitals.

2. Pag-activate & Pagtutugma ng Provider

Maaari ninyong paganahin ang error tracking bridge sa dashboard o sa code gamit ang aming SDK configuration object.

Paraan A: Pag-activate sa Dashboard (Walang Code)

  1. Mag-login sa inyong workspace ng MousePlayer at buksan ang Inyong mga Site.
  2. I-click ang button na Mga Setting / Integration sa tabi ng nais ninyong website.
  3. Sa window ng Mga Integration, itakda ang Bridge ng Sentry, Bugsnag & Datadog RUM sa ON.
  4. Piliin ang inyong provider (sentry, bugsnag, o datadog) at i-click ang I-save ang mga Pagbabago.

Paraan B: Manu-manong Configuration ng Script

Kung mas gusto ninyong ilagay sa code ang configuration, ipasa ang error_bridge_active: true sa loob ng inyong object na window.mp_config:

<!-- 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. Teknikal na Talahanayan ng Pagtakbo ng SDK

Ayon sa napili ninyong provider, awtomatikong pinapatakbo ng MousePlayer ang mga opisyal na paraan ng pag-tag ng JavaScript SDK:

Provider Pinapatakbong Paraan ng JavaScript Idinaragdag na Metadata Key
Sentry window.Sentry.setTag(...) mouseplayer_session_url
Bugsnag window.Bugsnag.addMetadata('MousePlayer', { ... }) session_url
Datadog RUM window.DD_RUM.setGlobalContextProperty(...) mouseplayer_session_url

4. Saan Makikita ang mga Replay sa Inyong Error Report

Kapag aktibo, agad na lumilitaw ang mga URL ng replay sa inyong error monitoring dashboard tuwing may naitalang front-end crash.

Mga Detalye ng Isyu sa Sentry

Buksan ang anumang isyu sa inyong Sentry project at mag-scroll sa seksiyong Mga Tag. Makikita ang tag na pinangalanang mouseplayer_session_url. Maaari rin ninyong i-filter ang mga isyu sa Sentry gamit ang query search bar: mouseplayer_session_url:*.

Mga Tab ng Metadata sa Bugsnag

Sa inyong error report ng Bugsnag, tingnan ang mga navigation tab sa ibaba. Lilitaw ang bagong custom na tab na MousePlayer, na may naki-click na hyperlink na session_url.

Datadog RUM Error Explorer

Sa Datadog RUM, pumunta sa anumang naitalang error session at suriin ang JSON tree na Global Context / Mga Attribute. Naka-index ang URL sa ilalim ng @mouseplayer_session_url.

Ang lahat ng trademark dito ay pag-aari ng kani-kanilang may-ari. Walang ugnayang pangnegosyo ang MousePlayer sa mga provider na ito.