JavaScript错误处理的核心在于使用try…catch和throw语句应对代码运行中的异常，1.try…catch用于捕获并处理可能出错的代码块，catch可记录或恢复错误，finally用于资源清理；2.throw用于主动抛出错误，支持自定义错误类型；3.异步操作可通过promise.catch()或async/await的try…catch处理；4.window.onError可用于全局错误捕获，但推荐使用专业监控服务；5.避免错误应结合代码审查、单元测试、类型检查和规范工具；6.调试时善用开发者工具、console.log、debugger语句及错误报告；7.编写错误处理代码需遵循可维护性原则，包括不忽略错误、合理使用try…catch、提供清晰信息、分离逻辑与处理等。
JavaScript错误处理，简单来说，就是当你的代码跑崩了，如何优雅地捕获错误、报告错误、并尽可能地让程序继续运行下去。与其说是“处理”，不如说是“应对”，因为错误总是会发生，关键在于如何应对。
解决方案
JavaScript错误处理的核心在于try…catch语句，以及throw语句主动抛出错误。
-
try…catch 语句: 这是最常见的错误处理方式。try 块包含你认为可能出错的代码，如果try块中的代码抛出了错误，控制权会立即转移到catch块。
try { // 可能会出错的代码 let result = someUndefinedFunction(); // 故意调用一个未定义的函数 console.log(result); // 如果出错，这行代码不会执行 } catch (error) { // 处理错误 console.error("发生错误了:", error.message); // 打印错误信息 // 可以选择进行一些恢复操作，例如设置默认值、重新尝试等 } finally { // 无论是否出错，都会执行的代码块（可选） console.log("try...catch块执行完毕"); }finally 块是可选的，它包含的代码无论try块是否抛出错误，都会执行。通常用于清理资源，例如关闭文件、释放内存等。
-
throw 语句: 用于手动抛出错误。这在你需要自定义错误信息或在特定条件下强制中断程序执行时非常有用。
function divide(a, b) { if (b === 0) { throw new Error("除数不能为0"); // 抛出一个Error对象 } return a / b; } try { let result = divide(10, 0); console.log(result); } catch (error) { console.error("发生错误:", error.message); } -
错误类型: JavaScript内置了一些错误类型，例如Error、TypeError、ReferenceError、SyntaxError等。你可以根据错误的具体类型来采取不同的处理策略。 当然，也可以自定义错误类型，通过继承 Error 对象来实现。
class ValidationError extends Error { constructor(message) { super(message); this.name = "ValidationError"; // 自定义错误名称 } } function validate(value) { if (typeof value !== 'number') { throw new ValidationError("Value must be a number."); } return value; } try { validate("hello"); } catch (error) { if (error instanceof ValidationError) { console.error("验证错误:", error.message); } else { console.error("其他错误:", error.message); } } -
Promise的错误处理: 对于异步操作，通常使用Promise。Promise的错误处理通过.catch()方法或者async/await的try…catch来实现。
// 使用.catch() fetch('https://api.example.com/data') .then(response => response.JSon()) .then(data => console.log(data)) .catch(error => console.error("获取数据失败:", error)); // 使用async/await async function fetchData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); } catch (error) { console.error("获取数据失败:", error); } } fetchData(); -
全局错误处理: 使用window.onerror可以捕获全局未捕获的错误。这对于记录错误日志、发送错误报告非常有用。
window.onerror = function(message, source, lineno, colno, error) { console.error("全局错误:", message, source, lineno, colno, error); // 可以将错误信息发送到服务器 return true; // 阻止浏览器默认的错误处理 }; // 故意制造一个错误 console.log(undefinedVariable.property);注意，window.onerror 应该尽可能避免使用，因为它会阻止浏览器默认的错误处理，可能会导致一些问题。 更好的做法是使用专门的错误监控服务，例如sentry、Bugsnag等。
如何选择合适的错误处理策略？
选择合适的错误处理策略取决于错误的性质和你的应用场景。 以下是一些建议：
- 对于可预测的错误，例如用户输入验证错误，可以使用try…catch来捕获并处理。
- 对于异步操作，使用Promise的.catch()方法或者async/await的try…catch来处理错误。
- 对于全局未捕获的错误，可以使用window.onerror来记录错误日志，但要谨慎使用。
- 使用专门的错误监控服务来收集和分析错误信息。
- 在开发阶段，尽量使用严格模式（”use strict”;），以便更容易发现错误。
如何避免常见的JavaScript错误？
避免错误最好的方法就是写出高质量的代码。这听起来像是废话，但实际上包含很多内容。
- 代码审查: 让同事审查你的代码，可以发现很多潜在的错误。
- 单元测试: 编写单元测试可以确保你的代码在各种情况下都能正常工作。
- 类型检查: 使用typescript或者Flow等类型检查工具，可以在编译时发现类型错误。
- 代码规范: 遵循统一的代码规范，可以提高代码的可读性和可维护性，减少错误。
- 使用Linter: 使用ESLint等Linter工具，可以自动检查代码中的潜在问题。
- 学习最佳实践: 阅读优秀的开源代码，学习最佳实践，可以提高你的编程水平。
如何调试JavaScript错误？
调试JavaScript错误是一个重要的技能。 以下是一些常用的调试技巧：
- 使用浏览器的开发者工具: 浏览器的开发者工具提供了强大的调试功能，例如断点、单步执行、查看变量值等。
- 使用console.log(): 在代码中插入console.log()语句，可以打印变量的值，帮助你理解代码的执行过程。
- 使用debugger语句: 在代码中插入debugger语句，可以暂停代码的执行，并打开浏览器的开发者工具。
- 阅读错误信息: 仔细阅读错误信息，可以帮助你找到错误的根源。
- 使用Source Maps: 如果你的代码经过了压缩和混淆，可以使用Source Maps来还原原始代码，方便调试。
- 使用错误监控服务: 错误监控服务可以提供详细的错误报告，包括错误发生的上下文、用户环境等信息，帮助你快速定位和解决问题。
如何编写可维护的错误处理代码？
错误处理代码也是代码，需要遵循良好的编程原则。
- 不要忽略错误: 不要简单地捕获错误而不做任何处理。至少应该记录错误日志。
- 不要过度使用try…catch: try…catch语句会影响代码的性能，应该只在必要的地方使用。
- 使用有意义的错误信息: 错误信息应该足够清晰，能够帮助你快速找到错误的根源。
- 将错误处理代码与业务逻辑分离: 错误处理代码应该尽可能地与业务逻辑分离，以便于维护和测试。 可以使用中间件或者装饰器模式来实现。
- 考虑错误的上下文: 在处理错误时，应该考虑错误的上下文，例如用户输入、网络状态等。
- 编写单元测试: 为错误处理代码编写单元测试，可以确保其能够正常工作。
