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

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

אריק בידלמן
Twitter GitHub דף הבית

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

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

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

רקע

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

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

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

באופן טבעי, 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});

האפשרות הזו מצוינת במצבים כמו טעינה מדורגת של ספרייה שמשתמשת ב-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 באתר Unwash.