javascript 遇 500 错误时应捕获并友好反馈，不暴露堆栈；fetch 需手动判 !res.ok，axios 可直接 catch；统一提取 error.response?.data?.message；提示如“服务暂时不可用”；get 可限次重试+退避；上报需含 url、方法、状态码等脱敏信息。
遇到 500 错误时，JavaScript 本身不负责修复服务器问题，而是要正确捕获、合理反馈、安全降级。关键在于区分“前端能做什么”和“前端不该做什么”——比如不能忽略错误，也不该把原始错误堆栈暴露给用户。
用 try/catch + async/await 捕获错误细节
fetch 或 axios 发起请求后，500 响应默认不会抛出异常（fetch 尤其要注意），需手动检查 response.ok 或状态码：
- fetch 中：即使返回 500，
then仍会执行，必须用if (!res.ok)判断 - axios 中：默认对 4xx/5xx 抛出错误，可直接在
catch中处理 - 建议统一提取错误信息：
error.response?.data?.message || error.message，避免读取 undefined
向用户展示友好提示，而非技术细节
500 是服务端问题，用户无需知道“Internal Server Error”或堆栈内容：
- 文案示例：“服务暂时不可用，请稍后再试”“数据加载失败，我们正在紧急处理”
- 避免显示原始 statusText、URL、响应体等敏感或无意义信息
- 可配合 UI 状态：禁用按钮、显示重试按钮、切换到空状态页
自动重试 + 退避策略（谨慎使用）
对非幂等操作（如 GET 查询）可考虑有限重试，但需避免雪崩：
- 简单重试：失败后延迟 1–2 秒再发一次请求
- 指数退避：第 1 次等 1s，第 2 次等 2s，第 3 次等 4s，最多不超过 3 次
- 务必加开关控制：用户手动触发的请求可重试；页面初始化自动请求建议只试 1 次
上报错误供后端排查
前端记录 500 错误有助于定位线上问题：
- 上报字段至少包含：URL、HTTP 方法、状态码、时间戳、用户 ID（脱敏）、设备信息
- 避免发送 request body 或 response body（含敏感数据）
- 使用 navigator.sendBeacon() 确保页面卸载前也能发出上报
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
