Connettore Sentry, Bugsnag & Datadog RUM

Velocizzi il lavoro di sviluppo e controllo qualità collegando le eccezioni JavaScript del browser direttamente alle registrazioni video delle sessioni MousePlayer.

1. Il problema: le tracce dello stack non mostrano il contesto utente

Quando sul sito si verifica un’eccezione JavaScript non gestita o un errore di rete, strumenti come Sentry forniscono tracce dello stack e stringhe user-agent del browser. Gli sviluppatori però si chiedono ancora: «Su quale pulsante ha fatto clic l’utente subito prima del blocco?» oppure «Quali dati ha inserito nel modulo?»

Il connettore monitoraggio errori di MousePlayer risolve automaticamente il problema aggiungendo gli URL di riproduzione ai report degli errori. Quando si verifica un’eccezione, gli sviluppatori possono fare clic su un link nella dashboard Sentry o Bugsnag e guardare il video dello schermo fino al millisecondo esatto del blocco.

Integrazione senza sovraccarico: Il connettore controlla silenziosamente in background all’interno di mp.js. Rileva automaticamente l’SDK di monitoraggio errori senza sovraccarico misurabile né effetti sui Core Web Vitals.

2. Attivazione & associazione dei fornitori

Può attivare il connettore dalla dashboard o tramite codice con l’oggetto di configurazione del nostro SDK.

Metodo A: attivazione dalla dashboard (senza codice)

  1. Acceda alla sua area di lavoro MousePlayer e apra Le sue proprietà.
  2. Faccia clic sul pulsante Impostazioni / Integrazioni accanto al sito interessato.
  3. Nella finestra delle integrazioni, imposti Connettore Sentry, Bugsnag & Datadog RUM su ON.
  4. Selezioni il fornitore (sentry, bugsnag, oppure datadog), quindi faccia clic su Salva modifiche.

Metodo B: configurazione manuale dello script

Se preferisce definire la configurazione direttamente nel codice, passi error_bridge_active: true nel suo oggetto window.mp_config di configurazione:

<!-- 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. Tabella tecnica delle chiamate SDK

In base al fornitore scelto, MousePlayer esegue automaticamente i metodi ufficiali di aggiunta dei metadati dell’SDK JavaScript:

Fornitore Metodo JavaScript eseguito Chiave metadati inserita
Sentry window.Sentry.setTag(...) mouseplayer_session_url
Bugsnag window.Bugsnag.addMetadata('MousePlayer', { ... }) session_url
Datadog RUM window.DD_RUM.setGlobalContextProperty(...) mouseplayer_session_url

4. Dove trovare le riproduzioni nei report degli errori

Quando è attivo, gli URL compaiono subito nelle dashboard di monitoraggio ogni volta che viene registrato un blocco del browser.

Dettagli del problema in Sentry

Apra un problema nel progetto Sentry e scorra fino alla sezione Tag . Troverà un tag chiamato mouseplayer_session_url. Può anche filtrare i problemi con la barra di ricerca: mouseplayer_session_url:*.

Schede metadati di Bugsnag

Nel report di errore Bugsnag, controlli le schede di navigazione inferiori. Compare una nuova scheda personalizzata chiamata MousePlayer con il link cliccabile session_url di riproduzione.

Esploratore errori Datadog RUM

In Datadog RUM, apra una sessione con un errore registrato ed esamini l’albero JSON Contesto globale / Attributi . L’URL è indicizzato sotto @mouseplayer_session_url.

Tutti i marchi citati appartengono ai rispettivi titolari. MousePlayer non ha rapporti commerciali con questi fornitori.