요약
마을에 새로운 관찰자가 나타났어요! 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();
콜백은 추가 분석을 위해 백엔드 또는 분석 제공업체에 보고서를 전송하는 데 사용할 수 있습니다.
왜 유용한가요? 지금까지는 지원 중단 및 개입 경고가 DevTools에서만 콘솔 메시지로 제공되었습니다.
특히 개입은 기기 및 네트워크 조건과 같은 다양한 실제 제약 조건에 의해서만 트리거됩니다. 따라서 로컬에서 사이트를 개발/테스트할 때는
이러한 메시지가 표시되지 않을 수도 있습니다. ReportingObserver
는 이 문제를 해결하는 방법을 제공합니다. 사용자가 실제로 잠재적인 문제를 경험하면 이에 관한 알림을 받을 수 있습니다.
소개
앞서 블로그 게시물 ('웹 앱 관찰')을 작성했는데, 웹 앱에서 발생하는 '항목'을 모니터링하는 API가 몇 개나 있는지 살펴보았기 때문입니다. 예를 들어 ResizeObserver
, IntersectionObserver
, MutationObserver
등 DOM에 관한 정보를 관찰할 수 있는 API가 있습니다. 성능 측정을 캡처하는 API는 다음과 같습니다. PerformanceObserver
window.onerror
및 window.onunhandledrejection
와 같은 다른 API도 문제가 발생하면 Google에 알려줍니다.
그러나 이러한 기존 API에서 캡처하지 않는 다른 유형의 경고도 있습니다. 사이트에서 지원 중단된 API를 사용하거나 브라우저의 개입이 발생하면 DevTools에서 먼저 이를 알려줍니다.
당연히 window.onerror
가 이러한 경고를 캡처한다고 생각할 것입니다. 그렇지 않습니다.
이는 사용자 에이전트 자체에서 직접 생성된 경고에는 window.onerror
가 실행되지 않기 때문입니다. 코드 실행으로 인해 발생한 런타임 오류(JS 예외 및 구문 오류)가 발생하면 실행됩니다.
ReportingObserver
가 여유를 확보합니다. 지원 중단 및 개입과 같이 브라우저에서 발생한 경고에 관해 프로그래매틱 방식으로 알림을 제공합니다. 보고서 도구로 사용하면 사용자가 라이브 사이트에서 예상치 못한 문제가 발생하는지 궁금해하는 상황을 줄일 수 있습니다.
API
이 API는 IntersectionObserver
및 ResizeObserver
와 같은 다른 '관찰자' API와 다릅니다. 콜백을 주면
정보를 제공합니다. 콜백이 수신하는 정보는 페이지에서 발생한 문제의 목록입니다.
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});
이는 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
가 JS에서 모든 유형의 문제를 포착하는 실질적인 API가 되기를 바랍니다. 앱에서 발생하는 모든 문제를 포착하는 하나의 API가 있다고 가정해 보겠습니다.
- 브라우저 개입
- 지원 중단
- 기능 정책 위반 crbug.com/867471을 참고하세요.
- JS 예외 및 오류 (현재
window.onerror
에서 서비스됨) - 처리되지 않은 JS 프로미스 거부 (현재
window.onunhandledrejection
에서 서비스됨)
ReportingObserver
를 워크플로에 통합하는 도구도 흥미롭습니다. Lighthouse는 '지원 중단된 API 방지' 감사를 실행할 때 이미 브라우저 지원 중단을 표시하는 도구의 예입니다.
Lighthouse는 현재 DevTools 프로토콜을 사용하여 콘솔 메시지를 스크래핑하고 이러한 문제를 개발자에게 보고합니다. 대신 ReportingObserver
로 전환하여 체계적으로 구성된 지원 중단 보고서 및 anticipatedRemoval
날짜와 같은 추가 메타데이터를 확인하는 것이 좋습니다.
추가 리소스: