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 اولین چیزی است که در مورد آنها به شما می گوید:
![هشدارهای کنسول DevTools برای انکار و مداخلات.](https://developer.chrome.google.cn/static/blog/reportingobserver/image/devtools-console-warnings-dcb0ee87f92de.png?authuser=0&hl=fa)
به طور طبیعی می توان فکر کرد 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 " آن، حذف مرورگر را علامت گذاری می کند:
![ممیزی Lighthouse برای استفاده از API های منسوخ می تواند از ReportingObserver استفاده کند.](https://developer.chrome.google.cn/static/blog/reportingobserver/image/the-lighthouse-audit-usi-3687157fd0fa1.png?authuser=0&hl=fa)
لایت هاوس در حال حاضر از پروتکل DevTools برای حذف پیام های کنسول و گزارش این مشکلات به توسعه دهندگان استفاده می کند. درعوض، ممکن است جالب باشد که به ReportingObserver
برای گزارشهای منسوخ ساختار یافته و ابردادههای اضافی مانند تاریخ anticipatedRemoval
، سوئیچ کنید.
منابع اضافی :