Γέφυρα Sentry, Bugsnag και Datadog RUM

1. Το πρόβλημα: τα ίχνη στοίβας δεν δείχνουν το πλαίσιο του χρήστη

Όταν προκύπτει μη διαχειριζόμενη εξαίρεση JavaScript ή αστοχία δικτύου στον ιστότοπό σας, εργαλεία παρακολούθησης σφαλμάτων όπως το Sentry παρέχουν στεγνά ίχνη στοίβας και συμβολοσειρές user-agent του προγράμματος περιήγησης. Ωστόσο, οι μηχανικοί εξακολουθούν να αναρωτιούνται: «Σε ποιο κουμπί έκανε κλικ ο χρήστης αμέσως πριν από την αστοχία;» ή «Ποια δεδομένα εισήχθησαν στη φόρμα;»

Η γέφυρα παρακολούθησης σφαλμάτων MousePlayer λύνει αυτό το πρόβλημα αυτόματα συνδέοντας τα URL οπτικής αναπαραγωγής απευθείας με τις αναφορές σφαλμάτων σας. Όταν προκύπτει εξαίρεση, οι μηχανικοί μπορούν να κάνουν κλικ σε έναν μόνο σύνδεσμο στον πίνακα ελέγχου Sentry ή Bugsnag και να δουν μια καταγραφή βίντεο της οθόνης του χρήστη έως το ακριβές χιλιοστό του δευτερολέπτου της αστοχίας.

Ενσωμάτωση χωρίς πρόσθετο φόρτο: Η γέφυρα εκτελείται αθόρυβα ως επόπτης στο παρασκήνιο μέσα στο mp.js. Εντοπίζει αυτόματα το SDK παρακολούθησης σφαλμάτων σας χωρίς να προσθέτει μετρήσιμο φόρτο ή να επηρεάζει τα Core Web Vitals.

2. Ενεργοποίηση & αντιστοίχιση παρόχου

Μπορείτε να ενεργοποιήσετε τη γέφυρα παρακολούθησης σφαλμάτων από το περιβάλλον του πίνακα ελέγχου ή προγραμματιστικά μέσω του αντικειμένου διαμόρφωσης SDK μας.

Μέθοδος Α: ενεργοποίηση από τον πίνακα ελέγχου (χωρίς κώδικα)

Συνδεθείτε στον χώρο εργασίας σας στο MousePlayer και ανοίξτε την ενότητα Οι ιστότοποί σας.
Κάντε κλικ στο κουμπί Ρυθμίσεις / Ενσωματώσεις δίπλα στον επιθυμητό ιστότοπο.
Στο παράθυρο ενσωματώσεων, θέστε τη Γέφυρα Sentry, Bugsnag & Datadog RUM σε ON.
Επιλέξτε τον πάροχό σας (sentry, bugsnag ή datadog) και επιλέξτε Αποθήκευση αλλαγών.

Μέθοδος Β: χειροκίνητη διαμόρφωση script

Αν προτιμάτε να ορίσετε τη διαμόρφωση απευθείας στον κώδικα, μεταβιβάστε το error_bridge_active: true μέσα στο αντικείμενο window.mp_config σας:

<script> window.mp_config = { channel: 'YOUR_CHANNEL_ID', error_bridge_active: true, error_provider: 'sentry' // 'sentry', 'bugsnag', or 'datadog' }; </script>

3. Πίνακας τεχνικής εκτέλεσης SDK

Ανάλογα με τον επιλεγμένο πάροχο, το MousePlayer εκτελεί αυτόματα τις επίσημες μεθόδους επισήμανσης του SDK JavaScript:

Πάροχος	Μέθοδος JavaScript που εκτελείται	Κλειδί μεταδεδομένων που εισάγεται
Sentry	`window.Sentry.setTag(...)`	`mouseplayer_session_url`
Bugsnag	`window.Bugsnag.addMetadata('MousePlayer', { ... })`	`session_url`
Datadog RUM	`window.DD_RUM.setGlobalContextProperty(...)`	`mouseplayer_session_url`

4. Πού θα βρείτε τις αναπαραγωγές στις αναφορές σφαλμάτων σας

Μετά την ενεργοποίηση, τα URL αναπαραγωγής εμφανίζονται αμέσως στους πίνακες ελέγχου παρακολούθησης σφαλμάτων όποτε καταχωρίζεται αστοχία στην πλευρά του χρήστη.

Λεπτομέρειες εργασίας Sentry

Ανοίξτε οποιαδήποτε εργασία στο έργο Sentry σας και κυλήστε μέχρι την ενότητα Ετικέτες. Θα δείτε μια ετικέτα με όνομα mouseplayer_session_url. Μπορείτε επίσης να φιλτράρετε εργασίες Sentry χρησιμοποιώντας τη γραμμή αναζήτησης ερωτημάτων: mouseplayer_session_url:*.

Καρτέλες μεταδεδομένων Bugsnag

Στην αναφορά σφάλματος Bugsnag, ελέγξτε τις κάτω καρτέλες πλοήγησης. Θα εμφανιστεί μια νέα προσαρμοσμένη καρτέλα με όνομα MousePlayer που περιέχει τον υπερσύνδεσμο session_url με δυνατότητα κλικ.

Εξερευνητής σφαλμάτων Datadog RUM

Στο Datadog RUM, μεταβείτε σε οποιαδήποτε καταγεγραμμένη συνεδρία σφάλματος και εξετάστε το δέντρο JSON Καθολικό πλαίσιο / Χαρακτηριστικά. Το URL είναι καταχωρισμένο κάτω από @mouseplayer_session_url.

Όλα τα εμπορικά σήματα που αναφέρονται εδώ ανήκουν στους αντίστοιχους κατόχους τους. Το MousePlayer δεν έχει επιχειρηματική σχέση με αυτούς τους παρόχους.

Πώς μπορούμε να βοηθήσουμε;