소개
네트워크 오류 로깅 (NEL)은 출처에서 클라이언트 측 네트워크 오류 수집
NEL HTTP 응답 헤더를 사용하여 브라우저에 네트워크 오류를 수집하도록 지시한 다음 Reporting API와 통합하여 서버에 오류를 보고합니다.
기존 Reporting API 개요
기존 Report-To 헤더
기존 Reporting API를 사용하려면 Report-To HTTP 응답 헤더를 설정해야 합니다. 자체
값은 브라우저의 엔드포인트 그룹을 설명하는 객체입니다.
오류를 보고할 위치:
Report-To:
{
"max_age": 10886400,
"endpoints": [{
"url": "https://analytics.provider.com/browser-errors"
}]
}
엔드포인트 URL이 사이트와 다른 출처에 있는 경우
엔드포인트가 CORS 프리플라이트 요청을 지원해야 합니다 (예: Access-Control-Allow-Origin: *; Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS; Access-Control-Allow-Headers: Content-Type, Authorization, Content-Length, X-Requested-With)
이 예에서는 이 응답 헤더를 기본 페이지와 함께 전송하면
브라우저에서 생성한 경고를 보고하도록 브라우저를 구성
max_age초 동안 엔드포인트 https://analytics.provider.com/browser-errors로 전달됩니다.
중요한 점은 이후에 페이지에서 하는 모든 HTTP 요청은
(이미지, 스크립트 등의 경우)는 무시됩니다. 구성 설정 중
기본 페이지의 응답입니다.
헤더 필드에 대한 설명
각 엔드포인트 구성에는 group 이름, max_age, endpoints가 포함됩니다.
배열됩니다. 또한 보고 시 하위 도메인을 고려할지 여부도
include_subdomains 필드를 사용하여 오류를 수정하세요.
| 필드 | 유형 | 설명 |
|---|---|---|
group |
문자열 | 선택사항입니다. group 이름이 지정되지 않으면 엔드포인트에 'default'라는 이름이 지정됩니다. |
max_age |
숫자 | 필수사항: 엔드포인트의 전체 기간을 초 단위로 정의하는 음수가 아닌 정수입니다. 값 '0' 엔드포인트 그룹이 사용자 에이전트의 보고 캐시에서 삭제됩니다. |
endpoints |
배열<Object> | 필수사항: 보고서 수집기의 실제 URL을 지정하는 JSON 객체의 배열입니다. |
include_subdomains |
부울 | 선택사항입니다. 현재 출처 호스트의 모든 하위 도메인에 엔드포인트 그룹을 사용 설정하는 불리언입니다. 생략되거나 'true'가 아닌 경우 하위 도메인이 엔드포인트에 보고되지 않습니다. |
group 이름은 문자열을
할 수 있습니다 Google 애널리틱스 4를 통합하는 다른 곳에서 이 이름을
Reporting API를 사용하여 특정 엔드포인트 그룹을 참조합니다.
max-age 필드도 필수이며
브라우저가 엔드포인트를 사용하고 오류를 보고해야 합니다.
endpoints 필드는 장애 조치 및 부하 분산을 제공하는 배열입니다.
기능을 살펴보겠습니다 장애 조치 및 부하 분산 섹션을 참조하세요. 그것은
브라우저는 엔드포인트를 하나만 선택하고
그룹이 endpoints에 여러 수집기를 나열하는 경우 만약
여러 서버에 한 번에 보고하지 않으면 백엔드는
있습니다.
브라우저에서 보고서를 어떻게 전송하나요?
브라우저에서 주기적으로 보고서를 일괄 처리하고 보고서로 전송합니다. IP 주소를 제공합니다
보고서를 전송하기 위해 브라우저에서 POST를 실행합니다.
요청을
Content-Type: application/reports+json 및
캡처된 경고/오류입니다.
브라우저는 언제 보고서를 전송하나요?
보고서는 앱에서 대역 외로 전송됩니다. 즉, 브라우저 보고서가 서버로 전송되는 시기를 제어할 수 있습니다.
브라우저는 적절한 시간에 대기 중인 보고서를 전달합니다. 준비가 완료되는 대로 제공할 수도 있습니다. 개발자에게 피드백이 전달될 수 있지만, 또는 사용자가 속도가 느리거나 혼잡한 네트워크였습니다. 또한 브라우저에서는 사용자가 자주 방문하는 경우 특정 출처에 대한 정보를 먼저 보고합니다.
성능 문제가 거의 또는 전혀 없음 Reporting API 사용 시 (예: 앱과의 네트워크 경합) 이 브라우저에서 대기 보고서를 보내는 시점을 제어할 수도 없습니다.
여러 엔드포인트 구성
단일 응답은 한 번에 여러 엔드포인트를
여러 Report-To 헤더:
Report-To: {
"group": "default",
"max_age": 10886400,
"endpoints": [{
"url": "https://example.com/browser-reports"
}]
}
Report-To: {
"group": "network-errors-endpoint",
"max_age": 10886400,
"endpoints": [{
"url": "https://example.com/network-errors"
}]
}
또는 이들을 단일 HTTP 헤더로 결합하여 사용할 수 있습니다.
Report-To: {
"group": "network-errors-endpoint",
"max_age": 10886400,
"endpoints": [{
"url": "https://example.com/network-errors"
}]
},
{
"max_age": 10886400,
"endpoints": [{
"url": "https://example.com/browser-errors"
}]
}
Report-To 헤더를 전송하면 브라우저에서 엔드포인트를 캐시합니다.
max_age 값에 따라 변경하며, 이 불쾌한 콘솔을 모두
URL에 대한 경고/오류가 있습니다.
장애 조치 및 부하 분산
대부분의 경우 그룹당 하나의 URL 수집기를 구성합니다. 하지만 보고로 상당한 트래픽이 발생할 수 있으므로 사양에 장애 조치도 포함됩니다. DNS에서 영감을 받은 부하 분산 기능을 SRV 레코드.
브라우저에서 최대 하나의 엔드포인트에 보고서를 전달하기 위해 최선을 다합니다.
표시됩니다. 엔드포인트에 weight를 할당하여 각각
엔드포인트로 전송됩니다. 엔드포인트는
대체 컬렉터를 설정하기 위한 priority도 할당됩니다.
대체 수집기는 기본 수집기에 업로드가 실패할 때만 시도합니다.
예: https://backup.com/reports에 대체 수집기를 만듭니다.
Report-To: {
"group": "endpoint-1",
"max_age": 10886400,
"endpoints": [
{"url": "https://example.com/reports", "priority": 1},
{"url": "https://backup.com/reports", "priority": 2}
]
}
네트워크 오류 로깅 설정
설정
NEL을 사용하려면 Report-To 헤더를 다음과 같이 설정합니다.
수집기를 사용합니다.
Report-To: {
...
}, {
"group": "network-errors",
"max_age": 2592000,
"endpoints": [{
"url": "https://analytics.provider.com/networkerrors"
}]
}
다음으로 NEL 응답 헤더를 전송하여 오류 수집을 시작합니다. NEL 이후
출처 선택인 경우 헤더를 한 번만 전송하면 됩니다. NEL 및
Report-To이(가) 동일한 출처에 대한 향후 요청에 적용되며 계속 진행합니다.
설정에 사용된 max_age 값에 따라 오류를 수집
수집기를 사용할 수 있습니다.
헤더 값은 max_age 및
report_to 필드 후자를 사용하여
네트워크 오류 수집기:
GET /index.html HTTP/1.1
NEL: {"report_to": "network-errors", "max_age": 2592000}
하위 리소스
예: example.com이 foobar.com/cat.gif를 로드하는데 해당 리소스가 실패하는 경우
로드:
foobar.com의 NEL 수집기에 알림이 전송됨example.com의 NEL 수집기에 알림이 전송되지 않습니다.
이 일반적인 원칙은 NEL이 방금 생성한 서버 측 로그를 있습니다
example.com에서 foobar.com님의 서버를 볼 수 없으므로
NEL 보고서를 볼 수 없습니다.
보고서 구성 디버깅
서버에 보고서가 표시되지 않으면
chrome://net-export/ 이 페이지는
올바르게 구성되어 있는지, 보고서가 전송되고 있는지
제대로 작동합니다.
ReportingObserver는 어떤가요?
ReportingObserver는 관련이 있지만 다른 보고 메커니즘입니다. JavaScript 호출을 기반으로 합니다.
네트워크 오류로 인해 네트워크 오류 로깅에는 적합하지 않습니다.
JavaScript를 통해 가로챌 수 없습니다.
서버 예
다음은 Express를 사용하는 노드 서버의 예입니다. 네트워크 오류 보고를 구성하는 방법을 보여주고 결과를 캡처하기 위한 전용 핸들러를 만듭니다.
const express = require('express');
const app = express();
app.use(
express.json({
type: ['application/json', 'application/reports+json'],
}),
);
app.use(express.urlencoded());
app.get('/', (request, response) => {
// Note: report_to and not report-to for NEL.
response.set('NEL', `{"report_to": "network-errors", "max_age": 2592000}`);
// The Report-To header tells the browser where to send network errors.
// The default group (first example below) captures interventions and
// deprecation reports. Other groups, like the network-error group, are referenced by their "group" name.
response.set(
'Report-To',
`{
"max_age": 2592000,
"endpoints": [{
"url": "https://reporting-observer-api-demo.glitch.me/reports"
}],
}, {
"group": "network-errors",
"max_age": 2592000,
"endpoints": [{
"url": "https://reporting-observer-api-demo.glitch.me/network-reports"
}]
}`,
);
response.sendFile('./index.html');
});
function echoReports(request, response) {
// Record report in server logs or otherwise process results.
for (const report of request.body) {
console.log(report.body);
}
response.send(request.body);
}
app.post('/network-reports', (request, response) => {
console.log(`${request.body.length} Network error reports:`);
echoReports(request, response);
});
const listener = app.listen(process.env.PORT, () => {
console.log(`Your app is listening on port ${listener.address().port}`);
});