Sentry, Bugsnag & Datadog RUM బ్రిడ్జ్

ఫ్రంట్‌ఎండ్ JavaScript ఎక్సెప్షన్‌లను నేరుగా MousePlayer వీడియో సెషన్ రికార్డింగ్‌లకు అనుసంధానించి మీ ఇంజినీరింగ్, QA వర్క్‌ఫ్లోలను వేగవంతం చేయండి.

1. సమస్య: స్టాక్‌ట్రేస్‌లు వినియోగదారు సందర్భాన్ని చూపించవు

మీ వెబ్‌సైట్‌లో నిర్వహించని JavaScript ఎక్సెప్షన్ లేదా నెట్‌వర్క్ క్రాష్ జరిగినప్పుడు, Sentry వంటి లోపాల పర్యవేక్షణ సాధనాలు పొడి స్టాక్‌ట్రేస్‌లు, బ్రౌజర్ యూజర్ ఏజెంట్ స్ట్రింగ్‌లను ఇస్తాయి. అయినా ఇంజినీర్‌లకు మిగిలే ప్రశ్న: “క్రాష్‌కు సరిగ్గా ముందు వినియోగదారు ఏ బటన్‌ను క్లిక్ చేశారు?” లేదా “ఫారమ్‌లో ఏ డేటా నమోదు చేశారు?”

ఈ 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 అమలు పట్టిక

ఎంచుకున్న సేవాదారును బట్టి MousePlayer అధికారిక JavaScript SDK ట్యాగింగ్ పద్ధతులను స్వయంచాలకంగా అమలు చేస్తుంది:

సేవాదారు అమలు చేసే 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 Error Explorer

Datadog RUMలో ఏ రికార్డ్ చేసిన లోపం సెషన్‌కైనా వెళ్లి, ఈ JSON వృక్షాన్ని పరిశీలించండి: Global Context / Attributes . URL సూచికలో ఉండే కీ @mouseplayer_session_url.

ఇక్కడ పేర్కొన్న అన్ని ట్రేడ్‌మార్క్‌లు వాటి యజమానులకు చెందినవి. ఈ సేవాదారులతో MousePlayerకు వ్యాపార సంబంధం లేదు.