สรุปคร่าวๆ
มีผู้สังเกตการณ์คนใหม่เข้ามาในเมือง 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();
คุณสามารถใช้โค้ดเรียกกลับเพื่อส่งรายงานไปยังแบ็กเอนด์หรือผู้ให้บริการวิเคราะห์เพื่อทำการวิเคราะห์เพิ่มเติมได้
มีประโยชน์อย่างไร ก่อนหน้านี้ คำเตือนการเลิกใช้งานและการแทรกแซงพร้อมให้บริการในเครื่องมือสำหรับนักพัฒนาเว็บในรูปแบบข้อความในคอนโซลเท่านั้น
โดยเฉพาะอย่างยิ่งการแทรกแซงจะถูกทริกเกอร์จากข้อจำกัดจริงต่างๆ เช่น สภาพของอุปกรณ์และเครือข่าย ดังนั้น คุณอาจไม่เคยเห็นข้อความเหล่านี้เลย
เมื่อพัฒนา/ทดสอบเว็บไซต์ในเครื่อง ReportingObserver
จะช่วยแก้ปัญหานี้ได้ เมื่อผู้ใช้พบปัญหาที่อาจพบในป่า
เราจะได้รับแจ้งเกี่ยวกับปัญหาดังกล่าว
เกริ่นนำ
เมื่อสักครู่ ผมได้เขียนบล็อกโพสต์ ("สังเกตเว็บแอปของคุณ")
เพราะเห็นว่าน่าสนใจเกี่ยวกับจำนวน API มากมายสำหรับการตรวจสอบ
"สิ่งต่างๆ" ที่เกิดขึ้นในเว็บแอป ตัวอย่างเช่น มี API ที่สามารถสังเกต
ข้อมูลเกี่ยวกับ DOM: ResizeObserver
,
IntersectionObserver
, MutationObserver
มี API สำหรับบันทึกการวัดประสิทธิภาพการทำงาน ได้แก่ PerformanceObserver
และยังมี API อื่นๆ อย่าง window.onerror
และ window.onunhandledrejection
แจ้งให้เราทราบอีกด้วยเมื่อเกิดข้อผิดพลาด
แต่ก็มีคําเตือนประเภทอื่นๆ ที่ API ที่มีอยู่เหล่านี้ไม่ได้บันทึกไว้ เมื่อเว็บไซต์ของคุณใช้ API ที่เลิกใช้งานแล้วหรือเกิดร่วมกับการแทรกแซงเบราว์เซอร์ เครื่องมือ DevTools จะแจ้งคุณให้คุณทราบเป็นลำดับแรก ดังนี้
โดยธรรมชาติแล้ว อาจมีคนคิดว่า window.onerror
จะบันทึกคำเตือนเหล่านี้ ไม่ได้
เนื่องจาก window.onerror
จะไม่เริ่มทํางานสําหรับคําเตือนที่สร้างโดย User Agent โดยตรง โดยเริ่มทำงานเมื่อข้อผิดพลาดรันไทม์
(ข้อยกเว้น JS และข้อผิดพลาดทางไวยากรณ์) ที่เกิดจากการเรียกใช้โค้ด
ReportingObserver
รับลูกที่หย่อนลง ซึ่งเป็นวิธีแบบเป็นโปรแกรมสำหรับการแจ้งเตือนเกี่ยวกับคำเตือนที่เบราว์เซอร์ออกให้ เช่น การเลิกใช้งานและการแทรกแซง คุณสามารถใช้รายงานนี้เป็นเครื่องมือการรายงาน และไม่ต้องกังวลว่าผู้ใช้พบปัญหาที่ไม่คาดคิดในเว็บไซต์จริงหรือไม่
API
API นี้ไม่เหมือนกับ API ของ "ผู้สังเกตการณ์" อื่นๆ เช่น 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();
รายงานที่กรองแล้ว
คุณสามารถกรองรายงานล่วงหน้าเพื่อสังเกตการณ์รายงานบางประเภทเท่านั้น ได้แก่
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 ใช้โปรโตคอล DevTools เพื่อคัดลอกข้อความในคอนโซลและรายงานปัญหาเหล่านี้ไปยังนักพัฒนาซอฟต์แวร์ อย่างไรก็ตาม ขอแนะนำให้เปลี่ยนไปใช้ ReportingObserver
สำหรับรายงานการเลิกใช้งานที่มีโครงสร้างที่ดีและข้อมูลเมตาเพิ่มเติม เช่น วันที่ anticipatedRemoval
แหล่งข้อมูลเพิ่มเติม