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

العثور على واجهات برمجة التطبيقات المتوقّفة نهائيًا في تطبيقات الإنتاج

يتم إعلامك من خلال 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. تخيل أن واجهة برمجة تطبيقات واحدة يمكنها التعرف على كل شيء الذي يحدث بشكل خاطئ في تطبيقك:

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

الصورة الرئيسية من تصميم سيوويرت أوترلو على Unسبل المساعدة