javascript错误日志统一封装需收口try...catch、window.onerror、window.onunhandledrejection三类异常至同一上报函数，提取关键字段、过滤无效错误、添加环境与上下文信息，并通过sendbeacon或fetch上报，同时去重、截断堆栈、降级输出以保障性能。
在 JavaScript 中统一封装错误日志，核心是把 try...catch、全局异常监听（window.onerror、window.onunhandledrejection）和业务逻辑中的错误上报统一收口到一个函数里，避免重复写日志上报逻辑。
统一错误处理函数
定义一个集中处理错误的函数，接收错误对象、来源标识、可选上下文信息：
- 提取错误类型、消息、堆栈、发生时间、URL、用户 ID（如有）等关键字段
- 过滤掉已知无意义错误（如“ResizeObserver loop completed”、“Script error.”）
- 添加环境标识（dev / test / prod）、SDK 版本、页面路径等上下文
- 调用统一的上报接口（如
fetch('/api/log/error', { method: 'POST', body: JSON.stringify(data) })）
覆盖主要错误场景
确保三类常见错误都被捕获并交由统一函数处理：
Java Development Manual
下载
Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...
-
同步代码异常：用
try...catch包裹关键逻辑，并在catch中调用统一上报函数 -
全局脚本错误：监听
window.onerror，注意它不捕获 Promise 拒绝，且跨域脚本可能只返回 "Script error." -
未处理的 Promise 拒绝：监听
window.onunhandledrejection，从event.reason或event.promise rejection中提取错误信息
增强可读性与可追溯性
上报前对错误做轻量加工，提升排查效率：
- 对
error.stack做简单清洗（如去除 node_modules 行、截断过长堆栈） - 自动附加当前路由（
location.pathname + location.search）、用户操作（如最近一次点击的元素innerText或id） - 区分错误等级：
error（阻断流程）、warning（非致命但需关注）、info（主动埋点）
避免重复上报和性能干扰
生产环境需控制上报频率和体积：
- 对相同错误（相同 message + stack hash）做 5 分钟内去重
- 限制单条日志大小（如堆栈最多保留 10 行），超长内容用
console.error本地降级输出 - 上报使用
sendBeacon（兼容性好、页面卸载时仍能发出）或fetch(..., { keepalive: true })
不复杂但容易忽略的是：所有入口都要走同一出口，包括第三方 SDK 抛出的错误、React/Vue 的错误边界兜底、甚至 setTimeout 里的异常。只要没被上层 try 吞掉，最终都应落到全局监听器中完成统一记录。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
