ดูประสิทธิภาพของโค้ดด้วย 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();

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

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

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

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