ReportingObserver API로 코드 상태 파악

프로덕션 앱에서 지원 중단된 API를 찾습니다.

ReportingObserver는 사이트에서 지원 중단된 API를 사용하거나 실행되는 시점을 알려줍니다. 브라우저 개입으로 간주됩니다. 기본 기능은 원래 Chrome 69에서 출시되었습니다. Chrome 84부터 작업자에서 사용할 수 있습니다.

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    console.log(report.type, report.url, report.body);
  }
}, {buffered: true});

observer.observe();

콜백을 사용하여 백엔드 또는 분석 제공업체에 분석할 수 있습니다

왜 유용한가요? 이 API까지는 지원 중단 및 개입 경고가 DevTools에서 콘솔 메시지로만 사용할 수 있습니다. 개입의 경우 특히 기기 및 네트워크와 같은 다양한 실제 제약 조건에 따라서만 트리거됨 조건일 수 있습니다 따라서 개발/테스트할 때 이러한 메시지가 표시되지 않을 수도 있습니다. 제공할 수 있습니다. ReportingObserver는 이 문제의 해결책을 제공합니다. 날짜 사용자가 현장에서 잠재적인 문제를 경험하는 경우, 웹 개발자는 확인할 수 있습니다

배경

예전에 블로그 게시물을 작성했습니다 (웹 앱 살펴보기). Cloud Monitoring을 모니터링하는 API가 얼마나 많은지 '물건' 웹 앱에서 발생하는 일입니다 예를 들어, 현재 상태와 다음과 같습니다. ResizeObserver님, IntersectionObserver, MutationObserver를 탭합니다. PerformanceObserver 성능 측정값을 캡처합니다 그리고 다음과 같은 메서드를 window.onerror 및 window.onunhandledrejection 문제가 생겼을 때 알려주세요

그러나 기존 API에 액세스할 수 있습니다 사이트에서 지원 중단된 API를 사용하거나 브라우저 개입을 이해하지 못했다면 DevTools가 가장 먼저 있습니다.

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

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

ReportingObserver가 여유를 확보합니다. 프로그래매틱 방식으로 지원 중단 및 간섭합니다. 보고 도구로 사용할 수 있어 손실이 줄어듭니다 사용자가 라이브 사이트에서 예상치 못한 문제를 겪고 있는지 궁금해할 수 있습니다.

API

ReportingObserver는 다음과 같은 다른 Observer 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();

필터링된 보고서

보고서를 사전 필터링하여 특정 보고서 유형만 확인할 수 있습니다. 현재 보고서 유형에는 'deprecation'와 'intervention', 두 가지가 있습니다.

const observer = new ReportingObserver((reports, observer) => {
  …
}, {types: ['deprecation']});

버퍼링된 보고서

이전에 생성한 보고서를 보려면 buffered: true 옵션을 사용합니다. 관찰자 인스턴스가 생성되기 전에 생성된 이벤트:

const observer = new ReportingObserver((reports, observer) => {
  …
}, {types: ['intervention'], buffered: true});

이 옵션은 ReportingObserver 관찰자는 늦게 추가되지만 모든 일들을 할 수 있습니다.

관찰 중지

disconnect() 메서드를 사용하여 관찰을 중지합니다.

observer.disconnect();

예

브라우저 개입을 분석 제공업체에 보고

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이 Android 및 iOS와 같은 포착하는 법을 배울 것입니다. 모든 것을 포착하는 하나의 API가 있다고 상상해 보세요. 앱에서 다음과 같은 문제가 발생할 수 있습니다.

추가 리소스:

히어로 이미지 제공 지우베르트 오털루 Unsplash를 참고하세요.