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

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

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

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 PerformanceObserver บันทึกการวัดประสิทธิภาพ และเมธอดอย่าง window.onerror และ window.onunhandledrejection ยังสามารถแจ้งให้เราทราบได้เมื่อเกิดข้อผิดพลาด

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

คำเตือนของคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บเกี่ยวกับการเลิกใช้งานและการแทรกแซง
คำเตือนที่เริ่มต้นจากเบราว์เซอร์ในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บ

ผู้ใช้อาจคิดว่า window.onerror จะบันทึกคำเตือนเหล่านี้ ไม่ เนื่องจาก window.onerror จะไม่ทริกเกอร์คำเตือนที่สร้างขึ้นโดย User Agent โดยตรง โดยจะทริกเกอร์เมื่อมีข้อผิดพลาดรันไทม์ (ข้อยกเว้น JavaScript และข้อผิดพลาดไวยากรณ์) ที่เกิดจากการเรียกใช้โค้ด

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

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

รายงานที่กรอง

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

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

หยุดสังเกตโดยใช้เมธอด 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