如何设置JS代码异常监控？-js教程-PHP中文网

如何设置JS代码异常监控？

月夜之吻

发布： 2025-08-29 20:32:02

原创

843人浏览过

答案：JS代码异常监控通过window.onerror、try...catch和unhandledrejection捕获错误，结合Source Map与上报服务实现错误收集；跨域需设置crossorigin和CORS；可模拟异常测试监控有效性。

如何设置js代码异常监控？

JS代码异常监控，简单来说，就是捕获并记录JavaScript运行时的错误，帮助开发者快速定位和解决问题，提升用户体验。

解决方案

要设置JS代码异常监控，核心在于利用JavaScript提供的

window.onerror

登录后复制

和

try...catch

登录后复制

机制，以及现代浏览器支持的

window.addEventListener('unhandledrejection', ...)

登录后复制

来捕获全局未处理的Promise rejection。再结合错误上报服务，将这些错误信息发送到服务器进行分析和处理。

使用

window.onerror

登录后复制

捕获全局错误:

window.onerror

登录后复制

是一个全局事件处理函数，当JavaScript运行时发生错误，且没有被try...catch捕获时，就会触发这个函数。

window.onerror = function(message, source, lineno, colno, error) {
  // 收集错误信息
  const errorInfo = {
    message: message, // 错误信息
    source: source,   // 发生错误的脚本URL
    lineno: lineno,   // 发生错误的行号
    colno: colno,     // 发生错误的列号
    error: error ? error.stack : null // 错误堆栈信息
  };

  // 上报错误信息到服务器 (例如，使用fetch或XMLHttpRequest)
  reportError(errorInfo);

  // 阻止浏览器默认的错误提示 (可选)
  return true; // 返回true阻止默认提示
};

function reportError(errorInfo) {
  // 实际的上报逻辑，例如发送到后端服务器
  fetch('/api/error-report', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(errorInfo)
  }).catch(err => {
    console.error('Failed to report error:', err);
  });
}

登录后复制

需要注意的是，

window.onerror

登录后复制

只能捕获到同步执行的代码中的错误，对于异步代码中的错误，需要结合其他方法。

使用
```
try...catch
```
登录后复制
捕获局部错误:

对于可能发生错误的代码块，使用
```
try...catch
```
登录后复制
语句进行包裹，可以更精确地捕获错误。
```
try {
  // 可能会出错的代码
  JSON.parse(invalidJson);
} catch (error) {
  // 处理错误
  console.error('JSON 解析错误:', error);
  reportError({
    message: error.message,
    stack: error.stack
  });
}
```
登录后复制
```
try...catch
```
登录后复制
的优点是可以针对特定代码块进行错误处理，但缺点是需要手动添加，比较繁琐。

捕获Promise rejection:

对于Promise，如果reject没有被处理，可以使用

window.addEventListener('unhandledrejection', ...)

登录后复制

来捕获。

window.addEventListener('unhandledrejection', function(event) {
  // event.promise 是发生 rejection 的 Promise 对象
  // event.reason 是 rejection 的原因
  const reason = event.reason;
  const errorInfo = {
    message: reason instanceof Error ? reason.message : String(reason),
    stack: reason instanceof Error ? reason.stack : null
  };

  reportError(errorInfo);
  event.preventDefault(); // 阻止控制台输出 "Unhandled promise rejection"
});

登录后复制

event.preventDefault()

登录后复制

可以阻止浏览器控制台输出 "Unhandled promise rejection"，避免干扰开发者的调试。

Source Map 的使用:

在生产环境中，为了减小文件体积，通常会对JavaScript代码进行压缩和混淆，这会导致错误堆栈信息难以阅读。使用Source Map可以将压缩后的代码映射回原始代码，方便定位错误。

需要在webpack等构建工具中配置生成Source Map，并在错误上报时，将Source Map URL包含在错误信息中。错误上报服务会根据Source Map还原原始代码的堆栈信息。

千图设计室AI海报
千图网旗下的智能海报在线设计平台

