소개
네트워크 오류 로깅 (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}`);
});