ReportingObserver: 코드 상태 파악

요약

마을에 새로운 관찰자가 나타났어요! 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.onerrorwindow.onunhandledrejection 같은 API도 알려줍니다. 뭔가 잘못되었을 때.

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

<ph type="x-smartling-placeholder">
</ph> 지원 중단 및 개입에 관한 DevTools 콘솔 경고
DevTools 콘솔에서 브라우저에서 시작한 경고

당연히 window.onerror가 이러한 경고를 캡처한다고 생각할 것입니다. 그렇지 않습니다. 이는 경고 발생 시 window.onerror가 실행되지 않기 때문입니다. 사용자 에이전트 자체에서 직접 생성합니다. 런타임 오류 발생 시 실행됨 (JS 예외 및 구문 오류)가 발생할 수 있습니다.

ReportingObserver가 여유를 확보합니다. 프로그래매틱 방식으로 지원 중단과 같은 브라우저에서 발생한 경고에 대한 알림 그리고 개입이 포함됩니다. 이를 보고 도구로 사용할 수 있고 사용자가 라이브 스트림에서 예상치 못한 문제가 발생하는지 궁금해하는 경우 수면 시간을 줄입니다. 사이트

API

API는 다른 '관찰자'와 다르지 않습니다. 이러한 API는 IntersectionObserverResizeObserver로 표현. 콜백을 제공합니다. 그것은 정보를 제공합니다. 콜백이 수신하는 정보는 페이지에서 발생한 문제의 목록:

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 type="x-smartling-placeholder">
</ph> 지원 중단된 API 사용에 관한 Lighthouse 감사는 ReportingObserver를 사용할 수 있습니다.
지원 중단된 API 사용에 대한 Lighthouse 감사는 ReportingObserver를 사용할 수 있습니다.

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

추가 리소스: