ابحث عن واجهات برمجة التطبيقات التي تم إيقافها في تطبيقات الإنتاج.
تتيح لك علامة 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. تخيل أن هناك واجهة برمجة تطبيقات واحدة لاكتشاف كل
الأخطاء التي تحدث في تطبيقك:
- تدخّلات المتصفّح
- عمليات الإيقاف
- انتهاكات سياسة الميزات. يُرجى الاطّلاع على مشكلة Chromium رقم 867471.
- استثناءات وأخطاء JavaScript (تتم إدارتها حاليًا من خلال
window.onerror
). - حالات رفض طلبات JavaScript غير المعالجة (يتم تقديم الخدمة حاليًا من قِبل
window.onunhandledrejection
)
مراجع إضافية:
الصورة الرئيسية من إعداد Sieuwert Otterloo على قناة Unsplash