17370845950

JavaScript错误处理核心是try...catch...finally配合主动throw、错误分类与全局监控；需在已知易错场景使用，throw应抛Error实例，按类型差异化处理，生产环境须日志脱敏上报。

JavaScript 中的错误处理核心是 try...catch...finally 语句，配合合理的错误分类、主动抛错（throw）和预防性检查，才能写出真正健壮的异常处理代码。

基础结构：用好 try-catch-finally

不是所有地方都适合加 try-catch。它适用于**已知可能出错、且你能合理响应**的场景，比如网络请求、JSON 解析、DOM 操作、用户输入解析等。

• try 块放可能出错的代码；一旦抛错，立即跳出，后续语句不执行
• catch 接收错误对象（通常叫 err），可检查 err.name 和 err.message 做差异化处理
• finally 无论是否出错都会执行，适合清理资源（如关闭加载状态、释放定时器）

主动抛错：用 throw 明确业务边界

不要只等 JS 自动报错。对非法输入、不符合预期的状态，应主动 throw 一个语义清晰的错误，让调用方更容易定位问题。

• 避免 throw "用户名不能为空" —— 字符串无法区分类型，也不含堆栈
• 推荐 throw new Error("用户名不能为空") 或自定义错误类（如 class ValidationError extends Error {...}）
• 函数开头做参数校验：if (!user?.id) throw new Error("用户ID缺失")

捕获并分类处理常见错误类型

不同错误需要不同对策。JS 内置错误类型（TypeError、SyntaxError、ReferenceError、NetworkError 等）可被识别，便于分流处理：

• 网络失败（fetch 报错或响应非 ok）→ 提示重试、降级展示缓存数据
• JSON.parse 失败 → 记录原始响应体，提示“数据格式异常”，避免直接崩溃
• TypeError: Cannot read property 'x' of undefined → 检查对象存在性，或用可选链 obj?.x 预防

全局兜底与日志上报（生产环境必备）

未被捕获的错误会冒泡到全局，可用 window.onerror 或 window.addEventListener('error') 捕获；Promise 拒绝需监听 unhandledrejection。

• 记录错误信息、URL、用户操作路径、设备 UA，但注意脱敏（不传手机号、token 等）
• 对非关键错误（如某个图标加载失败），可静默上报，不打断用户流程
• 避免在 catch 中只写 console.log(err) 就结束 —— 至少要反馈给用户或触发监控

基本上就这些。健壮 ≠ 到处包 try-catch，而是清楚哪里可能错、错后怎么退、用户是否感知、问题能否追溯。