ReportingObserver API: نظرة على كود صفحات الويب من منظور جديد

المادة ، التي ننشر ترجمتها اليوم ، مخصصة لواجهة ReportingObserver API ، وهي آلية تتيح لك التعرف على استخدام الميزات القديمة ، والتي يتداخل فيها المتصفح مع عمل رمز الصفحة. ReportingObserver جزء من مواصفات W3C هذه .

لماذا هذا مطلوب؟

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

ربما لا يعرف زائر الموقع أي شيء عن تطوير الويب ، لذلك عندما يبدأ الموقع في التصرف بشكل غريب ، من غير المحتمل أن ينظر إلى وحدة التحكم من أجل محاولة فهم المشكلة ، والتي يتم التعبير عنها كرسالة تبدأ بـ [Intervention] أو [Deprecation] .

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

إليك ما يبدو عليه العمل مع ReportingObserver :

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

لنتحدث عن كيفية استخدام واجهة برمجة التطبيقات هذه.

بنية API ReportingObserver

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

من أجل استخدام ReportingObserver API ، تحتاج إلى إنشاء كائن المراقب المقابل من خلال تزويده باستدعاء ، عندما يتم استدعاؤه ، سيتم إرسال التقارير إليه في شكل قائمة بالمشاكل التي تمت مواجهتها في الصفحة. لقد قمنا بالفعل بمراجعة التعليمات البرمجية اللازمة للعمل مع ReportingObserver . الآن دعونا نلقي نظرة على مثال للبيانات التي يتم إرسالها إلى رد الاتصال:

 const observer = new ReportingObserver((reports, observer) => { for (const report of reports) {   // → report.id === 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload'   // → report.type === 'deprecation'   // → report.url === 'https://reporting-observer-api-demo.glitch.me'   // → report.body.message === 'Synchronous XMLHttpRequest is deprecated...' } }}); observer.observe(); 

عند العمل مع ReportingObserver يمكنك تصفية التقارير. على سبيل المثال ، هنا تصميم يسمح لك بتلقي تقارير فقط حول استخدام الميزات القديمة:

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

إذا قمت ، عند إنشاء كائن ReportingObserver ، بتمرير الخاصية buffered: true ، فسيتيح ذلك رؤية التقارير التي تم إنشاؤها قبل إنشاء مثل هذا الكائن:

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

لإيقاف مراقبة التقارير حول استخدام الميزات القديمة أو حول تدخلات المتصفح في الشفرة ، يمكنك تعطيل كائن المراقب:

 observer.disconnect(); 

مثال API ReportingObserver

فيما يلي مثال على استخدام كائن مراقب ReportingObserver . هنا رسم تخطيطي لتنظيم إرسال تقرير إلى الخادم:

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

الملخص

تسمح API ReportingObserver للمطور بتوسيع نطاق المعلومات التي يتلقاها حول الأخطاء التي تحدث في مشاريعه عندما يعمل المستخدمون الحقيقيون معهم. واجهة برمجة التطبيقات هذه متاحة في Chrome 69 ، هناك معلومات تفيد بأن هذه الميزة ستظهر في Edge. ما إذا كان من المخطط تنفيذ شيء مشابه في Firefox أو Safari لا يزال غير معروف.

يمكن العثور على تفاصيل حول ReportingObserver هنا وهنا .

أعزائي القراء! ما رأيك في ReportingObserver API؟