ReportingAPI定义了一个新的HTTPHeaderReport-To，它允许Web开发人员以自定义的方式向指定的服务器发送浏览器警告和错误。例如，CSP违规、功能策略违规、使用已弃用的API、浏览器崩溃和网络错误是可以使用报告API收集的一些信息。简介有些错误在开发时可能永远看不到，但在生产环境中却可能会出现，因为不同的用户、不同的使用环境、不同的浏览器可能会出现意想不到的问题。例如，假设您的新站点依赖于document.write()来加载关键脚本。新用户从世界各地来到您的网站，但他们使用的连接速度可能比您的测试环境慢得多。在您不知情的情况下，您的网站开始因为Chrome的干预而在2G网络上阻止document.write()中断。如果没有报告API，就无法知道这是否发生在您宝贵的用户身上。报告API有助于捕获整个站点的潜在错误。设置此项可以让您对您的网站更有信心，当真实用户访问您的网站时，不会发生任何可怕的事情。如果他们确实遇到了不可预见的错误，您就会知道。Report-ToHeaderReportingAPI定义了一个新的HTTPHeader，其值为一个对象，描述了浏览器应该向以下对象报告错误的信息：Report-To:{"max_age":10886400,"endpoints":[{"url":"https://analytics.provider.com/browser-errors"}]}注意：如果您的端点URL与您的站点来源不同，则您的端点应支持CORS请求。（例如，访问控制允许来源：*；访问控制允许方法：GET、PUT、POST、DELETE、OPTIONS；访问控制允许标头：内容类型、授权、内容长度、X-Requested-With配置多个端点单个响应可以通过发送多个Report-To标头一次配置多个端点：Report-To:{"group":"default","max_age":10886400,"endpoints":[{"url":"https://example.com/browser-reports"}]}报告对象：{"group":"csp-endpoint","max_age":10886400,"endpoints":[{"url":"https://example.com/csp-reports"}]}或将它们组合成一个HTTP标头：Report-To:{"group":"csp-endpoint","max_age":10886400,"endpoints":[{"url":"https://example.com/csp-reports"}]},{"group":"network-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值缓存端点并发送所有那些讨厌的控制台warnings/errorsaresenttoyourURLfielddescriptiongroup:(optional)thenameofthereportingendpoint,ifthegroupdoesnotspecifiedaname,specifiedthenamedefaultforthereportingendpoint.max_age:(required)一个非负整数,以秒为单位定义了报告端点的生命周期。endpoints：（必填）JSON对象数组，用于指定报告收集器的实际URL。include_subdomains：（可选）指定报告错误时是否考虑子域。浏览器如何发送报告browsing浏览器定期批处理报告并将它们发送到您配置的报告URL。要发送报告，浏览器会发出一个内容类型为application/reports+json的POST请求，其中包含捕获的警告/错误数组的文本。以下是CSP报告的示例：POST/csp-reportsHTTP/1.1Host:example.comContent-Type:application/reports+json[{"type":"csp","age":10,"url":"https://example.com/vulnerable-page/","user_agent":"Mozilla/5.0(X11;Linuxx86_64;rv:60.0)Gecko/20100101Firefox/60.0","body":{"blocked":"https://evil.com/evil.js","directive":"script-src","policy":"script-src'self';object-src'none'","status":200,"referrer":"https://evil.com/"}},}...}]报告API旨在与您的网络应用程序一起使用。浏览器捕获、排队和批处理，然后在最合适的时间自动发送报告。报告由浏览器在内部发送，因此在使用报告API时几乎没有性能问题（例如与应用程序的网络争用）。也无法控制浏览器何时发送排队的报告。上报给CSP以前我们可以给CSP加一个report-uri来上报问题：Content-Security-Policy:...;report-urihttps://example.com/csp-reportsContent-Security-Policy-Report-Only:...;report-urihttps://example.com/csp-report以下是使用Report-To报告CSP问题的示例：Content-Security-Policy-Report-Only:...;report-tocsp-endpointReport-To:{...},{"group":"csp-endpoint","max_age":10886400,"endpoints":[{"url":"https://example.com/csp-reports"}]}为了向后兼容，继续使用report-to和report-uri。换句话说：Content-Security-Policy:...;报告urihttps://example.com/csp-reports；报告组名。支持report-to的浏览器将使用它而不是report-uri。报告网络错误网络错误日志(NEL)规范定义了一种从源头收集客户端网络错误的机制。它使用新的NELHTTP响应标头设置，告诉浏览器收集网络错误，然后与ReportingAPI集成以将错误报告给服务器。要使用NEL，首先使用使用命名组的收集器设置报告标题：Report-To:{...},{"group":"network-errors","max_age":2592000,"endpoints":[{"url":"https://analytics.provider.com/networkerrors"}]}接下来，发送NEL响应头开始收集错误。GET/index.htmlHTTP/1.1NEL:{"report_to":"network-errors","max_age":2592000}ReportingObserverReportingObserver和Report-To标头的用途相似但略有不同。ReportingObserver是一个JavaScriptAPI，可以观察简单的客户端警告，例如弃用和干预。报告不会自动发送到服务器（除非你在回调中触发它们）：constobserver=newReportingObserver((reports,observer)=>{for(constreportofreports){//Sendreportsomewhere.}},{buffered:true});observer。观察（）;ReportingObserver无法观察到更敏感的错误类型，例如CSP违规和网络错误。Report-To更强大，因为它可以捕获比ReportingObserver支持的更多类型的错误报告（网络、CSP、浏览器崩溃）。当你想自动向服务器报告错误或捕获在JavaScript中无法看到的错误（网络错误）时使用它。综上所述，ReportingAPI无疑是做端到端监控的同学的福音。为我们省去了很多前端监控需要做的工作。未来，浏览器将更多的报告类型应用到ReportingAPI中，这将作为未来诊断网站问题的重点工具。
