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();

אפשר להשתמש בקריאה החוזרת כדי לשלוח דוחות לקצה העורפי או לספק ניתוח נתונים לצורך ניתוח נוסף.

למה זה מועיל? עד עכשיו, אזהרות על הוצאה משימוש ועל התערבות היו זמינות רק ב-DevTools כהודעות במסוף. התערבויות, במיוחד, מופעלות רק עקב אילוצים שונים בעולם האמיתי, כמו תנאי המכשיר והרשת. לכן, יכול להיות שלא תראו את ההודעות האלה בכלל כשאתם מפתחים או בודקים אתר באופן מקומי. 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 האחרים מסוג 'משקיף', כמו 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});

היא שימושית במצבים כמו טעינת ספרייה באיטרציה (lazy-loading) שמשתמשת ב-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 שלא טופלו (כרגע window.onunhandledrejection מטפל בבעיה הזו)

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

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

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

• מפרט W3C
• הרשומה ב-chromestatus.com