Passerelle Sentry, Bugsnag & Datadog RUM

Accélérer le travail de vos équipes de développement et d’assurance qualité en reliant directement les exceptions JavaScript côté navigateur aux enregistrements vidéo de session MousePlayer.

1. Le problème : les traces de pile ne montrent pas le contexte utilisateur

Lorsqu’une exception JavaScript non gérée ou une défaillance réseau survient sur votre site, les outils de suivi des erreurs comme Sentry fournissent des traces de pile brutes et des chaînes d’agent utilisateur du navigateur. Mais les développeurs se demandent toujours : « Sur quel bouton l’utilisateur a-t-il cliqué juste avant le plantage ? » ou « Quelles données ont été saisies dans le formulaire ? »

La passerelle de suivi des erreurs MousePlayer résout automatiquement ce problème en insérant les URL de relecture visuelle directement dans vos rapports d’erreurs. Lorsqu’une exception se produit, les développeurs peuvent cliquer sur un seul lien dans leur tableau de bord Sentry ou Bugsnag pour regarder un enregistrement vidéo de l’écran de l’utilisateur jusqu’à la milliseconde exacte du plantage.

Intégration sans surcharge : La passerelle surveille discrètement en arrière-plan au sein de mp.js. Elle détecte automatiquement votre SDK de suivi des erreurs sans ajouter de surcharge mesurable ni affecter les Core Web Vitals.

2. Activation & correspondance des fournisseurs

Vous pouvez activer la passerelle de suivi des erreurs depuis votre tableau de bord ou par programmation avec l’objet de configuration de notre SDK.

Méthode A : activation depuis le tableau de bord (sans code)

  1. Connectez-vous à votre espace de travail MousePlayer et ouvrez Vos propriétés.
  2. Cliquez sur le bouton Paramètres / Intégrations à côté du site concerné.
  3. Dans la fenêtre des intégrations, faites passer Passerelle Sentry, Bugsnag & Datadog RUM à ON.
  4. Sélectionnez votre fournisseur (sentry, bugsnag, ou datadog), puis cliquez sur Enregistrer les modifications.

Méthode B : configuration manuelle du script

Si vous préférez définir la configuration directement dans le code, transmettez error_bridge_active: true dans votre objet window.mp_config de configuration :

<!-- 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. Tableau technique des appels SDK

Selon le fournisseur choisi, MousePlayer exécute automatiquement les méthodes officielles d’ajout de métadonnées du SDK JavaScript :

Fournisseur Méthode JavaScript exécutée Clé de métadonnées insérée
Sentry window.Sentry.setTag(...) mouseplayer_session_url
Bugsnag window.Bugsnag.addMetadata('MousePlayer', { ... }) session_url
Datadog RUM window.DD_RUM.setGlobalContextProperty(...) mouseplayer_session_url

4. Où trouver les relectures dans vos rapports d’erreurs

Une fois l’intégration activée, les URL de relecture apparaissent immédiatement dans vos tableaux de bord de suivi des erreurs dès qu’un plantage côté navigateur est consigné.

Détails d’un problème dans Sentry

Ouvrez un problème de votre projet Sentry et faites défiler jusqu’à la section Balises . Vous y trouverez une balise nommée mouseplayer_session_url. Vous pouvez aussi filtrer les problèmes Sentry au moyen de la barre de recherche : mouseplayer_session_url:*.

Onglets de métadonnées Bugsnag

Dans votre rapport d’erreur Bugsnag, consultez les onglets de navigation du bas. Un nouvel onglet personnalisé nommé MousePlayer apparaît et contient le lien cliquable session_url vers la relecture.

Explorateur d’erreurs Datadog RUM

Dans Datadog RUM, ouvrez une session comportant une erreur enregistrée et examinez l’arborescence JSON Contexte global / Attributs . L’URL est indexée sous @mouseplayer_session_url.

Toutes les marques citées appartiennent à leurs propriétaires respectifs. MousePlayer n’entretient aucune relation commerciale avec ces fournisseurs.