ค้นหา 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();
ใช้โค้ดเรียกกลับเพื่อส่งรายงานไปยังแบ็กเอนด์หรือผู้ให้บริการวิเคราะห์เพื่อทำการวิเคราะห์
มีประโยชน์อย่างไร ในระหว่างนี้ คำเตือนการเลิกใช้งานและการแทรกแซงจะมีเฉพาะในเครื่องมือสำหรับนักพัฒนาเว็บเป็นข้อความในคอนโซลเท่านั้นจนกว่าจะถึง API นี้ โดยเฉพาะการแทรกแซง
ที่เกิดจากข้อจำกัดจริงต่างๆ เช่น สภาพของอุปกรณ์และเครือข่าย ดังนั้น คุณอาจไม่เคยเห็นข้อความเหล่านี้เลยเมื่อพัฒนา/ทดสอบเว็บไซต์ในเครื่อง 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});
ตัวเลือกนี้เหมาะสำหรับสถานการณ์อย่างเช่นการโหลดแบบ 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 ตัวหนึ่งที่จะตรวจจับ
ทุกอย่างผิดปกติในแอป
- การแทรกแซงเบราว์เซอร์
- การเลิกใช้งาน
- การละเมิดนโยบายฟีเจอร์ ดูปัญหา Chromium #867471
- ข้อยกเว้นและข้อผิดพลาดของ JS (ปัจจุบันให้บริการโดย
window.onerror
) - การปฏิเสธสัญญา JS ที่ไม่มีการจัดการ (ให้บริการโดย
window.onunhandledrejection
ในขณะนี้)
แหล่งข้อมูลเพิ่มเติม