ब्राउज़र से OpenTelemetry ट्रेस

ब्राउज़र के लिए OpenTelemetry JavaScript SDK कई पैकेजों से बना है: @opentelemetry/sdk-trace-web मुख्य ट्रेस कार्यान्वयन देता है, @opentelemetry/instrumentation-fetch सभी fetch API कॉल के लिए अपने-आप स्पैन बनाता है और @opentelemetry/exporter-trace-otlp-http स्पैन को कलेक्टर तक भेजता है।

TracerProvider, OpenTelemetry में केंद्रीय कॉन्फ़िगरेशन ऑब्जेक्ट है। इसमें SpanProcessors की सूची होती है (जो तय करते हैं कि पूरे हो चुके स्पैन के साथ क्या किया जाए), आपके ऐप्लिकेशन का वर्णन करने वाला संसाधन (सेवा का नाम और संस्करण) तथा सैंपलिंग की कोई भी कॉन्फ़िगरेशन होती है।

BatchSpanProcessor पूरे हो चुके स्पैन को मेमोरी में एकत्र करता है और प्रत्येक स्पैन को अलग-अलग भेजने के बजाय उन्हें समूहों में निर्यात करता है। इससे आपके कलेक्टर को भेजे जाने वाले HTTP अनुरोधों की संख्या बहुत कम हो जाती है, ब्राउज़र का प्रदर्शन बेहतर होता है और OTel कलेक्टर एंडपॉइंट पर भार घटता है।

OTLPTraceExporter समूहित स्पैन को JSON या protobuf प्रारूप में HTTP के माध्यम से OpenTelemetry-संगत कलेक्टर तक भेजता है। आप कलेक्टर का URL कॉन्फ़िगर करते हैं (जैसे आपका OTel कलेक्टर प्रॉक्सी एंडपॉइंट), और निर्यातक क्रमबद्ध रूपांतरण तथा पुनःप्रयास की प्रक्रिया अपने-आप संभालता है।

एक स्पैन किसी ट्रेस के भीतर किए गए काम की एक इकाई को दर्शाता है: किसी घटक का माउंट होना, API कॉल या उपयोगकर्ता की अंतःक्रिया। स्पैन में नाम, प्रारंभ समय, समाप्ति समय, स्थिति (OK या ERROR) और कुंजी-मूल्य विशेषताओं का एक समूह होता है। संबंधित स्पैन साझा trace ID तथा पैरेंट-चाइल्ड संबंधों के माध्यम से जुड़े होते हैं।

provider.getTracer('react-app') से ट्रेसर बनाएँ और tracer.startSpan('component-mount') से स्पैन शुरू करें। काम पूरा होने के बाद समाप्ति समय दर्ज करने के लिए span.end() कॉल करें। स्पैन को हमेशा समाप्त करें — लीक हुए स्पैन मेमोरी व्यर्थ करते हैं और आपकी अवलोकनीयता के बैकएंड में अधूरा डेटा बनाते हैं।

विशेषताएँ स्पैन में संदर्भ से जुड़ा डेटा जोड़ती हैं: span.setAttribute('user.id', userId) या span.setAttribute('route', location.pathname)। आपकी अवलोकनीयता के बैकएंड में इन विशेषताओं को खोजा जा सकता है, जिससे ऐसी क्वेरी चलाना संभव होता है जैसे "उपयोगकर्ता 42 के सभी धीमे स्पैन दिखाएँ" या "/checkout रूट की सभी त्रुटियाँ दिखाएँ।"

@opentelemetry/instrumentation-fetch वैश्विक fetch फ़ंक्शन में बदलाव करके हर बाहर जाने वाले HTTP अनुरोध के लिए अपने-आप स्पैन बनाता है। यह स्पैन URL, विधि, HTTP स्थिति कोड और अवधि दर्ज करता है, इसके लिए आपके मौजूदा fetch कॉल में कोई बदलाव करने की आवश्यकता नहीं होती।

जब fetch इंस्ट्रूमेंटेशन किसी बाहर जाने वाले अनुरोध के लिए स्पैन बनाता है, तो यह अनुरोध में W3C TraceContext का traceparent हेडर जोड़ देता है। अनुरोध प्राप्त करने वाला बैकएंड इस हेडर को पढ़कर उसी ट्रेस को जारी रखता है और ऐसा जुड़ा हुआ ट्रेस बनाता है जो ब्राउज़र और सर्वर, दोनों तक फैला होता है।

OTel का आरंभीकरण किसी भी कंपोनेंट के माउंट होने से पहले होना चाहिए—आमतौर पर ऐप की प्रवेश फ़ाइल (main.tsx) में, ReactDOM.createRoot कॉल से पहले। प्रोवाइडर बनाएँ, प्रोसेसर और एक्सपोर्टर रजिस्टर करें, और provider.register() कॉल करके उसे वैश्विक TracerProvider बनाएँ।

अधिक ट्रैफ़िक वाले ऐप में हर उपयोगकर्ता इंटरैक्शन रिकॉर्ड करने से बहुत बड़ी मात्रा में ट्रेस डेटा बनता है। मात्रा कम करने के लिए TracerProvider में TraceIdRatioBased सैंपलर कॉन्फ़िगर करें, जैसे 10% ट्रेस का सैंपल लेना। यह सुनिश्चित करने के लिए कि कोई त्रुटि छूट न जाए, ParentBased सैंपलर का उपयोग करके त्रुटि वाले ट्रेस का हमेशा 100% सैंपल लें।

OpenTelemetry JavaScript SDK, TracerProvider, BatchSpanProcessor और OTLPTraceExporter की सहायता से ब्राउज़र का इंस्ट्रूमेंटेशन करता है। स्पैन ऐसे कार्य-खंडों का प्रतिनिधित्व करते हैं जिन्हें एट्रिब्यूट से समृद्ध किया जाता है। fetch इंस्ट्रूमेंटेशन एपीआई कॉल के लिए अपने-आप स्पैन बनाता है और एंड-टू-एंड वितरित ट्रेसिंग के लिए W3C TraceContext हेडर जोड़ता है। स्वच्छ ट्रेस डेटा बनाए रखने के लिए जल्दी आरंभ करें, उचित रूप से सैंपल लें और स्पैन को हमेशा समाप्त करें।