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

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

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

בבדיקה של Lighthouse לגבי שימוש בממשקי API שהוצאו משימוש יכול להיות שייעשה שימוש ב-ReportingObserver.
בדיקת Lighthouse לשימוש בממשקי API שהוצאו משימוש יכולה להשתמש ב-ReportingObserver.

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

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