数据格式化失败属于 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) }}），一旦出错整个组件渲染中断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
