数据格式化失败属于 JavaScript 运行时错误,非 Vue 响应式/渲染错误,app.config.errorHandler 默认无法捕获;需在业务层主动 try/catch、封装安全解析函数、做 schema 校验,并避免在 setup 顶层或模板中直接解析。

数据格式化失败(比如 JSON.parse 报错、日期/数字转换异常、后端返回结构不符导致解构报错等)属于 JavaScript 运行时错误,**不是 Vue 框架内部触发的响应式或渲染错误**,因此 app.config.errorHandler 默认捕获不到——它只管 Vue 管理上下文内的错误(如 setup、render、生命周期、watch/computed 中抛出的异常)。
哪些场景属于“数据格式化失败”且需主动捕获
这类错误常见于:
- API 响应后手动
JSON.parse(res.data)或res.json()失败 - 对后端字段做强制类型转换:
Number(item.price)得到NaN后继续运算抛错 - 解构不存在字段:
const { user: { name } } = data,但user是null - 使用
new Date(str)传入非法时间字符串,后续调用.toISOString()报错 - 第三方库(如 dayjs、xlsx)解析失败未被 try/catch 包裹
推荐做法:在业务逻辑层主动防御,而非依赖全局兜底
因为格式化失败本质是可预期的输入风险,最佳实践是“提前校验 + 显式捕获”,而不是等它炸到全局。
- 所有外部数据进入组件前,用
try...catch包裹解析/转换逻辑 - 封装安全解析工具函数,例如:
safeParseJSON(str) { try { return JSON.parse(str) } catch { return null } - 对接口响应做 schema 校验(如 zod、yup),失败时明确提示“数据结构异常”,而非让页面崩溃
- 在
useQuery或请求 hook 内统一处理解析逻辑,避免每个组件重复写 try/catch
若仍想全局感知,可补充监听但不依赖它
虽然 app.config.errorHandler 不生效,但你可以:
立即学习“前端免费学习笔记(深入)”;
- 在全局请求拦截器中对响应体做基础格式检查(如检测是否为合法 JSON 字符串)
- 对关键工具方法(如
formatDate)加一层包装,内部try/catch并上报日志 - 配合
window.addEventListener('error')捕获未被捕获的同步错误(注意:仅限未被任何 try/catch 拦截的顶层错误,不可靠,仅作补充)
不要做的误区
❌ 直接把 JSON.parse 写在 setup() 顶层,指望 errorHandler 捕获
❌ 在 computed 中不做空值判断就链式取值(user.profile.avatar.url)
❌ 把格式化逻辑放在模板里(如 {{ formatDate(item.time) }}),一旦出错整个组件渲染中断


















