Sentry-, Bugsnag- és Datadog RUM-híd

1. A probléma: a hívási verem nem mutatja a felhasználói kontextust

Ha webhelyén kezeletlen JavaScript-kivétel vagy hálózati összeomlás történik, a Sentryhez hasonló hibafigyelő eszközök száraz hívási vermet és a böngésző user-agent karakterláncát adják. A mérnökökben azonban ott marad a kérdés: „Melyik gombra kattintott a felhasználó közvetlenül az összeomlás előtt?” vagy „Milyen adatokat írt az űrlapba?”

A MousePlayer hibakövetési híd ezt automatikusan megoldja: a vizuális visszajátszás URL-jét közvetlenül a hibajelentéshez kapcsolja. Kivétel esetén a mérnökök a Sentry vagy Bugsnag irányítópultján egyetlen linkre kattintva megnézhetik a felhasználó képernyőjének videófelvételét az összeomlás pontos ezredmásodpercéig.

Többletterhelés nélküli integráció: A híd észrevétlen háttérfigyelőként fut a mp.js részeként. Automatikusan felismeri a hibakövető SDK-t, mérhető többletterhelés vagy a Core Web Vitals befolyásolása nélkül.

2. Aktiválás & szolgáltató-hozzárendelés

A hibakövetési hidat az irányítópult felületén vagy programból, az SDK konfigurációs objektumával engedélyezheti.

A. módszer: aktiválás az irányítópulton (kód nélkül)

Jelentkezzen be MousePlayer-munkaterületére, és nyissa meg ezt: Saját webhelyei.
A célwebhely mellett kattintson a Beállítások / Integrációk gombra.
Az Integrációk ablakban állítsa a Sentry-, Bugsnag- & Datadog RUM-híd kapcsolót erre: ON.
Válassza ki szolgáltatóját (sentry, bugsnag vagy datadog), és kattintson erre: Módosítások mentése.

B. módszer: a szkript kézi beállítása

Ha a konfigurációt közvetlenül a kódba írná, adja át a error_bridge_active: true értéket a window.mp_config objektumban:

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

3. Az SDK technikai végrehajtási táblázata

A kiválasztott szolgáltatótól függően a MousePlayer automatikusan végrehajtja a hivatalos JavaScript SDK címkéző metódusait:

Szolgáltató	Végrehajtott JavaScript-metódus	Beillesztett metaadatkulcs
Sentry	`window.Sentry.setTag(...)`	`mouseplayer_session_url`
Bugsnag	`window.Bugsnag.addMetadata('MousePlayer', { ... })`	`session_url`
Datadog RUM	`window.DD_RUM.setGlobalContextProperty(...)`	`mouseplayer_session_url`

4. Hol találhatók a visszajátszások a hibajelentésekben

Aktiválás után a visszajátszási URL-ek frontendösszeomlás naplózásakor azonnal megjelennek a hibafigyelő irányítópultokon.

Sentry-hibajegy részletei

Nyisson meg egy hibajegyet Sentry-projektjében, és görgessen le a Címkék részhez. Egy ilyen nevű címkét lát: mouseplayer_session_url. A Sentry-hibajegyeket a lekérdezési keresősávban is szűrheti: mouseplayer_session_url:*.

Bugsnag metaadatlapok

Bugsnag-hibajelentésében nézze meg az alsó navigációs lapokat. Új egyedi lap jelenik meg MousePlayer néven, rajta a kattintható session_url hivatkozással.

Datadog RUM hibaböngésző

A Datadog RUM-ban nyisson meg egy rögzített hibamunkamenetet, és vizsgálja meg a Globális kontextus / Attribútumok JSON-fáját. Az URL ezen a kulcson van indexelve: @mouseplayer_session_url.

Miben segíthetünk?