讲师中心 微信公众号
AI工具推荐 视频效率加速

怎么通过HTML的ReportingObserver捕获浏览器产生的弃用警告和干预报告

酷萱姑娘_2771

酷萱姑娘_2771

发布时间:2026-05-23 19:25:36

|

610人浏览过

|

来源于php中文网

原创

ReportingObserver 默认不捕获弃用警告和干预报告,必须显式声明types为['deprecation','intervention']并配置Report-To Header,且仅HTTPS页面生效;error事件和console.warn无法替代。

怎么通过html的reportingobserver捕获浏览器产生的弃用警告和干预报告

ReportingObserver 不能捕获弃用警告(deprecation warnings)或干预报告(intervention reports)——它压根不支持这两类报告。浏览器目前只允许 ReportingObserver 监听 deprecation 和 intervention 类型的报告,但前提是后端已通过 Report-To Header 正确配置了 Reporting API,并且浏览器实际生成了对应类型的报告;而现实中,绝大多数弃用警告(比如 document.write() on slow networks)和干预(如 Powerful Feature blocked: geolocation)**默认不会触发 ReportingObserver 回调**,除非你显式启用并验证了完整链路。

ReportingObserver 构造时传入的 types 参数必须包含 'deprecation' 或 'intervention'

ReportingObserver 默认只监听 crash(Chrome 120+)和 navigation(实验性),deprecation 和 intervention 必须显式声明,否则完全静默:

const observer = new ReportingObserver((reports) => {
  reports.forEach(report => {
    console.log(report.type, report.body); // 只有 type 匹配才进来
  });
}, {
  types: ['deprecation', 'intervention'], // ✅ 必须写全,缺一不可
  buffered: true
});
observer.observe(); // 启动监听

常见错误是只写 { types: ['error'] } 或漏掉 buffered: true(导致页面加载前的报告丢失)。

浏览器是否真会发出 deprecation/intervention 报告,取决于 Report-To 配置和运行环境

即使 JS 端启用了 ReportingObserver,若服务端没配 Report-To Header,或配了但 endpoint 不支持 CORS、响应非 2xx,浏览器就**根本不会生成这些报告**——不是“捕获不到”,而是“根本没产生”:

立即学习“前端免费学习笔记(深入)”;

html-deploy
html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页,适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载
  • Report-To 必须在 HTML 响应头(不是 JS 动态加)中返回,例如:
    Report-To: {"group":"dep-reports","max_age":86400,"endpoints":[{"url":"https://a.example/reports"}]}
  • 目标 url 必须支持 CORS:响应头需含 Access-Control-Allow-Origin: * 和 Access-Control-Allow-Methods: POST
  • Chrome 仅对 HTTPS 页面发送 deprecation 报告;HTTP 页面只发 crash(如有)
  • 很多弃用提示(如 SharedArrayBuffer usage without COOP/COEP)只出现在 DevTools Console,不走 Reporting API

window.addEventListener('error') 和 console.warn 无法替代 ReportingObserver

有人试图用 window.addEventListener('error') 或重写 console.warn 拦截弃用信息,这行不通:

  • error 事件只响应资源加载失败、脚本执行异常、Promise rejection,**不响应控制台级别的 warning/info 级别日志**
  • console.warn 是开发者工具行为,无法被 JS 拦截或转发(console API 无事件机制)
  • 浏览器对弃用警告的输出是单向的:仅渲染到 DevTools,不抛事件、不触发回调、不写入 globalThis

唯一能拿到结构化弃用数据的路径,就是 Report-To + ReportingObserver 组合,且必须两端都正确配置。

验证是否生效:手动触发一个可上报的 intervention

最可靠的验证方式,是主动触发一个已知会上报的干预,比如强制禁用 document.write:

// 在 Chrome 95+ 的 2G 模拟环境下(DevTools > Network > Throttling > 2G)
// 执行以下代码会触发 intervention 报告(如果 Report-To 已配好)
document.write('<div>test</div>');

然后检查:
– DevTools > Application > Clear storage > Clear site data(确保缓存清空)
– 刷新页面后,在 Console 输入 reportingCache.getEntries()(Chrome 122+ 支持)看是否有 intervention 条目
– 或直接在 Network 面板过滤 reports,确认 endpoint 是否收到 POST 请求

