简介
网络连接错误日志记录 (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"
}]
}
如果您的端点网址位于与您的网站不同的来源，则该端点应支持 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）。
在此示例中，如果在主页面发送此响应标头，浏览器会将浏览器生成的警告报告给端点 https://analytics.provider.com/browser-errors，时长为 max_age 秒。请务必注意，该网页发出的所有后续 HTTP 请求（针对图片、脚本等）都会被忽略。配置是在主页面响应期间设置的。
标头字段说明
每个端点配置都包含 group 名称、max_age 和 endpoints 数组。您还可以使用 include_subdomains 字段选择在报告错误时是否要考虑子网域。
| 字段 | 类型 | 说明 |
|---|---|---|
group |
字符串 | 可选。如果未指定 group 名称，系统会为端点指定名称“default”。 |
max_age |
数值 | 必需。一个非负整数，用于定义端点的生命周期（以秒为单位）。如果值为“0”，则会导致端点组从用户代理的报告缓存中移除。 |
endpoints |
数组<Object> | 必需。一个 JSON 对象数组，用于指定报告收集器的实际网址。 |
include_subdomains |
布尔值 | 可选。一个布尔值，用于为当前来源的主机的所有子网域启用端点组。如果省略或设为除“true”以外的任何值，系统不会向端点报告子网域。 |
group 名称是用于将字符串与端点相关联的唯一名称。在与 Reporting API 集成的其他位置使用此名称来引用特定端点组。
max-age 字段也是必需的，用于指定浏览器应使用端点并向其报告错误的时长。
endpoints 字段是一个数组，用于提供故障切换和负载均衡功能。请参阅故障切换和负载均衡部分。请务必注意，浏览器只会选择一个端点，即使该组在 endpoints 中列出了多个收集器也是如此。如果您想一次将报告发送到多个服务器，则后端需要转发报告。
浏览器如何发送报告？
浏览器会定期将报告分批发送到您配置的报告端点。
如需发送报告，浏览器会发出包含 Content-Type: application/reports+json 和正文（包含捕获的警告/错误数组）的 POST 请求。
浏览器何时发送报告？
报告通过应用异步传送，也就是说，浏览器会控制何时将报告发送到您的服务器。
浏览器会尝试在最合适的时机传送队列中的报告。这些测试可能会在准备就绪后（为了向开发者及时提供反馈）推出，但如果浏览器正忙于处理优先级较高的工作，或者用户当时使用的是速度缓慢且/或网络拥塞的网络，也可能延迟传递。 如果用户经常访问某个来源，浏览器也可能会优先发送关于特定来源的报告。
使用 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 值将其缓存，并将所有这些令人讨厌的控制台警告/错误发送到您的网址。
故障切换和负载均衡
大多数情况下，您会为每个组配置一个网址收集器。不过，由于报告可能会产生大量流量，因此规范中包含了受 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 字段的 JSON 对象。使用后者引用网络错误收集器的组名称：
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 的 Node 服务器示例。该示例展示了如何为网络错误配置报告，并创建了专用处理程序来捕获结果。
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}`);
});