JavaScript 中错误日志怎么在 catch 中上报-js教程-PHP中文网

在 catch 中上报错误日志的核心是结构化采集+可靠上报，需标准化错误对象、附加URL/UserAgent/时间戳等上下文、用 fetch（配 keepalive 和兜底）发送，并节流防刷屏、异步防阻塞。

javascript 中错误日志怎么在 catch 中上报

在 catch 中上报错误日志，核心是把捕获到的错误对象（包括堆栈、消息、类型等）通过 HTTP 请求发送到你的日志服务或监控平台。关键不是“只打印 console”，而是“结构化采集 + 可靠上报”。

拿到完整错误信息

原生 catch 捕获的是 Error 实例，但有时也可能是字符串、数字甚至 undefined（尤其在 Promise 链中未规范抛错时）。建议先做类型判断和标准化：

用 instanceof Error 判断是否为标准错误对象
不是的话，尝试转成字符串并构造简易错误对象：{ message: String(err), stack: '' }
优先取 err.stack（含堆栈），退而取 err.message 和 err.name

补充上下文信息

单靠错误本身很难定位问题。在上报前，建议附加以下字段：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

URL：当前页面地址（window.location.href）
UserAgent：浏览器环境（navigator.userAgent）
Timestamp：精确时间（Date.now()）
Source：标注来源，如 'try-catch' 或具体模块名
Custom tags：业务相关标识，比如用户 ID、订单号、页面状态等（如有）

用 fetch 或 XMLHttpRequest 上报，注意失败兜底

推荐用 fetch 发送 POST 请求，但要避免因网络问题导致日志丢失：

设置 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 缓存或忽略
  });
}