אמ;לק
יש צופה חדש בעיר! 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();
אפשר להשתמש בקריאה חוזרת (callback) כדי לשלוח דוחות לספק עורפי או לספק ניתוח נתונים לצורך ניתוח מעמיק יותר.
למה זה שימושי? עד עכשיו, אזהרות לגבי הוצאה משימוש והתערבות היו זמינות בכלי הפיתוח רק כהודעות במסוף.
התערבות ספציפית נגרמת רק ממגבלות שונות בעולם האמיתי, כמו תנאי המכשיר והרשת. לכן, יכול להיות שלעולם לא תראו את ההודעות האלה
כשמפתחים או בודקים אתר באופן מקומי. ReportingObserver
מספק את הפתרון לבעיה הזו. כאשר משתמשים נתקלים בבעיות פוטנציאליות, אנחנו יכולים לקבל עליהן הודעה.
מבוא
לפני זמן מה כתבתי פוסט בבלוג ('צפייה באפליקציית האינטרנט שלך') כי גיליתי כמה ממשקי API יש למעקב אחרי ה'דברים' שקורים באפליקציית אינטרנט. לדוגמה, יש ממשקי API שיכולים לזהות מידע על ה-DOM: ResizeObserver
, IntersectionObserver
, MutationObserver
. יש ממשקי API לתיעוד מדידות הביצועים: PerformanceObserver
. ממשקי API אחרים כמו window.onerror
ו-window.onunhandledrejection
גם מודיעים לנו כשמשהו משתבש.
עם זאת, יש סוגים אחרים של אזהרות שלא מתועדים בממשקי ה-API הקיימים. כשהאתר שלכם משתמש ב-API שהוצא משימוש או חוזר בעקבות התערבות בדפדפן, קודם הכלי 'כלי הפיתוח' יודיע לכם עליהם:
באופן טבעי, אדם אחד יחשוב שהאזהרות האלה מתועדות ב-window.onerror
. אבל היא לא!
הסיבה לכך היא ש-window.onerror
לא מופעל בתגובה לאזהרות שנוצרו ישירות על ידי סוכן המשתמש עצמו. הוא מופעל במקרה של שגיאות בזמן הריצה (חריגים של JS ושגיאות תחביר) שנגרמות כתוצאה מהרצת הקוד.
ReportingObserver
מתקדם בכיף. הוא מאפשר פרוגרמטיות לקבל התראות לגבי אזהרות בדפדפן, כמו הוצאות משימוש והתערבות. תוכלו להשתמש בו ככלי דיווח ולחסוך את זמן השינה, תוהה אם המשתמשים נתקלים בבעיות לא צפויות באתר הפעיל.
ממשק API
ה-API הזה שונה מממשקי ה-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();
דוחות מסוננים
אפשר לסנן את הדוחות מראש כך שיוצגו בהם רק סוגים מסוימים של דוחות:
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
מספק דרך נוספת לזיהוי בעיות פוטנציאליות באפליקציית האינטרנט ולמעקב אחריהן. הוא אפילו כלי שימושי להבנת התקינות של ה-codebase (או היעדר בעיות כאלה). שלחו דוחות לקצה עורפי, הכרת הבעיות בעולם האמיתי שהמשתמשים נתקלים בהן באתר שלכם, עדכון קוד, רווחים!
עבודה עתידית
בעתיד, אני מקווה ש-ReportingObserver
יהפוך ל-API דה-פקטו שמיועד להתמודדות עם כל סוגי הבעיות ב-JS. דמיינו ממשק API אחד שבעזרתו אפשר לבדוק את כל מה שקורה באפליקציה:
- התערבות בדפדפן
- הוצאה משימוש
- הפרות של המדיניות בנושא תכונות. פרטים נוספים זמינים בכתובת crbug.com/867471.
- חריגים ושגיאות של JS (שירות כרגע על ידי
window.onerror
). - דחיות של JS שלא טופלו (מטופלות כרגע על ידי
window.onunhandledrejection
)
אני גם שמחה שהכלים משלבים את ReportingObserver
בתהליכי העבודה שלהם. Lighthouse הוא דוגמה לכלי שכבר מסמן הוצאה משימוש של דפדפנים כשמריצים את הביקורת הימנעות מממשקי API שהוצאו משימוש:
כרגע נעשה שימוש ב-DevTools Protocol כדי למחוק הודעות במסוף ולדווח על הבעיות האלה למפתחים. במקום זאת, יכול להיות שיהיה כדאי לעבור ל-ReportingObserver
כדי ליהנות מדוחות ההוצאה משימוש ובמטא-נתונים נוספים כמו תאריך anticipatedRemoval
.
מקורות מידע נוספים: