قابلية رصد الواجهة الأمامية: ماذا ولماذا؟

أصبح رصد الواجهة الخلفية راسخًا؛ إذ تسجّل السجلات الأحداث، وتتتبع المقاييس استخدام الموارد، وتتبع آثار التوزيع الطلبات عبر الخدمات المصغرة. وتُنشر أدوات مثل Datadog وPrometheus وJaeger على نطاق واسع في أنظمة الواجهة الخلفية الإنتاجية.

رصد الواجهة الأمامية مجال أحدث، يتتبع تجربة المستخدم أثناء تفاعله مع تطبيق React. ويشمل ذلك تسجيل تفاعلات المستخدم، وقياس أداء العرض، ومراقبة طلبات الشبكة، والتقاط أخطاء JavaScript في المتصفح.

قد تبدو الواجهة الخلفية سليمة تمامًا — بمعدلات أخطاء منخفضة واستعلامات قاعدة بيانات سريعة — بينما يواجه المستخدمون واجهة بطيئة أو متقطعة أو معطلة. ويسد رصد الواجهة الأمامية هذه الفجوة عبر قياس ما يختبره المستخدمون فعليًا، لا ما يفعله الخادم فحسب.

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

نظير مقاييس الواجهة الخلفية في الواجهة الأمامية هو Web Vitals: يقيس LCP (Largest Contentful Paint) سرعة التحميل، ويقيس INP (Interaction to Next Paint) سرعة الاستجابة، ويقيس CLS (Cumulative Layout Shift) الاستقرار البصري. وهذه هي المقاييس التي تستخدمها Google لترتيب Core Web Vitals.

تلتقط سجلات الواجهة الأمامية الأخطاء والتحذيرات والأحداث المعلوماتية من المتصفح. وتتمثل الإشارات الأساسية في استدعاءات console.error، واستثناءات JavaScript غير المعالجة (window.onerror)، ورفضات Promise غير المعالجة (window.onunhandledrejection)، وما تلتقطه حدود أخطاء React.

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

تستخدم المراقبة الاصطناعية أدوات آلية، مثل Lighthouse CI وPlaywright وWebPageTest، لمحاكاة تفاعلات المستخدم في بيئة مضبوطة. وهي متوقعة النتائج وتكشف التراجعات قبل وصولها إلى المستخدمين، لكنها لا تلتقط تنوع أجهزة المستخدمين الحقيقيين وشبكاتهم وأنماط استخدامهم.

توفر عدة أدوات تجارية إمكانات RUM متكاملة وجاهزة للاستخدام مع React: Datadog RUM، الذي يتكامل مع Datadog APM لتوفير آثار شاملة للمكدس، وNew Relic Browser، وSentry Performance، الذي يلتقط الأخطاء والأداء في SDK واحد. وهذه الأدوات سريعة الدمج، لكنها مكلفة عند التوسع.

OpenTelemetry هو مشروع تابع لـ CNCF يعرّف واجهات API وحزم SDK محايدة تجاه المورّد لجمع الآثار والمقاييس والسجلات. وبإضافة أدوات الرصد باستخدام OpenTelemetry، تمتلك بياناتك ويمكنك إرسالها إلى أي واجهة خلفية متوافقة — مثل Jaeger أو Grafana Tempo أو Honeycomb أو Datadog أو مسار المعالجة الخاص بك.

من دون رصد الواجهة الأمامية، تكاد تجربة المستخدم البطيئة تكون غير مرئية لفرق الهندسة. قد تلاحظ ارتفاعًا في تذاكر دعم العملاء أو انخفاضًا في معدلات التحويل، لكن عزل السبب الجذري يتطلب التخمين عند غياب الآثار والمقاييس القادمة من المتصفح.

ما الفرق الأساسي بين مراقبة المستخدمين الفعليين (RUM) والمراقبة الاصطناعية؟

يطبّق رصد الواجهة الأمامية الركائز الثلاث — الآثار والمقاييس والسجلات — على المتصفح. وتلتقط RUM تجارب المستخدمين الفعليين، بينما تكشف المراقبة الاصطناعية التراجعات مبكرًا. وتُعد Web Vitals (LCP وINP وCLS) المقاييس الأساسية للواجهة الأمامية. ويوفر OpenTelemetry معيارًا محايدًا تجاه المورّد لجمع هذه البيانات وتصديرها، مما يمنحك حرية اختيار الواجهة الخلفية للرصد.