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

API های منسوخ شده را در برنامه های تولیدی خود پیدا کنید.

ReportingObserver زمانی که سایت شما از یک API منسوخ استفاده می کند یا با مداخله مرورگر مواجه می شود، به شما امکان می دهد بدانید. عملکرد اصلی در ابتدا در Chrome 69 قرار گرفت. از Chrome 84، می توان از آن در کارگران استفاده کرد.

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

observer.observe();

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

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

پس زمینه

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

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

هشدارهای DevTools Console برای لغو و مداخلات.
هشدارهای آغاز شده توسط مرورگر در DevTools Console.

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

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

API

ReportingObserver بی شباهت به سایر APIهای 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();

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

منابع اضافی :

تصویر قهرمان توسط Sieuwert Otterloo در Unsplash .