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

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

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

ตัวเลือกนี้เหมาะสําหรับสถานการณ์ต่างๆ เช่น การโหลดแบบเลื่อนเวลาของไลบรารีที่ใช้ 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