JS异常监控设置全攻略

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JS异常监控设置方法详解》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

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

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

解决方案

要设置JS代码异常监控，核心在于利用JavaScript提供的window.onerror和try...catch机制，以及现代浏览器支持的window.addEventListener('unhandledrejection', ...)来捕获全局未处理的Promise rejection。再结合错误上报服务，将这些错误信息发送到服务器进行分析和处理。

1. 使用 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 只能捕获到同步执行的代码中的错误，对于异步代码中的错误，需要结合其他方法。

2. 使用 try...catch 捕获局部错误:

   对于可能发生错误的代码块，使用try...catch语句进行包裹，可以更精确地捕获错误。

   try {
     // 可能会出错的代码
     JSON.parse(invalidJson);
   } catch (error) {
     // 处理错误
     console.error('JSON 解析错误:', error);
     reportError({
       message: error.message,
       stack: error.stack
     });
   }

   try...catch 的优点是可以针对特定代码块进行错误处理，但缺点是需要手动添加，比较繁琐。

3. 捕获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"，避免干扰开发者的调试。

4. Source Map 的使用:

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

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

5. 错误上报服务:

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

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

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

选择合适的错误上报方式取决于项目的规模、预算和技术能力。小型项目可以选择简单的 window.onerror + 自建上报服务，大型项目则建议使用专业的第三方错误上报服务。

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

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

跨域脚本的错误通常无法直接捕获，因为浏览器会出于安全原因限制访问跨域脚本的详细错误信息。要解决这个问题，需要在加载跨域脚本时设置 crossorigin 属性，并在服务器端设置 Access-Control-Allow-Origin 响应头。

服务器端需要设置 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异常监控设置全攻略》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于try...catch,sourcemap,unhandledrejection,JS异常监控,window.onerror的知识点！