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

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

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

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 הזה, אזהרות לגבי הוצאה משימוש והתערבות היו זמינות רק בכלי הפיתוח כהודעות במסוף. במיוחד, התערבויות מופעלות רק על ידי אילוצים שונים בעולם האמיתי, כמו תנאי המכשיר והרשת. לכן, יכול להיות שלא תראו את ההודעות האלה בכלל כשאתם מפתחים או בודקים אתר באופן מקומי. ‫ReportingObserver מספק פתרון לבעיה הזו. כך, אם משתמשים נתקלים בבעיות פוטנציאליות, מפתחי אתרים יכולים לקבל התראות על כך.

רקע

לפני זמן מה, כתבתי פוסט בבלוג (Observing your web app) כי הופתעתי לגלות כמה ממשקי 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. אתם נותנים לו קריאה חוזרת (callback), והוא נותן לכם מידע. המידע שמתקבל בקריאה החוזרת הוא רשימה של בעיות שהדף גרם להן:

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

עבודה עתידית

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

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

התמונה הראשית של Sieuwert Otterloo ב-Unsplash.