Sentry, Bugsnag & Datadog RUM ബ്രിഡ്ജ്

ഫ്രണ്ട് എൻഡ് JavaScript എക്സെപ്ഷനുകൾ നേരിട്ട് MousePlayer വീഡിയോ സെഷൻ റെക്കോർഡിംഗുകളുമായി ബന്ധിപ്പിച്ച് എഞ്ചിനീയറിംഗ്, QA പ്രവർത്തനങ്ങൾ വേഗത്തിലാക്കുക.

1. പ്രശ്നം: സ്റ്റാക്ക്‌ട്രേസുകൾ ഉപയോക്തൃ സന്ദർഭം കാണിക്കുന്നില്ല

കൈകാര്യം ചെയ്യാത്ത JavaScript എക്സെപ്ഷനോ നെറ്റ്‌വർക്ക് ക്രാഷോ വെബ്സൈറ്റിൽ സംഭവിക്കുമ്പോൾ Sentry പോലുള്ള പിശക് നിരീക്ഷണ ഉപകരണങ്ങൾ സ്റ്റാക്ക്‌ട്രേസുകളും ബ്രൗസർ user-agent സ്ട്രിംഗുകളും നൽകുന്നു. പക്ഷേ എഞ്ചിനീയർമാർ ചോദിക്കും: “ക്രാഷിനു തൊട്ടുമുമ്പ് ഉപയോക്താവ് ഏത് ബട്ടൺ ക്ലിക്ക് ചെയ്തു?” അല്ലെങ്കിൽ “ഫോമിൽ ഏത് ഡാറ്റയാണ് നൽകിയത്?”

ഈ MousePlayer പിശക് ട്രാക്കിംഗ് ബ്രിഡ്ജ് ദൃശ്യ റീപ്ലേ URL-കൾ നേരിട്ട് പിശക് റിപ്പോർട്ടുകളിൽ ചേർത്ത് ഇത് സ്വയം പരിഹരിക്കുന്നു. എക്സെപ്ഷൻ സംഭവിക്കുമ്പോൾ Sentry അല്ലെങ്കിൽ Bugsnag ഡാഷ്ബോർഡിലെ ഒറ്റ ലിങ്ക് ക്ലിക്ക് ചെയ്ത് ക്രാഷിന്റെ കൃത്യമായ മില്ലിസെക്കൻഡ് വരെ ഉപയോക്താവിന്റെ സ്ക്രീൻ വീഡിയോ റെക്കോർഡിംഗ് കാണാം.

അധിക ഭാരമില്ലാത്ത ഇന്റഗ്രേഷൻ: ഇതിനുള്ളിൽ നിശ്ശബ്ദ പശ്ചാത്തല നിരീക്ഷകനായി ബ്രിഡ്ജ് പ്രവർത്തിക്കുന്നു: mp.js. അളക്കാവുന്ന അധികഭാരം കൂട്ടാതെയും Core Web Vitals-നെ ബാധിക്കാതെയും പിശക് ട്രാക്കിംഗ് SDK സ്വയം കണ്ടെത്തുന്നു.

2. പ്രവർത്തനക്ഷമമാക്കലും & ദാതാവ് പൊരുത്തപ്പെടുത്തലും

ഡാഷ്ബോർഡ് ഇന്റർഫേസ് വഴിയോ SDK കോൺഫിഗറേഷൻ ഒബ്ജക്റ്റിൽ പ്രോഗ്രാമായോ പിശക് ട്രാക്കിംഗ് ബ്രിഡ്ജ് പ്രവർത്തനക്ഷമമാക്കാം.

വഴി A: ഡാഷ്ബോർഡിൽനിന്ന് (കോഡില്ലാതെ)

  1. MousePlayer വർക്ക്സ്പേസിൽ സൈൻ ഇൻ ചെയ്ത് തുറക്കുക: നിങ്ങളുടെ സൈറ്റുകൾ.
  2. ക്ലിക്ക് ചെയ്യുക: ക്രമീകരണങ്ങൾ / ഇന്റഗ്രേഷനുകൾ ലക്ഷ്യ വെബ്സൈറ്റിനടുത്തുള്ള ബട്ടൺ.
  3. ഇന്റഗ്രേഷൻ ജാലകത്തിൽ മാറ്റുക: Sentry, Bugsnag & Datadog RUM ബ്രിഡ്ജ് ഈ നിലയിലേക്ക്: ON.
  4. ദാതാവ് തിരഞ്ഞെടുക്കുക (sentry, bugsnag, അല്ലെങ്കിൽ datadog); തുടർന്ന് ക്ലിക്ക് ചെയ്യുക: മാറ്റങ്ങൾ സംരക്ഷിക്കുക.

വഴി B: സ്ക്രിപ്റ്റ് കൈകൊണ്ട് ക്രമീകരിക്കുക

കോൺഫിഗറേഷൻ കോഡിൽ നൽകണമെങ്കിൽ ഇത് നൽകുക: error_bridge_active: true നിങ്ങളുടെ ഈ window.mp_config ഒബ്ജക്റ്റിനുള്ളിൽ:

<!-- 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. സാങ്കേതിക SDK പ്രവർത്തന പട്ടിക

തിരഞ്ഞെടുത്ത ദാതാവനുസരിച്ച് ഔദ്യോഗിക JavaScript SDK ടാഗിംഗ് രീതികൾ MousePlayer സ്വയം നടപ്പാക്കുന്നു:

ദാതാവ് നടപ്പാക്കുന്ന 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 പ്രോജക്റ്റിലെ ഏതെങ്കിലും പ്രശ്നം തുറന്ന് താഴേക്ക് സ്ക്രോൾ ചെയ്യുക: Tags വിഭാഗത്തിലേക്ക്. ഈ പേരിലുള്ള ടാഗ് കാണാം: mouseplayer_session_url. ക്വറി തിരയൽ ബാർ ഉപയോഗിച്ചും Sentry പ്രശ്നങ്ങൾ ഫിൽട്ടർ ചെയ്യാം: mouseplayer_session_url:*.

Bugsnag മെറ്റാഡാറ്റ ടാബുകൾ

Bugsnag പിശക് റിപ്പോർട്ടിൽ താഴെയുള്ള നാവിഗേഷൻ ടാബുകൾ പരിശോധിക്കുക. ഈ പേരിലുള്ള പുതിയ ഇഷ്ടാനുസൃത ടാബ് MousePlayer പ്രത്യക്ഷപ്പെടും; അതിൽ ക്ലിക്ക് ചെയ്യാവുന്ന session_url ഹൈപ്പർലിങ്ക് ഉണ്ടാകും.

Datadog RUM പിശക് എക്സ്പ്ലോറർ

Datadog RUM-ൽ റെക്കോർഡ് ചെയ്ത ഏതെങ്കിലും പിശക് സെഷനിലേക്ക് പോയി ഈ Global Context / Attributes JSON ട്രീ പരിശോധിക്കുക. URL സൂചികപ്പെടുത്തിയിരിക്കുന്നത് @mouseplayer_session_urlഎന്നതിലാണ്.

ഇവിടെ പരാമർശിക്കുന്ന എല്ലാ വ്യാപാരമുദ്രകളും അവയുടെ ഉടമകളുടേതാണ്. ഈ ദാതാക്കളുമായി MousePlayer-ന് ബിസിനസ് ബന്ധമില്ല.