ค้นหา API ที่เลิกใช้งานแล้วในแอปเวอร์ชันที่ใช้งานจริง
ReportingObserver
แจ้งให้คุณทราบเมื่อเว็บไซต์ใช้ API ที่เลิกใช้งานแล้วหรือพบการแทรกแซงของเบราว์เซอร์ ฟังก์ชันพื้นฐานเปิดตัวครั้งแรกใน Chrome 69 ตั้งแต่ Chrome 84 เป็นต้นไป คุณสามารถใช้งานใน Worker ได้
const observer = new ReportingObserver((reports, observer) => {
for (const report of reports) {
console.log(report.type, report.url, report.body);
}
}, {buffered: true});
observer.observe();
ใช้ Callback เพื่อส่งรายงานไปยังแบ็กเอนด์หรือผู้ให้บริการวิเคราะห์เพื่อทำการวิเคราะห์
เหตุใดจึงมีประโยชน์ ก่อนหน้านี้ คำเตือนการเลิกใช้งานและการแทรกแซงมีให้บริการใน 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
คุณจะโทรกลับได้
และให้ข้อมูลแก่คุณ ข้อมูลที่ได้รับจาก 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});
ตัวเลือกนี้เหมาะสําหรับสถานการณ์ต่างๆ เช่น การโหลดแบบเลื่อนเวลาของไลบรารีที่ใช้ 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 เดียวที่จะตรวจจับทุกอย่างที่ผิดพลาดในแอปของคุณ
- การแทรกแซงเบราว์เซอร์
- การเลิกใช้งาน
- การละเมิดนโยบายฟีเจอร์ ดูปัญหา Chromium #867471
- ข้อยกเว้นและข้อผิดพลาดของ JS (ให้บริการโดย
window.onerror
) - การปฏิเสธสัญญา JS ที่ไม่ได้รับการจัดการ (ปัจจุบันให้บริการโดย
window.onunhandledrejection
)
แหล่งข้อมูลเพิ่มเติม
รูปภาพหลักโดย Sieuwert Otterloo จาก Unsplash