ดูประสิทธิภาพของโค้ดด้วย ReportingObserver API

ค้นหา API ที่เลิกใช้งานแล้วในแอปเวอร์ชันที่ใช้งานจริง

ReportingObserver จะแจ้งให้คุณทราบเมื่อเว็บไซต์ใช้ API ที่เลิกใช้งานแล้วหรือพบการแทรกแซงของเบราว์เซอร์ ฟังก์ชันพื้นฐานนี้เปิดตัวครั้งแรกใน Chrome 69 ตั้งแต่ Chrome 84 เป็นต้นไป คุณจะใช้ API นี้ใน Worker ได้

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 จะไม่เริ่มทำงานสำหรับคำเตือนที่สร้างขึ้นโดย User Agent โดยตรง โดยจะเริ่มทำงานเมื่อเกิดข้อผิดพลาดขณะรันไทม์ (ข้อยกเว้น JavaScript และข้อผิดพลาดทางไวยากรณ์) ที่เกิดจากการเรียกใช้โค้ด

ReportingObserver จะช่วยแบ่งเบาภาระ ซึ่งเป็นวิธีแบบเป็นโปรแกรมในการรับการแจ้งเตือนเกี่ยวกับคำเตือนที่เบราว์เซอร์แสดง เช่น การเลิกใช้งานและการแทรกแซง คุณสามารถใช้เป็นเครื่องมือการรายงานและไม่ต้องกังวลว่าผู้ใช้จะพบปัญหาที่ไม่คาดคิดในเว็บไซต์ที่เผยแพร่อยู่หรือไม่

API

ReportingObserver ไม่แตกต่างจาก Observer API อื่นๆ เช่น IntersectionObserver และ ResizeObserver คุณส่ง Callback ให้เมธอด แล้วเมธอดจะให้ข้อมูลแก่คุณ ข้อมูลที่ 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();

รายงานที่กรองแล้ว

คุณสามารถกรองรายงานล่วงหน้าเพื่อดูเฉพาะรายงานบางประเภทได้ ขณะนี้ มีรายงาน 2 ประเภท ได้แก่ '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 ระบบจะเพิ่ม Observer ในภายหลัง แต่คุณจะไม่พลาดสิ่งที่เกิดขึ้นก่อนหน้านี้ในการโหลดหน้าเว็บ

หยุดสังเกตการณ์

หยุดสังเกตการณ์โดยใช้เมธอด 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 เดียวที่ตรวจจับทุกอย่าง ที่ผิดพลาดในแอปของคุณ

แหล่งข้อมูลเพิ่มเติม

รูปภาพหลักโดย Sieuwert Otterloo ใน Unsplash