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

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

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

เกริ่นนำ

เมื่อสักครู่ ผมได้เขียนบล็อกโพสต์ ("สังเกตเว็บแอปของคุณ") เพราะเห็นว่าน่าสนใจเกี่ยวกับจำนวน API มากมายสำหรับการตรวจสอบ "สิ่งต่างๆ" ที่เกิดขึ้นในเว็บแอป ตัวอย่างเช่น มี API ที่สามารถสังเกต ข้อมูลเกี่ยวกับ DOM: ResizeObserver, IntersectionObserver, MutationObserver มี API สำหรับบันทึกการวัดประสิทธิภาพการทำงาน ได้แก่ PerformanceObserver และยังมี API อื่นๆ อย่าง window.onerror และ window.onunhandledrejection แจ้งให้เราทราบอีกด้วยเมื่อเกิดข้อผิดพลาด

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

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

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

เหมาะสำหรับสถานการณ์อย่างเช่นการโหลดแบบ Lazy Loading ที่ใช้ 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 ที่เลิกใช้งานแล้ว"

การตรวจสอบ Lighthouse สำหรับการใช้ API ที่เลิกใช้งานแล้วอาจใช้ ReportingObserver ได้
การตรวจสอบ Lighthouse สำหรับการใช้ API ที่เลิกใช้งานแล้วสามารถใช้ ReportingObserver ได้

ปัจจุบัน Lighthouse ใช้โปรโตคอล DevTools เพื่อคัดลอกข้อความในคอนโซลและรายงานปัญหาเหล่านี้ไปยังนักพัฒนาซอฟต์แวร์ อย่างไรก็ตาม ขอแนะนำให้เปลี่ยนไปใช้ ReportingObserver สำหรับรายงานการเลิกใช้งานที่มีโครงสร้างที่ดีและข้อมูลเมตาเพิ่มเติม เช่น วันที่ anticipatedRemoval

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