ReportingObserver: חשוב לדעת את תקינות הקוד

Philip Walton

אמ;לק

יש צופה חדש בעיר! 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 אחד שבעזרתו אפשר לבדוק את כל מה שקורה באפליקציה:

אני גם שמחה שהכלים משלבים את ReportingObserver בתהליכי העבודה שלהם. Lighthouse הוא דוגמה לכלי שכבר מסמן הוצאה משימוש של דפדפנים כשמריצים את הביקורת הימנעות מממשקי API שהוצאו משימוש:

בביקורת של Lighthouse לגבי שימוש בממשקי API שהוצאו משימוש, ניתן להשתמש ב-ReportingObserver.
ניתן להשתמש ב-ReportingObserver במהלך הביקורת של Lighthouse לגבי שימוש בממשקי API שהוצאו משימוש.

כרגע נעשה שימוש ב-DevTools Protocol כדי למחוק הודעות במסוף ולדווח על הבעיות האלה למפתחים. במקום זאת, יכול להיות שיהיה כדאי לעבור ל-ReportingObserver כדי ליהנות מדוחות ההוצאה משימוש ובמטא-נתונים נוספים כמו תאריך anticipatedRemoval.

מקורות מידע נוספים: