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

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

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

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    console.log(report.type, report.url, report.body);
  }
}, {buffered: true});

observer.observe();

ใช้โค้ดเรียกกลับเพื่อส่งรายงานไปยังแบ็กเอนด์หรือผู้ให้บริการวิเคราะห์เพื่อทำการวิเคราะห์

มีประโยชน์อย่างไร ในระหว่างนี้ คำเตือนการเลิกใช้งานและการแทรกแซงจะมีเฉพาะในเครื่องมือสำหรับนักพัฒนาเว็บเป็นข้อความในคอนโซลเท่านั้นจนกว่าจะถึง 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 ไม่เหมือนกับ 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();

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

คุณสามารถกรองรายงานล่วงหน้าเพื่อสังเกตการณ์รายงานบางประเภทเท่านั้น ปัจจุบันมีรายงาน 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