Integracja Sentry, Bugsnag i Datadog RUM

1. Problem: Suchy stacktrace nie pokazuje kontekstu użytkownika

Kiedy na stronie występuje nieobsłużony błąd JavaScript lub awaria sieciowa, narzędzia monitorujące takie jak Sentry dostarczają jedynie suchy stacktrace oraz ciąg User-Agent. Programista nadal zadaje sobie pytanie: "W co dokładnie kliknął użytkownik przed awarią?" albo "Jakie dane wpisywał w formularz?"

MousePlayer Error Tracking Bridge automatycznie rozwiązuje ten problem, wstrzykując bezpośredni adres URL nagrania do raportów błędów. Gdy wystąpi awaria, programista klikając jeden link w Sentry lub Bugsnag, widzi nagranie wideo ekranu dokładnie do ułamka sekundy przed błędem.

Zero narzutu wydajnościowego: Integracja działa cicho jako proces w tle w skrypcie mp.js. Wykrywa obecność Twojego narzędzia automatycznie, nie spowalniając strony i nie wpływając na Core Web Vitals.

2. Aktywacja i wybór dostawcy

Integrację możesz włączyć za pomocą przełącznika w panelu lub ręcznie w kodzie konfiguracji na swojej stronie.

Metoda A: Aktywacja z poziomu Panelu (Bez kodowania)

Zaloguj się do panelu MousePlayer i otwórz sekcję Twoje Projekty (Your Properties).
Kliknij przycisk Ustawienia / Integracje (Settings) przy wybranej domenie.
W oknie integracji włącz opcję Sentry, Bugsnag & Datadog RUM Bridge.
Wybierz dostawcę (sentry, bugsnag lub datadog) i kliknij Zapisz zmiany.

Metoda B: Ręczna konfiguracja w kodzie skryptu

Jeśli konfigurujesz skrypt ręcznie w kodzie źródłowym, dodaj parametr error_bridge_active: true do obiektu window.mp_config:

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

3. Tabela wykonywanych metod API

W zależności od wybranego narzędzia MousePlayer automatycznie wywołuje oficjalne metody tagowania dostawcy:

Platforma	Wywoływana metoda JavaScript	Nazwa parametru (Klucz)
Sentry	`window.Sentry.setTag(...)`	`mouseplayer_session_url`
Bugsnag	`window.Bugsnag.addMetadata('MousePlayer', { ... })`	`session_url`
Datadog RUM	`window.DD_RUM.setGlobalContextProperty(...)`	`mouseplayer_session_url`

4. Gdzie znaleźć nagranie w raporcie błędu?

Po aktywacji linki do nagrań pojawiają się natychmiast w Twoim narzędziu do monitorowania błędów przy każdym zarejestrowanym wyjątku.

Szczegóły błędu w Sentry (Issue Details)

Otwórz dowolny błąd w projekcie Sentry i zjedź do sekcji Tags. Zobaczysz tam tag o nazwie mouseplayer_session_url. Możesz również filtrować błędy w wyszukiwarce Sentry wpisując: mouseplayer_session_url:*.

Zakładka metadanych w Bugsnag

W raporcie błędu Bugsnag spójrz na dolne zakładki nawigacyjne. Pojawi się tam dedykowana zakładka o nazwie MousePlayer z klikalnym linkiem session_url.

Eksplorator błędów w Datadog RUM

W panelu Datadog RUM otwórz nagraną sesję z błędem i sprawdź drzewo JSON w sekcji Global Context / Attributes. Adres URL jest indeksowany pod kluczem @mouseplayer_session_url.

W czym możemy pomóc?