JavaScript错误处理需结合try-catch捕获同步异常，async/await或Promise.catch处理异步错误，配合window.onerror和unhandledrejection全局监听，并通过自定义错误类型提升可维护性。
JavaScript 中的错误处理是确保应用稳定性和用户体验的关键环节。写得不好的代码可能在运行时崩溃，而良好的错误处理机制可以捕获异常、提供调试线索，并防止程序中断。下面介绍几种在实际开发中行之有效的错误处理策略。
使用 try-catch 捕获同步错误
对于可能抛出异常的同步代码块，try-catch 是最基础也是最常用的处理方式。它允许你捕获并响应运行时错误，而不是让脚本直接终止。
例如，在解析 JSON 字符串时，格式错误会抛出 SyntaxError：
try {
const data = JSON.parse(userInput);
console.log(data);
} catch (error) {
if (error instanceof SyntaxError) {
console.warn('无效的 JSON 格式:', error.message);
} else {
console.error('未知错误:', error);
}
}
注意：catch 块中的 error 是一个对象，通常包含 message、name 和 stack 属性，可用于日志记录或上报系统。
立即学习“Java免费学习笔记（深入）”；
异步操作中的错误处理：Promise 与 async/await
异步代码中的错误不能被外部的 try-catch 捕获，必须通过 Promise 的 .catch() 或 async 函数内的 try-catch 来处理。
使用 async/await 时，建议将 await 调用包裹在 try-catch 中：
async function fetchData() {
try {
const res = await fetch('/api/data');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
return data;
} catch (error) {
console.error('请求失败:', error.message);
// 可以重新抛出或返回默认值
throw error;
}
}
如果使用纯 Promise 链，则应始终以 .catch() 结尾：
fetch('/api/data')
.then(res => {
if (!res.ok) throw new Error('Network error');
return res.json();
})
.then(data => console.log(data))
.catch(err => console.error('Error:', err));
全局错误监听：window.onerror 与 unhandledrejection
即使做了局部处理，仍可能遗漏某些错误。通过全局事件监听器，可以捕获未被捕获的异常和拒绝的 Promise。
监听全局 JavaScript 错误：
window.onerror = function(message, source, lineno, colno, error) {
console.error('全局错误:', { message, source, lineno, colno, error });
// 上报到监控服务
logErrorToService(error);
return true; // 阻止默认错误弹窗
};
监听未处理的 Promise 拒绝：
window.addEventListener('unhandledrejection', event => {
console.warn('未处理的 Promise 拒绝:', event.reason);
logErrorToService(event.reason);
// 可选择阻止默认行为
event.preventDefault();
});
这些机制有助于收集生产环境中的真实错误信息，提升可维护性。
自定义错误类型与结构化错误信息
原生错误类型有限，通过创建自定义错误类可以更清晰地表达业务逻辑中的异常情况。
class ValidationError extends Error {
constructor(field, message) {
super(message);
this.name = 'ValidationError';
this.field = field;
}
}
// 使用示例
function validateEmail(email) {
if (!email.includes('@')) {
throw new ValidationError('email', '邮箱格式不正确');
}
}
在捕获时可以根据错误类型做不同处理：
try {
validateEmail('invalid-email');
} catch (error) {
if (error instanceof ValidationError) {
alert(`${error.field}: ${error.message}`);
} else {
throw error;
}
}
基本上就这些。合理的错误处理不是掩盖问题，而是让程序更有韧性，同时为开发者提供足够的上下文来快速定位和修复问题。关键是：同步用 try-catch，异步别忘 await 错误，加上全局监听兜底，再配合自定义错误分类，就能构建出健壮的前端错误管理体系。
