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 اولین کسی است که در مورد آنها به شما می گوید:
به طور طبیعی می توان فکر کرد 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 را تصور کنید تا هر چیزی را که در برنامه شما اشتباه پیش میرود، پیدا کند:
- مداخلات مرورگر
- تحقیرها
- نقض خط مشی ویژگی به شماره ۸۶۷۴۷۱ Chromium مراجعه کنید.
- استثناها و خطاهای JS (در حال حاضر توسط
window.onerror
سرویس می شود). - رد وعدههای JS Unhandled (در حال حاضر توسط
window.onunhandledrejection
سرویس میشود)
منابع اضافی :
تصویر قهرمان توسط Sieuwert Otterloo در Unsplash .