01

60 秒回答模板

AI 返回 ECharts 配置出错时，前端不能直接 setOption。我的处理会分五层。第一是契约层，尽量让 AI 返回受约束的 JSON schema，而不是任意 option；只允许业务支持的图表类型、字段和数据结构。第二是校验层，在前端解析 JSON 后做 schema 校验、字段白名单、数据长度、series/xAxis/yAxis/dataset 对齐、数值类型和 formatter 安全检查。第三是渲染保护，调用 ECharts 初始化和 setOption 时加错误捕获，处理空容器、尺寸异常、实例销毁、异步竞态和配置不兼容。第四是降级和重试，轻微问题可以自动修复或补默认值，严重问题降级成表格、空状态或上一次可用图表，并带错误上下文请求 AI 重新生成。第五是可观测性，记录错误类型、模型版本、配置摘要、用户 query、渲染耗时、重试次数和降级结果，用测试集、回放和报警持续优化。核心原则是把 AI 输出当作外部不可信数据，用确定性工程边界兜住不确定性。

考点 契约优先
难度 真实面经题
回答目标 让候选人展示前端可靠性思维：能把 AI 输出的不确定性包进确定性的契约、校验、渲染保护、降级重试和可观测体系里。
02

深入解析

01

AI 生成配置必须当作不可信输入

AI 可能返回非法 JSON、字段拼错、图表类型不支持、series 和 axis 不匹配、数据维度不一致、颜色或样式异常、空数据、过大数据量，甚至返回解释文本而不是配置。前端不能假设模型一定遵守 ECharts option 规范，要把它当成外部输入做完整防御。

02

从源头约束输出契约

最好的错误处理不是等 setOption 崩溃，而是在生成阶段限制输出。可以定义业务级 schema，例如 chartType、title、dimensions、dataset、series、encoding、legend、tooltip 等字段，而不是让 AI 直接生成完整任意 option。前端再把业务 schema 转换成 ECharts option，这样可控性、兼容性和安全性都会更好。

03

前端校验要覆盖结构、语义和安全

结构校验看 JSON 是否可解析、必填字段是否存在、字段类型是否正确；语义校验看 xAxis、yAxis、dataset、series、encode 是否能对齐，数据是否为空，数值和类目是否合理，图表类型是否支持；安全校验要限制 formatter、rich text、URL、HTML 和函数注入，不要执行 AI 返回的任意代码。

04

渲染层要处理 ECharts 生命周期

即使配置合法，渲染也可能因为容器尺寸为 0、组件卸载、异步请求乱序、实例重复初始化、主题加载失败、大数据卡顿或 ECharts 版本差异出错。前端要管理 init、setOption、resize、dispose 的时机，使用请求 id 或 abort 控制旧请求，捕获渲染异常并避免页面整体崩溃。

05

降级策略要按错误严重程度分层

轻微错误可以自动修复，例如补默认 title、过滤未知字段、截断过长数据、补齐颜色和 legend。中等错误可以降级为更简单的图表，例如复杂组合图降为柱状图或折线图。严重错误则展示结构化表格、原始数据摘要、空状态或上一次成功图表，并提示用户重新生成。降级要保证用户还能理解数据，而不是只显示报错。

06

重试不能盲目重复请求

如果 AI 返回配置错误，重试时要带上错误原因和可修复约束，例如缺少 xAxis、series 数据长度不一致、chartType 不支持。重试次数要有限制，避免陷入循环。对可确定修复的问题优先本地修复，对语义不清或数据理解错误的问题再请求模型重新生成。

07

可观测性和测试决定能否长期稳定

需要记录 parse_error、schema_error、semantic_error、render_error、fallback_used、retry_success 等事件，并带上配置摘要、图表类型、数据规模、模型版本、用户意图、浏览器信息和渲染耗时。测试上要有非法 JSON、缺字段、空数据、大数据、竞态、卸载、主题切换和视觉回归用例。没有观测和测试，就无法知道 AI 图表失败率是否下降。

03

易错点

  • 直接把 AI 返回内容传给 setOption，没有 JSON 解析、schema 校验和字段白名单。
  • 只用 try/catch 包住渲染，却没有处理数据语义错误、异步竞态和生命周期问题。
  • 失败时只展示通用报错，用户看不到表格、上次结果或可操作的重试入口。
  • 盲目无限重试，不带错误上下文，既浪费成本也可能反复失败。
  • 允许 AI 返回函数字符串、HTML 或任意 formatter，带来安全和稳定性风险。
  • 没有错误埋点、回放样本和自动化测试，无法持续降低失败率。
04

面试官追问

为什么不建议直接让 AI 返回完整 ECharts option？

完整 option 空间太大，字段多、兼容性复杂，还可能包含不安全 formatter 或无效组合。业务 schema 更小、更可控，前端可以确定性转换和兜底。

哪些错误可以前端自动修复？

缺少标题、legend 默认值、未知样式字段、颜色缺省、数据过长截断、简单类型转换等可以自动修复。series 和数据语义严重不匹配、图表类型不支持或用户意图理解错，通常需要重新生成或降级。

如何避免 AI 返回的 formatter 带来安全问题？

不要执行 AI 返回的函数字符串或 HTML。formatter 应使用前端内置模板或白名单枚举，必要变量由安全的数据映射提供，避免 eval、new Function 和不受控 DOM 注入。

异步竞态会造成什么问题？

用户连续提问或切换数据时，旧请求可能晚于新请求返回，覆盖最新图表；组件卸载后旧请求还可能 setOption 导致异常。需要请求 id、AbortController、mounted 状态和实例生命周期保护。

怎么衡量这套错误处理是否有效？

衡量图表生成成功率、首次可用率、schema 错误率、渲染错误率、重试成功率、降级率、用户重试率、页面崩溃率和用户反馈。还要用错误样本回放验证修复后不再复现。