ReportingObserver: 코드 상태 파악

Philip Walton

요약

마을에 새로운 관찰자가 나타났어요! ReportingObserver는 사이트에서 지원 중단된 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 제공 혜택 해답을 찾을 수 있습니다. 사용자가 현장에서 잠재적인 문제를 경험하는 경우 알림을 받을 수 있습니다

소개

예전에 블로그 게시물('웹 앱 관찰')을 작성했습니다. Cloud Monitoring을 모니터링하는 API가 얼마나 많은지 '물건' 웹 앱에서 발생하는 일입니다 예를 들어, 현재 상태와 DOM 정보: ResizeObserver, IntersectionObserver, MutationObserver 캡처를 위한 API PerformanceObserver. 기타 window.onerror 및 window.onunhandledrejection 같은 API도 알려줍니다. 뭔가 잘못되었을 때.

하지만 이것으로 캡처하지 않는 다른 유형의 경고도 있습니다. 기존 API에 액세스할 수 있습니다 사이트에서 지원 중단된 API를 사용하거나 사이트가 실행되는 경우 브라우저의 개입에 대비하는 경우 DevTools가 먼저 소개:

</ph>

당연히 window.onerror가 이러한 경고를 캡처한다고 생각할 것입니다. 그렇지 않습니다. 이는 경고 발생 시 window.onerror가 실행되지 않기 때문입니다. 사용자 에이전트 자체에서 직접 생성합니다. 런타임 오류 발생 시 실행됨 (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});

API를 사용하는 라이브러리를 지연 로드하는 것과 같은 상황에 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가 되기를 바랍니다. 을 참조하세요. 모든 것을 포착하는 하나의 API가 있다고 상상해 보세요. 앱에서 다음과 같은 문제가 발생할 수 있습니다.

• 브라우저 개입
• 지원 중단
• 기능 정책 위반 crbug.com/867471을 참고하세요.
• JS 예외 및 오류 (현재 window.onerror에서 서비스됨)
• 처리되지 않은 JS 프로미스 거부 (현재 window.onunhandledrejection에서 서비스됨)

ReportingObserver를 Google Cloud SDK에 통합하는 도구로도 살펴봤습니다 Lighthouse는 도구 중 하나입니다. 를 실행하면 이미 브라우저 지원 중단을 표시하는 "지원 중단된 API 방지" 감사:

</ph>

Lighthouse는 현재 DevTools 프로토콜을 사용합니다. 을 사용하여 콘솔 메시지를 스크래핑하고 이러한 문제를 개발자에게 보고하세요. 대신 ReportingObserver(으)로 전환하는 것도 좋습니다. 체계적인 지원 중단 보고서 및 anticipatedRemoval 날짜.

추가 리소스:

• W3c 사양
• chromestatus.com 항목