สรุปคร่าวๆ
เมืองมีผู้สังเกตการณ์คนใหม่! ReportingObserver
คือ API ใหม่ที่แจ้งให้ทราบเมื่อเว็บไซต์ใช้ API ที่เลิกใช้งานแล้วหรือประสบปัญหาการแทรกแซงเบราว์เซอร์
const observer = new ReportingObserver(
(reports, observer) => {
for (const report of reports) {
console.log(report.type, report.url, report.body);
}
},
{buffered: true}
);
observer.observe();
คุณใช้ Callback เพื่อส่งรายงานไปยังแบ็กเอนด์หรือผู้ให้บริการวิเคราะห์เพื่อวิเคราะห์เพิ่มเติมได้
มีประโยชน์อย่างไร ก่อนหน้านี้ คำเตือนการเลิกใช้งานและการแทรกแซงมีเฉพาะในเครื่องมือสำหรับนักพัฒนาเว็บเป็นข้อความในคอนโซลเท่านั้น
โดยเฉพาะอย่างยิ่ง การแทรกแซงจะเกิดขึ้นจากข้อจำกัดต่างๆ ที่เกิดขึ้นจริงเท่านั้น เช่น เงื่อนไขของอุปกรณ์และเครือข่าย คุณจึงอาจไม่เคยเห็นข้อความเหล่านี้เลยเมื่อพัฒนา/ทดสอบเว็บไซต์ในเครื่อง ReportingObserver
มีวิธีแก้ปัญหานี้ เมื่อผู้ใช้พบปัญหาที่อาจเกิดขึ้นในชีวิตจริง
เราจะได้รับแจ้งเกี่ยวกับปัญหาดังกล่าว
เกริ่นนำ
ก่อนหน้านี้ เราได้เขียนบล็อกโพสต์ ("สังเกตเว็บแอปของคุณ")
เพราะพบว่าน่าสนใจถึงจำนวน API ที่ใช้สำหรับตรวจสอบ "สิ่งต่างๆ" ที่เกิดขึ้นในเว็บแอป เช่น มี API ที่สังเกตข้อมูลเกี่ยวกับ DOM ได้ ซึ่งได้แก่ ResizeObserver
,IntersectionObserver
, MutationObserver
มี API สำหรับการจับ
การวัดประสิทธิภาพ: PerformanceObserver
นอกจากนี้ API อื่นๆ เช่น window.onerror
และ window.onunhandledrejection
ยังแจ้งให้เราทราบเมื่อเกิดข้อผิดพลาดอีกด้วย
อย่างไรก็ตาม มีคำเตือนประเภทอื่นที่ API ที่มีอยู่เหล่านี้จะไม่บันทึกไว้ เมื่อเว็บไซต์ของคุณใช้ API ที่เลิกใช้งานแล้วหรือประสบปัญหาการแทรกแซงเบราว์เซอร์ เครื่องมือสำหรับนักพัฒนาเว็บจะแจ้งให้ทราบเกี่ยวกับเครื่องมือดังกล่าวเป็นอันดับแรก
ปกติแล้วคนหนึ่งจะคิดว่า window.onerror
บันทึกคำเตือนเหล่านี้ได้ แต่ไม่เป็นเช่นนั้น!
นั่นเป็นเพราะ window.onerror
ไม่เริ่มทำงานเมื่อมีคำเตือนที่ User Agent สร้างขึ้นโดยตรง ซึ่งจะเริ่มทำงานสำหรับข้อผิดพลาดด้านรันไทม์
(ข้อยกเว้น JS และข้อผิดพลาดทางไวยากรณ์) ที่เกิดจากการเรียกใช้โค้ด
ReportingObserver
รับ Slack ซึ่งเป็นวิธีทางโปรแกรมสำหรับการแจ้งเตือนเกี่ยวกับคำเตือนที่ออกโดยเบราว์เซอร์ เช่น การเลิกใช้งานและการแทรกแซง คุณสามารถใช้ Google Analytics เป็นเครื่องมือรายงานและลดเวลานอนลงหากสงสัยว่าผู้ใช้เจอปัญหาที่ไม่คาดคิดในเว็บไซต์ที่เผยแพร่อยู่หรือเปล่า
API
API นี้ไม่ต่างจาก 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();
รายงานที่กรอง
คุณสามารถกรองรายงานล่วงหน้าเพื่อดูรายงานบางประเภทเท่านั้น ได้แก่
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(); // Stop the observer from collecting reports.
ตัวอย่าง
ตัวอย่าง - รายงานการแทรกแซงเบราว์เซอร์ให้ผู้ให้บริการวิเคราะห์ทราบ
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 ตัวจริงสำหรับการตรวจจับปัญหาทุกประเภทใน JS ลองนึกภาพว่า API ตัวหนึ่งจะตรวจจับทุกอย่าง
ที่ผิดพลาดในแอปของคุณ
- การแทรกแซงเบราว์เซอร์
- การเลิกใช้งาน
- การละเมิดนโยบายฟีเจอร์ โปรดดูที่ crbug.com/867471
- ข้อยกเว้นและข้อผิดพลาดของ JS (ให้บริการโดย
window.onerror
) - การปฏิเสธสัญญา JS ที่ไม่มีการจัดการ (ให้บริการโดย
window.onunhandledrejection
)
ฉันยังตื่นเต้นกับเครื่องมือที่ผสานรวม ReportingObserver
เข้ากับเวิร์กโฟลว์ด้วย Lighthouse คือตัวอย่างของเครื่องมือที่แจ้งการเลิกใช้งานเบราว์เซอร์ไปแล้วเมื่อคุณเรียกใช้การตรวจสอบ "หลีกเลี่ยง API ที่เลิกใช้งานแล้ว"
ปัจจุบัน Lighthouse ใช้โปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บเพื่อคัดลอกข้อความในคอนโซลและรายงานปัญหาเหล่านี้ไปยังนักพัฒนาซอฟต์แวร์ ดังนั้น ขอแนะนำให้เปลี่ยนไปใช้ ReportingObserver
สำหรับรายงานการเลิกใช้งานที่มีโครงสร้างที่ดีและข้อมูลเมตาเพิ่มเติม เช่น วันที่ anticipatedRemoval
แหล่งข้อมูลเพิ่มเติม