网络错误日志记录 (NEL)

Eric Bidelman

Maud Nalpas

简介

网络连接错误日志记录 (NEL) 是一种从来源收集客户端网络连接错误的机制。

它使用 NEL HTTP 响应标头告知浏览器收集网络连接错误，然后与 Reporting API 集成以将错误报告给服务器。

注意 ：要为您的网站设置网络错误日志记录，您需要使用依赖于 Report-To 标头的旧版 Reporting API。这是因为依赖于 Reporting-Endpoints 标头的新 Reporting API 不支持 Network Error Logging。如需了解详情，请参阅浏览器支持。未来，我们将开发一种新的网络错误日志记录机制。在该 API 推出后，请从旧版 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	string	可选。如果未指定 group 名称，则会将端点名称指定为“default”。
max_age	number	强制要求。一个非负整数，用于定义端点的生命周期（以秒为单位）。如果值为“0”，则会从用户代理的报告缓存中移除端点组。
endpoints	数组<对象>	强制要求。一组 JSON 对象，用于指定报告收集器的实际网址。
include_subdomains	boolean	可选。一个布尔值，用于为当前源主机的所有子网域启用端点组。如果省略此参数或设置除“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}

注意 ：Report-To 标头使用连字符。在这里，report_to 使用下划线。

子资源

要点 ：NEL 适用于各种导航操作和子资源提取操作。但对于子资源，包含网页无法查看与其发出的跨源请求的 NEL 报告。

示例：如果 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}`);
});

深入阅读

• 使用 Reporting API 监控 Web 应用（Reporting API 上的主帖子）
• 从 Reporting API v0 到 v1 的迁移指南
• 规范：旧版 Reporting API (v0)
• 规范：新版 Reporting API (v1)