Pont Sentry, Bugsnag & Datadog RUM

Agilitzi els fluxos d’enginyeria i QA vinculant les excepcions JavaScript del frontend directament a les gravacions de vídeo de sessions de MousePlayer.

1. El problema: les traces de pila no mostren el context de l’usuari

Quan es produeix una excepció JavaScript no gestionada o una fallada de xarxa al seu lloc web, les eines de seguiment d’errors com Sentry proporcionen traces de pila escarides i cadenes d’agent d’usuari del navegador. Però als enginyers els queda el dubte: «Quin botó ha clicat l’usuari just abans de la fallada?» o «Quines dades s’han introduït al formulari?»

El pont de seguiment d’errors de MousePlayer ho resol automàticament incorporant URL de reproducció visual directament als informes d’errors. Quan es produeix una excepció, els enginyers poden fer clic en un sol enllaç al tauler de Sentry o Bugsnag i veure una gravació de vídeo de la pantalla de l’usuari fins al mil·lisegon exacte de la fallada.

Integració sense sobrecàrrega: El pont s’executa discretament com a monitor en segon pla dins de mp.js. Detecta automàticament el seu SDK de seguiment d’errors sense afegir sobrecàrrega mesurable ni afectar Core Web Vitals.

2. Activació & assignació de proveïdors

Pot activar el pont de seguiment d’errors des de la interfície del tauler o per programació mitjançant l’objecte de configuració del nostre SDK.

Mètode A: Activació des del tauler (sense codi)

  1. Iniciï sessió a l’espai de treball de MousePlayer i obri Les seves propietats.
  2. Faci clic al botó Configuració / Integracions del costat del lloc web de destinació.
  3. A la finestra d’integracions, estableixi Pont Sentry, Bugsnag & Datadog RUM en ON.
  4. Seleccioni el proveïdor (sentry, bugsnag, o datadog) i faci clic a Desar els canvis.

Mètode B: Configuració manual de l’script

Si prefereix fixar la configuració directament al codi, passi error_bridge_active: true dins de l’objecte window.mp_config de configuració:

<!-- 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. Taula d’execució tècnica de l’SDK

Segons el proveïdor seleccionat, MousePlayer executa automàticament els mètodes oficials d’etiquetatge de l’SDK JavaScript:

Proveïdor Mètode JavaScript executat Clau de metadades inserida
Sentry window.Sentry.setTag(...) mouseplayer_session_url
Bugsnag window.Bugsnag.addMetadata('MousePlayer', { ... }) session_url
Datadog RUM window.DD_RUM.setGlobalContextProperty(...) mouseplayer_session_url

4. On trobar les reproduccions als informes d’errors

Un cop actiu, els URL de reproducció apareixen immediatament als taulers de seguiment d’errors cada vegada que es registra una fallada del frontend.

Detalls d’incidència de Sentry

Obri qualsevol incidència al seu projecte de Sentry i desplaci’s fins a la secció Etiquetes corresponent. Veurà una etiqueta amb el nom mouseplayer_session_url. També pot filtrar les incidències de Sentry amb la barra de cerca de consultes: mouseplayer_session_url:*.

Pestanyes de metadades de Bugsnag

A l’informe d’error de Bugsnag, consulti les pestanyes de navegació inferiors. Hi apareixerà una pestanya personalitzada nova amb el nom MousePlayer que contindrà l’hiperenllaç clicable session_url corresponent.

Explorador d’errors de Datadog RUM

A Datadog RUM, vagi a qualsevol sessió amb error gravada i inspeccioni l’arbre JSON Context global / Atributs corresponent. L’URL s’indexa a @mouseplayer_session_url.

Totes les marques esmentades aquí pertanyen als seus propietaris respectius. MousePlayer no té cap relació comercial amb aquests proveïdors.