זיהוי תקינות הקוד באמצעות ReportingObserver API

חיפוש ממשקי API שהוצאו משימוש באפליקציות בסביבת הייצור.

הדוח ReportingObserver מאפשר לכם לדעת מתי האתר שלכם משתמש ב-API שהוצא משימוש או נתקל בהתערבות של הדפדפן. הפונקציונליות הבסיסית הושקה במקור ב-Chrome 69. החל מגרסה 84 של Chrome, ניתן להשתמש בו לעובדים.

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    console.log(report.type, report.url, report.body);
  }
}, {buffered: true});

observer.observe();

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

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

רקע

לפני זמן מה כתבתי פוסט בבלוג (צפייה באפליקציית האינטרנט שלך) כי זה מעניין כמה ממשקי API יש למעקב אחרי "הדברים" שקורים באפליקציית אינטרנט. לדוגמה, יש ממשקי API שיכולים לזהות מידע על ה-DOM: ResizeObserver, IntersectionObserver, MutationObserver. PerformanceObserver מתעדת מדידות ביצועים. שיטות כמו window.onerror ו-window.onunhandledrejection מאפשרות לנו לדעת גם כשמשהו משתבש.

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

אזהרות במסוף כלי הפיתוח לגבי הוצאות משימוש והתערבויות.
אזהרות שהופעלו על ידי הדפדפן במסוף כלי הפיתוח.

נראה ש-window.onerror מתעד את האזהרות האלה. לא. הסיבה לכך היא ש-window.onerror לא מופעל עבור אזהרות שנוצרות ישירות על ידי סוכן המשתמש עצמו. הוא מופעל במקרה של שגיאות בסביבת זמן הריצה (חריגות של JavaScript ושגיאות תחביר) שנגרמות כתוצאה מהרצת קוד.

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

ה-API

ReportingObserver שונה מממשקי ה-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();

דוחות מסוננים

אפשר לסנן מראש את הדוחות כך שיוצגו בהם רק סוגים מסוימים של דוחות. נכון לעכשיו, יש שני סוגים של דוחות: 'deprecation' ו-'intervention'.

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

דוגמאות

דיווח על התערבויות בדפדפן לספק ניתוח נתונים

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 בפועל לזיהוי כל סוגי הבעיות ב-JavaScript. נסו לדמיין ממשק API אחד שיכול לזהות כל בעיה באפליקציה:

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

תמונה ראשית (Hero) מאת Sieuwert Otterloo ב-Unspark.