在 catch 中上报错误日志的核心是结构化采集+可靠上报，需标准化错误对象、附加URL/UserAgent/时间戳等上下文、用 fetch（配 keepalive 和兜底）发送，并节流防刷屏、异步防阻塞。
在 catch 中上报错误日志，核心是把捕获到的错误对象（包括堆栈、消息、类型等）通过 HTTP 请求发送到你的日志服务或监控平台。关键不是“只打印 console”，而是“结构化采集 + 可靠上报”。
拿到完整错误信息
原生 catch 捕获的是 Error 实例，但有时也可能是字符串、数字甚至 undefined（尤其在 Promise 链中未规范抛错时）。建议先做类型判断和标准化：
- 用
instanceof Error判断是否为标准错误对象 - 不是的话，尝试转成字符串并构造简易错误对象：
{ message: String(err), stack: '' } - 优先取
err.stack（含堆栈），退而取err.message和err.name
补充上下文信息
单靠错误本身很难定位问题。在上报前，建议附加以下字段：
-
URL：当前页面地址（
window.location.href） -
UserAgent：浏览器环境（
navigator.userAgent） -
Timestamp：精确时间（
Date.now()） -
Source：标注来源，如
'try-catch'或具体模块名 - Custom tags：业务相关标识，比如用户 ID、订单号、页面状态等（如有）
用 fetch 或 XMLHttpRequest 上报，注意失败兜底
推荐用 fetch 发送 POST 请求，但要避免因网络问题导致日志丢失：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
- 设置
keepalive: true（适用于页面卸载前上报） - 禁用缓存：
cache: 'no-cache' - 添加超时控制（fetch 本身不支持 timeout，可用
AbortController） - 若上报失败，可降级写入内存队列，待后续重试（适合 SPA 场景）
简单示例：
catch (err) {
const errorInfo = {
message: err?.message || 'Unknown error',
stack: err?.stack || '',
name: err?.name || 'Error',
url: window.location.href,
userAgent: navigator.userAgent,
timestamp: Date.now(),
source: 'api-fetch'
};
fetch('/api/log/error', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(errorInfo),
keepalive: true
}).catch(() => {
// 上报失败，可考虑 localStorage 缓存或忽略
});
}
避免重复上报和阻塞主线程
高频错误（如快速连续触发的接口失败）可能刷屏日志。可加简单节流：
- 记录最近一次上报时间，10 秒内相同错误（按 message + stack 哈希）跳过
- 上报逻辑用
setTimeout(..., 0)或queueMicrotask脱离当前执行栈，防止阻塞业务流程 - 生产环境关闭
console.error（或仅保留 warn 级别），避免污染控制台
