ربط آثار الواجهة الأمامية والخلفية

الهدف النهائي من مراقبة الواجهة الأمامية هو إنشاء تتبّع واحد يربط نقرة المستخدم في React عبر الشبكة، ثم مع معالجات API، ثم مع استدعاءات الخدمات، وصولًا إلى استعلام قاعدة البيانات الذي تسبب في بطء الاستجابة. يجعل هذا التتبّع الشامل تحليل السبب الجذري فوريًا.

تحدد مواصفة W3C TraceContext تنسيق ترويسة traceparent: version-traceId-parentSpanId-flags. تبدو قيمة نموذجية كما يلي: 00-4bf92f3577b34da6a3ce929d0e0e4736-00f067aa0ba902b7-01. يُشترك في معرّف التتبّع trace ID عبر عملية التتبّع الموزّعة بأكملها، بينما يتغيّر معرّف span الأب عند كل انتقال.

تحقن أداة OTel fetch instrumentation تلقائيًا ترويسة traceparent في كل طلب fetch صادر. تحمل الترويسة معرّف التتبّع الحالي ومعرّف span لطلب fetch في الواجهة الأمامية باعتباره الأب، مما يتيح للواجهة الخلفية إنشاء span فرعي مرتبط بـ span الواجهة الأمامية.

على الخادم، تقرأ أداة OTel HTTP instrumentation الخاصة بـ Node.js/Express ترويسة traceparent الواردة، وتنشئ spans تابعة لـ span طلب fetch في الواجهة الأمامية. يظل معرّف التتبّع محفوظًا، ولذلك يعرض Jaeger أو Grafana Tempo السلسلة كاملة — span المتصفح ← span Express ← span قاعدة البيانات — في عرض زمني واحد.

بعد إجراء instrumentation لكل من الواجهة الأمامية والخلفية، افتحوا Jaeger أو Grafana Tempo وابحثوا عن معرّف تتبّع. سترون العرض الزمني الكامل: span مكوّن React في الأعلى، يليه span طلب fetch، ثم span معالج المسار في Express، ثم span استعلام قاعدة البيانات — وجميعها مع مددها وسماتها.

اضبطوا user.id باعتباره سمة على جميع spans في تطبيق React باستخدام span.setAttribute('user.id', userId). نفّذوا الأمر نفسه في الواجهة الخلفية. يمكنكم الآن تصفية واجهة المراقبة الخلفية لعرض جميع عمليات التتبّع لمعرّف مستخدم محدد، مما يتيح لكم تشخيص المشكلات التي أبلغ عنها عميل محدد.

أنشئوا معرّف جلسة فريدًا عند تحميل الصفحة، واضبطوه باعتباره session.id على جميع spans في الواجهة الأمامية. أدرجوه في ترويسات الطلب حتى تضيفه الواجهة الخلفية أيضًا إلى spans الخاصة بها. يتيح الربط حسب الجلسة إعادة بناء التسلسل الكامل للإجراءات التي نفّذها المستخدم خلال جلسة واحدة.

تدمج الأدوات التجارية مثل Datadog جلسات RUM مع عمليات تتبّع APM تلقائيًا. تحقن Datadog RUM SDK ترويسة محددة (X-Datadog-Trace-Id) في طلبات fetch، وتقرأها Datadog APM SDK في الواجهة الخلفية لربط إعادة تشغيل جلسة RUM بالتتبّع الموزّع — ويمكنكم مشاهدة إعادة تشغيل الجلسة والتتبّع في الوقت نفسه.

لنفترض أن مستخدمًا يشتكي من بطء إتمام الشراء. باستخدام عمليات التتبّع المترابطة، تبحثون عن user.id في واجهة المراقبة الخلفية، وتعثرون على تتبّع إتمام الشراء، وتلاحظون فورًا أن سبب البطء كان استعلامًا لقاعدة البيانات استغرق 900 مللي ثانية لضم جدولين كبيرين — وهو أمر لا تظهره مقاييس الواجهة الأمامية وحدها.

لا يمكن للمتصفحات إرسال عمليات التتبّع مباشرةً إلى Jaeger أو الواجهات الخلفية الأخرى، بسبب قيود CORS واحتمال كشف بيانات الاعتماد. بدلًا من ذلك، شغّلوا OTel Collector باعتباره وكيلًا: اضبطوا OTLPTraceExporter للإرسال إلى نقطة نهاية Collector الخاصة بكم، والتي توزّع البيانات بعد ذلك على Jaeger أو Grafana Tempo أو أي واجهة خلفية أخرى.

قد تلتقط عمليات تتبّع الواجهة الأمامية بيانات حساسة دون قصد، مثل قيم حقول النماذج في عناوين URL، أو معلومات التعريف الشخصية PII في سمات span، أو رموز الجلسات في الترويسات. راجعوا instrumentation الخاصة بكم للتأكد من عدم تضمين أي بيانات حساسة في سمات span. استخدموا span.setAttribute باعتدال، ونقّوا معلمات استعلام URL قبل تسجيلها.

ما تنسيق ترويسة traceparent الخاصة بـ W3C TraceContext؟

يؤدي ربط عمليات تتبّع الواجهة الأمامية والخلفية إلى توفير رؤية شاملة لمسار طلب المستخدم بالكامل. تربط ترويسات W3C TraceContext traceparent بين spans طلبات fetch في المتصفح وspans الواجهة الخلفية تلقائيًا عبر OTel instrumentation. أَثروا جميع spans بالسمتين user.id وsession.id لتسهيل تصحيح الأخطاء المستهدف. استخدموا OTel Collector وكيلًا بين المتصفح والواجهة الخلفية لتجنب مشكلات CORS وكشف بيانات الاعتماد.