ReportingObserver: سلامت کد خود را بدانید

Philip Walton

TL; DR

یک ناظر جدید در شهر وجود دارد! ReportingObserver یک API جدید است که به شما امکان می‌دهد وقتی سایت شما از یک API منسوخ استفاده می‌کند یا با مداخله مرورگر مواجه می‌شود، مطلع شوید:

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

observer.observe();

پاسخ تماس را می توان برای ارسال گزارش ها به یک شرکت پشتیبان یا ارائه دهنده تجزیه و تحلیل برای تجزیه و تحلیل بیشتر استفاده کرد.

چرا مفید است؟ تا کنون، هشدارهای لغو و مداخله فقط در DevTools به عنوان پیام های کنسول در دسترس بود. مداخلات، به ویژه، تنها توسط محدودیت‌های مختلف دنیای واقعی مانند شرایط دستگاه و شبکه ایجاد می‌شوند. بنابراین، ممکن است هرگز این پیام ها را هنگام توسعه/تست یک سایت به صورت محلی مشاهده نکنید. ReportingObserver راه حلی برای این مشکل ارائه می دهد. هنگامی که کاربران با مشکلات احتمالی در طبیعت مواجه می شوند، می توانیم در مورد آنها مطلع شویم.

مقدمه

مدتی پیش، من یک پست وبلاگ نوشتم (" مشاهده برنامه وب شما ") زیرا برایم جالب بود که تعداد API های زیادی برای نظارت بر "موارد"ی که در یک برنامه وب اتفاق می افتد وجود دارد. به عنوان مثال، APIهایی وجود دارند که می توانند اطلاعات مربوط به DOM را مشاهده کنند: ResizeObserver ، IntersectionObserver ، MutationObserver . APIهایی برای اندازه گیری عملکرد وجود دارد: PerformanceObserver . سایر APIها مانند window.onerror و window.onunhandledrejection حتی زمانی که مشکلی پیش می‌آید به ما اطلاع می‌دهند.

با این حال، انواع دیگری از هشدارها وجود دارد که توسط این API های موجود دریافت نمی شوند. هنگامی که سایت شما از یک API منسوخ استفاده می کند یا در مقابل یک مداخله مرورگر قرار می گیرد، DevTools اولین چیزی است که در مورد آنها به شما می گوید:

به طور طبیعی می توان فکر کرد window.onerror این هشدارها را نشان می دهد. اینطور نیست! دلیلش این است که window.onerror برای اخطارهایی که مستقیماً توسط خود عامل کاربر ایجاد می شود فعال نمی شود. برای خطاهای زمان اجرا (استثناهای JS و خطاهای نحوی) ناشی از اجرای کد شما فعال می شود.

ReportingObserver سستی را برطرف می کند. این یک روش برنامه‌ریزی برای اطلاع‌رسانی در مورد هشدارهای صادر شده توسط مرورگر مانند لغو و مداخلات ارائه می‌کند. می‌توانید از آن به‌عنوان یک ابزار گزارش‌دهی استفاده کنید و خواب کمتری را از دست بدهید و فکر کنید که آیا کاربران با مشکلات غیرمنتظره‌ای در سایت شما مواجه می‌شوند.

API

API بی شباهت به سایر APIهای "ناظر" مانند 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();

گزارشات فیلتر شده

گزارش‌ها می‌توانند از پیش فیلتر شوند تا فقط انواع گزارش‌های خاصی را مشاهده کنند:

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

گزارش های بافر شده

گزینه buffered: true زمانی بسیار مفید است که می‌خواهید گزارش‌هایی را ببینید که قبل از ایجاد مشاهده‌گر ایجاد شده‌اند:

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

برای موقعیت هایی مانند بارگذاری تنبل کتابخانه ای که از ReportingObserver استفاده می کند عالی است. مشاهده‌گر دیر اضافه می‌شود، اما هیچ چیزی را که قبلاً در بارگذاری صفحه رخ داده است، از دست نمی‌دهید .

مشاهده را متوقف کنید

بله! این یک روش disconnect دارد:

observer.disconnect(); // Stop the observer from collecting reports.

نمونه ها

مثال - گزارش مداخلات مرورگر به یک ارائه دهنده تجزیه و تحلیل:

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

observer.observe();

به عنوان مثال - هنگامی که APIها قرار است حذف شوند مطلع شوید:

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 به API واقعی برای گرفتن انواع مسائل در JS تبدیل شود. یک API را تصور کنید تا هر چیزی را که در برنامه شما اشتباه پیش می‌رود، پیدا کند:

• مداخلات مرورگر
• تحقیرها
• نقض خط مشی ویژگی به crbug.com/867471 مراجعه کنید.
• استثناها و خطاهای JS (در حال حاضر توسط window.onerror سرویس می شود).
• رد وعده‌های JS Unhandled (در حال حاضر توسط window.onunhandledrejection سرویس می‌شود)

من همچنین در مورد ابزارهایی که ReportingObserver در جریان کاری خود ادغام می کنند هیجان زده هستم. Lighthouse نمونه ای از ابزاری است که قبلاً هنگام اجرای ممیزی " Avoids Deprecated APIs " آن، حذف مرورگر را علامت گذاری می کند:

لایت هاوس در حال حاضر از پروتکل DevTools برای حذف پیام های کنسول و گزارش این مشکلات به توسعه دهندگان استفاده می کند. درعوض، ممکن است جالب باشد که به ReportingObserver برای گزارش‌های منسوخ ساختار یافته و ابرداده‌های اضافی مانند تاریخ anticipatedRemoval ، سوئیچ کنید.

منابع اضافی :

• مشخصات W3c
• ورودی chromestatus.com