ReportingObserver: ทราบประสิทธิภาพของโค้ด

Philip Walton

TL;DR

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

API

API นั้นไม่เหมือนกับ "ผู้สังเกตการณ์" ตัวอื่นๆ API เช่น ในชื่อ 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

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