التعرّف على حالة الرمز باستخدام ReportingMonitorer API

ابحث عن واجهات برمجة التطبيقات التي تم إيقافها في تطبيقات الإنتاج.

إريك بيدلمان
Twitter GitHub الصفحة الرئيسية

تتيح لك علامة ReportingObserver معرفة ما إذا كان موقعك الإلكتروني يستخدم واجهة برمجة تطبيقات تم إيقافها أو عندما يستخدم ويتدخل متصفِّح. صدرت الوظيفة الأساسية في الأصل في Chrome 69. بدءًا من الإصدار 84 من Chrome، يمكن استخدامه في العاملين.

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    console.log(report.type, report.url, report.body);
  }
}, {buffered: true});

observer.observe();

يمكنك استخدام معاودة الاتصال لإرسال التقارير إلى الواجهة الخلفية أو مقدم خدمة التحليلات من أجل التحليل.

ما الفائدة من ذلك؟ حتى واجهة برمجة التطبيقات هذه، كانت تحذيرات الإيقاف والتدخل متوفرة في "أدوات مطوري البرامج" فقط كرسائل وحدة تحكم. لا يتم تشغيل التدخلات، على وجه الخصوص، إلا من خلال قيود مختلفة في العالم الحقيقي مثل شروط الجهاز والشبكة. وبالتالي، قد لا تظهر لك هذه الرسائل أبدًا عند تطوير/اختبار موقع إلكتروني محليًا. تقدّم ReportingObserver حلاً لهذه المسألة. عندما يواجه المستخدمون مشكلات محتملة دون حماية، يمكن إعلام مطوري الويب عنها.

الخلفية

منذ فترة، كتبتُ مشاركة مدونة (تتبُّع تطبيق الويب) لأنني اكتشفتُ عدد واجهات برمجة التطبيقات المتوفّرة لرصد "العناصر" التي تحدث في تطبيق الويب، على سبيل المثال، هناك واجهات برمجة تطبيقات يمكنها تتبُّع معلومات حول نموذج العناصر في المستند (DOM): ResizeObserver أو IntersectionObserver أو MutationObserver. تسجيل PerformanceObserver قياسات الأداء وتتيح طرق مثل window.onerror وwindow.onunhandledrejection إبلاغنا عندما يحدث خطأ ما.

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

تحذيرات بشأن وحدة تحكّم أدوات مطوّري البرامج في حالات الإيقاف النهائي والتدخلات
التحذيرات التي يبدأها المتصفّح في وحدة تحكّم أدوات مطوّري البرامج

من الطبيعي أن يُدرك المستخدم أنّ "window.onerror" سيرصد هذه التحذيرات. الإجابة هي أنّه لا يتعامل معها. ويعود السبب في ذلك إلى أنّ window.onerror لا يتم تنشيطه عند تلقّي تحذيرات مباشرةً من وكيل المستخدم نفسه. ويتم تنشيطه بحثًا عن أخطاء وقت التشغيل (استثناءات JavaScript وأخطاء البنية) الناتجة عن تنفيذ الرمز البرمجي.

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

واجهة برمجة التطبيقات

لا تختلف ReportingObserver عن واجهات برمجة التطبيقات Observer الأخرى، مثل IntersectionObserver وResizeObserver. ما عليك سوى معاودة الاتصال به؛ فإنه يعطيك معلومات. المعلومات التي تتلقاها معاودة الاتصال هي قائمة بالمشكلات التي تسببت بها الصفحة:

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    // → report.type === 'deprecation'
    // → report.url === 'https://reporting-observer-api-demo.glitch.me'
    // → report.body.id === 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload'
    // → report.body.message === 'Synchronous XMLHttpRequest is deprecated...'
    // → report.body.lineNumber === 11
    // → report.body.columnNumber === 22
    // → report.body.sourceFile === 'https://reporting-observer-api-demo.glitch.me'
    // → report.body.anticipatedRemoval === <JS_DATE_STR> or null
  }
});

observer.observe();

التقارير التي تمت فلترتها

يمكن فلترة التقارير مسبقًا لمراقبة أنواع تقارير معيّنة فقط. في الوقت الحالي، هناك نوعان من التقارير: 'deprecation' و'intervention'.

const observer = new ReportingObserver((reports, observer) => {
  …
}, {types: ['deprecation']});

تقارير مخزّنة مؤقتًا

استخدِم الخيار buffered: true إذا أردت الاطّلاع على التقارير التي تم إنشاؤها قبل إنشاء مثيل المراقب:

const observer = new ReportingObserver((reports, observer) => {
  …
}, {types: ['intervention'], buffered: true});

هذا الخيار رائع في حالات مثل التحميل الكسول لمكتبة تستخدم ReportingObserver. تتم إضافة المراقب في وقت متأخر، ولكنك لا يفوتك أي شيء حدث سابقًا في تحميل الصفحة.

إيقاف الملاحظة

إيقاف التتبّع باستخدام طريقة disconnect():

observer.disconnect();

أمثلة

إبلاغ مقدم خدمة التحليلات بتدخلات المتصفح

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    sendReportToAnalytics(JSON.stringify(report.body));
  }
}, {types: ['intervention'], buffered: true});

observer.observe();

إرسال إشعار عند إزالة واجهات برمجة التطبيقات

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    if (report.type === 'deprecation') {
      sendToBackend(`Using a deprecated API in ${report.body.sourceFile} which will be
                     removed on ${report.body.anticipatedRemoval}. Info: ${report.body.message}`);
    }
  }
});

observer.observe();

الخلاصة

تتيح لك ReportingObserver طريقة إضافية لاكتشاف المشاكل المحتملة في تطبيق الويب ومراقبتها. كما أنّها أداة مفيدة لفهم حالة قاعدة الرموز البرمجية (أو عدم توفّرها). أرسل التقارير إلى الخلفية، وتعرّف على المشكلات الواقعية، وحدّث الكود، والربح!

العمل المستقبلي

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

مراجع إضافية:

الصورة الرئيسية من إعداد Sieuwert Otterloo على قناة Unsplash