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 שונה מה-observer הבא: ממשקי 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 יש לך אפשרות נוספת לגלות דברים חדשים ולעקוב אחריהם לבעיות פוטנציאליות באפליקציית האינטרנט שלך. זה אפילו כלי שימושי שעוזר להבין את תקינות ה-codebase שלכם (או את החסר שלו). לשלוח דוחות לקצה עורפי, לדעת על הבעיות בעולם האמיתי שהמשתמשים נתקלים בהן באתר, לעדכן רווח!

עבודה עתידית

בעתיד, אני מקווה ש-ReportingObserver יהפוך ל-API דה-פקטו לזיהוי כל סוגי הבעיות ב-JS. דמיינו ממשק API אחד שיספק את כל המידע שהשתבש באפליקציה:

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

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

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

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