172

查看详情
错误上报服务:

可以选择自建错误上报服务，也可以使用现成的第三方服务，例如Sentry、Fundebug、Bugly等。这些服务提供了更强大的错误分析和管理功能。

自建服务需要考虑存储、分析、展示等问题，第三方服务则可以省去这些麻烦，但需要考虑数据安全和隐私问题。

如何选择合适的错误上报方式？

选择合适的错误上报方式取决于项目的规模、预算和技术能力。小型项目可以选择简单的

window.onerror

登录后复制

+ 自建上报服务，大型项目则建议使用专业的第三方错误上报服务。

小型项目: 使用
```
window.onerror
```
登录后复制
和
```
try...catch
```
登录后复制
捕获错误，然后使用
```
fetch
```
登录后复制
或
```
XMLHttpRequest
```
登录后复制
将错误信息发送到后端服务器。后端服务器可以将错误信息存储到数据库中，并提供简单的查询和展示功能。
中型项目: 可以考虑使用开源的错误上报服务，例如
```
Airbrake
```
登录后复制
或
```
Rollbar
```
登录后复制
的开源版本。这些服务提供了更强大的错误分析和管理功能，但需要自行部署和维护。
大型项目: 建议使用专业的第三方错误上报服务，例如
```
Sentry
```
登录后复制
、
```
Fundebug
```
登录后复制
或
```
Bugly
```
登录后复制
。这些服务提供了最全面的功能，包括错误聚合、告警、用户行为跟踪等，可以大大提高错误排查和解决的效率。

如何处理跨域脚本的错误？

跨域脚本的错误通常无法直接捕获，因为浏览器会出于安全原因限制访问跨域脚本的详细错误信息。要解决这个问题，需要在加载跨域脚本时设置

crossorigin

登录后复制

属性，并在服务器端设置

Access-Control-Allow-Origin

登录后复制

响应头。

<script src="https://example.com/script.js" crossorigin="anonymous"></script>

登录后复制

服务器端需要设置

Access-Control-Allow-Origin

登录后复制

响应头，允许当前域名访问该脚本。

Access-Control-Allow-Origin: *

登录后复制

或者指定允许的域名：

Access-Control-Allow-Origin: https://yourdomain.com

登录后复制

设置完成后，就可以在

window.onerror

登录后复制

中捕获到跨域脚本的详细错误信息。

如何模拟JS代码异常？

模拟JS代码异常可以帮助开发者测试错误监控系统的功能是否正常。可以使用以下方法模拟JS代码异常：

手动抛出异常: 使用
```
throw new Error('模拟异常')
```
登录后复制
语句手动抛出异常。
访问不存在的变量或属性: 访问不存在的变量或属性会导致
```
ReferenceError
```
登录后复制
异常。
调用不存在的函数: 调用不存在的函数会导致
```
TypeError
```
登录后复制
异常。
JSON解析错误: 使用
```
JSON.parse()
```
登录后复制
解析无效的JSON字符串会导致
```
SyntaxError
```
登录后复制
异常。
Promise rejection: 创建一个rejected的Promise，但不处理 rejection。

例如：

// 手动抛出异常
function simulateError() {
  throw new Error('This is a simulated error!');
}

// 访问不存在的变量
function simulateReferenceError() {
  console.log(nonExistentVariable);
}

// 调用不存在的函数
function simulateTypeError() {
  nonExistentFunction();
}

// JSON解析错误
function simulateSyntaxError() {
  JSON.parse('invalid json');
}

// Promise rejection
function simulatePromiseRejection() {
  Promise.reject(new Error('Promise rejected!'));
}

// 调用模拟异常的函数
try {
  simulateError();
} catch (e) {
  console.error(e);
}

登录后复制

在实际开发中，可以根据需要模拟不同类型的异常，并测试错误监控系统是否能够正确捕获和上报这些异常。

以上就是如何设置JS代码异常监控？的详细内容，更多请关注php中文网其它相关文章！