자바스크립트 "Reporting API"

JavaScript Reporting API는 웹 애플리케이션이 오류 및 진단 정보를 서버에 보고할 수 있도록 하는 비교적 새로운 API입니다. 그런 다음 이 정보를 사용하여 애플리케이션의 성능과 안정성을 모니터링하고 분석할 수 있습니다.

​

Reporting API는 Report-To 헤더와 ReportingObserver 인터페이스의 두 가지 주요 구성 요소로 구성됩니다. Report-To 헤더는 보고서를 보낼 위치를 지정하는 데 사용되고 ReportingObserver 인터페이스는 보고서를 관찰하는 데 사용됩니다.

​

다음은 Reporting API를 사용하여 오류를 보고하는 방법의 예입니다.

​

// Set up the Report-To header

const reportTo = {

group: "my-group",

max_age: 86400,

endpoints: [

{

url: "https://example.com/report",

priority: 1,

},

],

};

navigator.report({

type: "crash",

url: "https://example.com/error",

status: 500,

message: "Something went wrong",

stack: "at function1 (example.js:1:1)\n at function2 (example.js:2:2)",

});

​

// Set up the ReportingObserver

const observer = new ReportingObserver((reports) => {

for (const report of reports) {

console.log(report);

}

}, { types: ['crash'] });

​

// Start observing reports

observer.observe();

​

이 예에서는 보고서를 `https://example.com/report`로 보내도록 지정하는 Report-To 헤더를 설정합니다. 그런 다음 `navigator.report()` 메서드를 사용하여 `crash`, URL `https://example.com/error`, 상태 코드 `500`, `"Something went wrong"`라는 메시지와 함께 오류 및 스택 추적 `"at function1 (example.js:1:1)\n at function2 (example.js:2:2)"`를 보고합니다.

​

또한 `crash` 유형의 보고서를 관찰하도록 `ReportingObserver`를 설정했습니다. 관찰자는 보고를 받으면 보고서를 콘솔에 기록합니다.

​

`navigator.report()` 메서드는 현재 Chromium 기반 브라우저에서만 지원되며 `ReportingObserver` 인터페이스는 현재 Firefox에서만 지원됩니다. 또한 보고서를 수신하는 서버는 Reporting API 형식을 지원해야 합니다.