JavaScript错误处理分两类：try...catch捕获同步/async异常，错误边界捕获React组件渲染崩溃；二者目标一致但场景不同，需配合Promise兜底和结构化日志提升健壮性。
JavaScript 错误处理的核心是区分两类问题：运行时可捕获的异常（用 try...catch），以及 React 中组件渲染阶段的 UI 崩溃（用错误边界）。两者目标一致——防止整个应用崩溃，但适用场景和实现方式完全不同。
用 try...catch 捕获同步和异步操作中的异常
try...catch 只能捕获同步代码或 async/await 写法中抛出的错误，对 Promise.then().catch() 或未处理的 Promise 拒绝无效。它适合封装可能失败的操作，比如 JSON 解析、API 调用、本地存储读写等。
常见写法示例：
- 同步错误捕获：JSON.parse() 容易因格式错误抛错，必须包裹
- 异步请求处理：用 async/await + try...catch 更清晰，比链式 .catch() 更易读
- 避免空 catch：不要只写
catch(e) {}，至少记录错误或给用户提示
错误边界（Error Boundary）专用于 React 组件层级的 UI 崩溃防护
错误边界是 React 类组件中定义的生命周期方法 componentDidCatch，只能捕获其子组件树在渲染、生命周期或构造函数中抛出的 JavaScript 错误，无法捕获事件处理函数、异步回调（如 setTimeout）、服务端渲染错误或自身组件内的错误。
立即学习“Java免费学习笔记（深入）”；
使用要点：
- 必须是类组件，函数组件不能直接作为错误边界（但可通过高阶组件或自定义 Hook 封装）
- 通常放在布局层或模块入口，比如
PageLayout、Card、DashboardSection - 配合
getDerivedStateFromError更新 fallback UI（如“加载失败，请重试”）
Promise 和事件监听器需要单独兜底
Promise 拒绝不会触发 try...catch，除非用 await；全局未捕获的 Promise 拒绝会触发 window.addEventListener('unhandledrejection')。事件处理器中的错误默认会冒泡到 window，可用 window.addEventListener('error') 监听，但不推荐作为主要容错手段。
实用建议：
- 所有
fetch请求后加.catch()或 await + try...catch - 为关键定时器、轮询逻辑添加错误日志和自动恢复机制
- 在开发环境启用
React.StrictMode，提前暴露潜在渲染问题
错误处理不是掩盖问题，而是提升健壮性和可观测性
真正有效的错误处理包含三件事：及时拦截、明确反馈、留下线索。拦截是为了不让白屏或卡死影响用户；反馈可以是 UI 提示、降级内容或静默重试；线索则靠结构化日志（含堆栈、用户行为、环境信息）帮助快速定位根因。
小技巧：
- 在 catch 块里用
console.error(e)而非console.log(e)，便于浏览器过滤 - 对业务错误（如登录失败）和系统错误（如网络断开）分类处理，不要混为一谈
- 错误边界中调用
logErrorToService(error, info)上报，而不是只更新本地 state
