ค้นหา 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 ที่เลิกใช้งานแล้วหรือทำงานกับ การแทรกแซงเบราว์เซอร์ เครื่องมือสำหรับนักพัฒนาเว็บเป็นรายแรกๆ ที่บอกคุณเกี่ยวกับ ดังนี้
![คำเตือนของคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บเกี่ยวกับการเลิกใช้งานและการแทรกแซง](https://developer.chrome.com/static/docs/capabilities/web-apis/reporting-observer/image/devtools-console-warnings-7e65d798d802f.png?authuser=1&hl=th)
ปกติแล้วคนหนึ่งจะคิดว่า 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 ตัวหนึ่งจะตรวจจับทุกอย่างได้
ที่ผิดพลาดในแอป ให้ทำดังนี้
- การแทรกแซงเบราว์เซอร์
- การเลิกใช้งาน
- การละเมิดนโยบายฟีเจอร์ โปรดดูปัญหา Chromium #867471
- ข้อยกเว้นและข้อผิดพลาดของ JS (ให้บริการโดย
window.onerror
) - การปฏิเสธสัญญา JS ที่ไม่มีการจัดการ (ให้บริการโดย
window.onunhandledrejection
)
แหล่งข้อมูลเพิ่มเติม