זיהוי תקינות הקוד באמצעות 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();

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

למה זה שימושי? עד ל-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});

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

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

תמונה ראשית (Hero) מאת סווארט אוטרלו ב-Un אימיילים.