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

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

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

เกริ่นนำ

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

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

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

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

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

API

API นี้ไม่ต่างจาก 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();

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

คุณสามารถกรองรายงานล่วงหน้าเพื่อดูรายงานบางประเภทเท่านั้น ได้แก่

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 ใช้โปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บเพื่อคัดลอกข้อความในคอนโซลและรายงานปัญหาเหล่านี้ไปยังนักพัฒนาซอฟต์แวร์ ดังนั้น ขอแนะนำให้เปลี่ยนไปใช้ ReportingObserver สำหรับรายงานการเลิกใช้งานที่มีโครงสร้างที่ดีและข้อมูลเมตาเพิ่มเติม เช่น วันที่ anticipatedRemoval

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