真正容易被忽略的点是:ReportingObserver 是“被动监听器”,它不主动拉取历史报告;所有报告必须由浏览器在生成时实时推送给它——而这个推送的前提,是服务端 Header 和客户端环境同时满足苛刻条件。少一个环节,就彻底断链。

热门AI工具

更多
AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
Golang 入门学习路线:从零基础到上手开发
Golang 入门学习路线:从零基础到上手开发

Golang 入门路线涵盖从零到上手的核心路径:首先打牢基础语法与切片等底层机制;随后攻克 Go 的灵魂——接口设计与 Goroutine 并发模型;接着通过 Gin 框架与 GORM 深入 Web 开发实战;最后在微服务与云原生工具开发中进阶,旨在培养具备高性能并发处理能力的后端工程师。

206

2026.02.24

Golang 疑难杂症解决指南:常见问题排查与优化
Golang 疑难杂症解决指南:常见问题排查与优化

《Golang 疑难杂症解决指南》聚焦开发过程中常见却棘手的问题,从并发模型、内存管理、性能瓶颈到工程化实践逐步拆解。通过真实案例与调试思路,帮助开发者定位问题根因,建立系统化排查方法。不只给出答案,更强调分析路径与工具使用,让你在复杂 Go 项目中具备持续解决问题的能力。

113

2026.02.24

Golang 运行与部署实战:从本地到云端
Golang 运行与部署实战:从本地到云端

《Golang 运行与部署实战》围绕 Go 应用从开发完成到稳定上线的完整流程展开,系统讲解编译构建、环境配置、日志与配置管理、容器化部署以及常见运维问题处理。结合真实项目场景,拆解自动化构建与持续部署思路,帮助开发者建立可靠的发布流程,提升服务稳定性与可维护性。

637

2026.02.24

Golang 面试题精选:高频问题与解答
Golang 面试题精选:高频问题与解答

Golang 面试题精选》系统整理企业常见 Go 技术面试问题,覆盖语言基础、并发模型、内存与调度机制、网络编程、工程实践与性能优化等核心知识点。每道题不仅给出答案,还拆解背后的设计原理与考察思路,帮助读者建立完整知识结构,在面试与实际开发中都能更从容应对复杂问题。

198

2026.02.24

Golang 性能优化专题:提升应用效率
Golang 性能优化专题:提升应用效率

《Golang 性能优化专题》聚焦 Go 应用在高并发与大规模服务中的性能问题,从 profiling、内存分配、Goroutine 调度、GC 机制到 I/O 与锁竞争逐层分析。结合真实案例讲解定位瓶颈的方法与优化策略,帮助开发者建立系统化性能调优思维,在保证代码可维护性的同时显著提升服务吞吐与稳定性。

457

2026.02.24

Golang 生态工具与框架:扩展开发能力
Golang 生态工具与框架:扩展开发能力

《Golang 生态工具与框架》系统梳理 Go 语言在实际工程中的主流工具链与框架选型思路,涵盖 Web 框架、RPC 通信、依赖管理、测试工具、代码生成与项目结构设计等内容。通过真实项目场景解析不同工具的适用边界与组合方式,帮助开发者构建高效、可维护的 Go 工程体系,并提升团队协作与交付效率。

188

2026.02.24

Golang 并发编程专题:掌握多核时代的核心技能
Golang 并发编程专题:掌握多核时代的核心技能

《Golang 并发编程专题:掌握多核时代的核心技能》系统讲解 Go 在并发领域的设计哲学与实践方法,深入剖析 goroutine、channel、调度模型与并发安全机制,结合真实场景与性能思维,帮助开发者构建高吞吐、低延迟、可扩展的并发程序,全面提升多核时代的工程能力。

544

2026.02.26

Golang Web 开发路线:构建高效后端服务
Golang Web 开发路线:构建高效后端服务

《Golang Web 开发路线:构建高效后端服务》围绕 Go 在后端领域的工程实践,系统讲解 Web 框架选型、路由设计、中间件机制、数据库访问与接口规范,结合高并发与可维护性思维,逐步构建稳定、高性能、易扩展的后端服务体系,帮助开发者形成完整的 Go Web 架构能力。

225

2026.02.26

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

100

2026.09.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
GDB 17.2 官方文档集合
GDB 17.2 官方文档集合

共0课时 | 0人学习

Bootstrap 入门安装配置
Bootstrap 入门安装配置

共0课时 | 0人学习

38+ PhpStorm 提示和技巧
38+ PhpStorm 提示和技巧

共1课时 | 219人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn