通过监听 window.addEventListener('unhandledrejection') 捕获未处理的 Promise 拒绝异常，事件对象包含 promise 和 reason 属性，提取 reason 的 message 与 stack 并封装统一上报逻辑，兼容非 Error 类型并添加上下文信息，注意浏览器兼容性与框架拦截问题，可有效实现异步错误监控。
前端监控中，捕获未处理的 Promise 拒绝异常主要依赖 window.addEventListener('unhandledrejection') 事件。这个事件会在 Promise 被拒绝且没有绑定 catch 处理器时触发，是识别异步错误的关键机制。
监听 unhandledrejection 事件
通过监听全局的 unhandledrejection 事件，可以捕获所有未被处理的 Promise 错误：
- 事件对象包含 promise 属性（出错的 Promise 实例）和 reason 属性（拒绝原因，通常是 Error 对象或字符串）
- 在回调中提取 reason 并格式化为可上报的信息
- 建议对 reason 做类型判断，避免非 Error 类型导致序列化问题
示例代码：
window.addEventListener('unhandledrejection', event => {
const reason = event.reason;
const message = reason instanceof Error ? reason.message : String(reason);
const stack = reason?.stack || '';
// 上报到监控服务
reportToMonitor({
type: 'promise_rejection',
message,
stack,
timestamp: Date.now()
});
});
统一错误上报逻辑
为了与其它异常类型（如全局错误、资源加载失败）保持一致，建议封装统一的上报函数：
立即学习“前端免费学习笔记（深入）”；
- 将 Promise 拒绝信息转化为标准错误对象结构
- 添加上下文信息，如当前 URL、用户行为路径等
- 控制上报频率，避免大量重复错误刷屏
- 在生产环境启用，在开发环境可选择性关闭
注意兼容性与实践细节
虽然现代浏览器普遍支持该事件，但仍需注意一些实际使用中的问题：
- IE 不支持此事件，老项目需结合其他手段兜底
- 某些框架（如 Vue、React）可能自行处理部分 Promise 错误，需确认是否仍会冒泡到全局
- 避免在监听器中执行复杂操作，防止影响主流程
- 可结合 rejectionhandled 事件做更精细的状态追踪（Promise 后续被处理的情况）
基本上就这些。只要正确监听 unhandledrejection，并做好信息提取和上报，就能有效覆盖异步场景下的异常监控。不复杂但容易忽略。
