企业官网建设流程全解析

低代码与生成式 UI 工程化方案：输出异常时走确定性的回退路径

1. 生成式 UI 的失败路径：收到非法 Schema 时怎么办

在低代码与生成式 UI（Generative UI）工程实践中，最忌讳的就是把后端的非确定性大模型响应直接推给前端 Component Renderer。

生成式 UI 通常由模型返回 DSL，再由客户端选择受控组件渲染。这里的失败路径很明确：响应超时、JSON 解析失败、Schema 不匹配，或组件自身抛错。它们都不应影响页面其余部分。

前端应把模型结果视作外部输入，先解析和校验，再渲染；失败时提供与业务匹配的基础视图或重试入口。

2. 状态隔离与熔断降级架构

要让生成式 UI 达到生产级可用性，前端必须引入断路器（Circuit Breaker）与多级降级状态机。

可先覆盖以下三类故障，并按产品的交互预算设置超时：

1. 超时故障：LLM 响应时间超过 5 秒。
2. Schema 校验失败：模型吐出的 JSON 无法通过 DSL 校验。
3. 渲染运行时崩溃：动态组件在挂载阶段触发 Error Boundary。

下图展示了完整的生成式 UI 隔离降级状态机：

stateDiagram-v2 [*] --> Idle: 初始状态 Idle --> Generating: 用户触发 UI 生成 Generating --> SchemaValidating: 收到网络流 Generating --> TimedOut: 超时 5000ms SchemaValidating --> Rendering: DSL 校验通过 SchemaValidating --> SchemaError: DSL 语法/结构非法 Rendering --> RenderSuccess: 组件挂载成功 Rendering --> ComponentCrash: ErrorBoundary 捕获运行时崩溃 TimedOut --> DegradedUI: 触发静态模板降级 SchemaError --> DegradedUI: 触发 Form 规则自动收容 ComponentCrash --> SafeFallback: 渲染原生 HTML 安全容器 DegradedUI --> [*] SafeFallback --> [*] RenderSuccess --> [*]

3. 生产级隔离与降级渲染器实现

下面是一套在 React 18 / TypeScript 规范下落地的生成式 UI 安全渲染组件。它集成了 DSL 结构校验、超时控制、断路器以及兜底 Boundary 隔离。

import React, { Component, ReactNode, useState, useEffect } from 'react'; import { z } from 'zod'; // 1. 定义标准动态 UI 的 DSL 结构 const DynamicComponentDSL = z.object({ type: z.enum(['ChartCard', 'TableCard', 'MetricStat', 'AlertBox']), title: z.string(), props: z.record(z.unknown()), fallbackText: z.string().optional(), }); type DynamicDSL = z.infer<typeof DynamicComponentDSL>; // 2. React 错误边界隔离机制 interface ErrorBoundaryProps { fallback: ReactNode; children: ReactNode; } interface ErrorBoundaryState { hasError: boolean; } export class ComponentCatchBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> { state: ErrorBoundaryState = { hasError: false }; static getDerivedStateFromError(): ErrorBoundaryState { return { hasError: true }; } componentDidCatch(error: Error, errorInfo: React.ErrorInfo) { console.error('[Generative UI] 动态组件渲染时崩溃:', error, errorInfo); } render() { if (this.state.hasError) { return this.props.fallback; } return this.props.children; } } // 3. 安全渲染核心组件 interface SafeGenerativeUIRendererProps { fetchSchemaApi: () => Promise<unknown>; timeoutMs?: number; } export const SafeGenerativeUIRenderer: React.FC<SafeGenerativeUIRendererProps> = ({ fetchSchemaApi, timeoutMs = 5000, }) => { const [dsl, setDsl] = useState<DynamicDSL | null>(null); const [errorStatus, setErrorStatus] = useState<'NONE' | 'TIMEOUT' | 'SCHEMA_INVALID' | 'NETWORK_ERROR'>('NONE'); useEffect(() => { let isSubscribed = true; const timer = setTimeout(() => { if (isSubscribed) { setErrorStatus('TIMEOUT'); } }, timeoutMs); fetchSchemaApi() .then((rawData) => { if (!isSubscribed) return; clearTimeout(timer); // 校验 DSL 结构 const validationResult = DynamicComponentDSL.safeParse(rawData); if (validationResult.success) { setDsl(validationResult.data); setErrorStatus('NONE'); } else { console.warn('[Generative UI] Schema 结构校验不通过:', validationResult.error); setErrorStatus('SCHEMA_INVALID'); } }) .catch((err) => { if (!isSubscribed) return; clearTimeout(timer); console.error('[Generative UI] API 异常:', err); setErrorStatus('NETWORK_ERROR'); }); return () => { isSubscribed = false; clearTimeout(timer); }; }, [fetchSchemaApi, timeoutMs]); // 状态降级渲染分支 if (errorStatus === 'TIMEOUT') { return ( <div className="degraded-container p-4 border border-amber-300 bg-amber-50 rounded"> <p className="text-amber-800 font-medium">⚠️ 实时渲染请求超时，已切换至基础数据看板</p> <button className="mt-2 text-sm text-amber-900 underline" onClick={() => window.location.reload()}> 重试加载 </button> </div> ); } if (errorStatus === 'SCHEMA_INVALID' || errorStatus === 'NETWORK_ERROR') { return ( <div className="fallback-card p-4 border border-slate-200 bg-slate-50 rounded"> <h4 className="font-bold text-slate-700">系统生成提示</h4> <p className="text-sm text-slate-500">无法构建高阶交互图表，已为您展示标准文本明细。</p> </div> ); } if (!dsl) { return <div className="animate-pulse h-32 bg-slate-100 rounded">正在构建交互组件...</div>; } // 组件渲染分支与 ErrorBoundary 包裹 return ( <ComponentCatchBoundary fallback={ <div className="p-4 border border-red-200 bg-red-50 text-red-700 rounded"> <p>⚠️ 动态组件运行时异常，已捕获隔离。</p> </div> } > {renderDynamicComponent(dsl)} </ComponentCatchBoundary> ); }; function renderDynamicComponent(dsl: DynamicDSL): ReactNode { switch (dsl.type) { case 'MetricStat': return ( <div className="metric-box border p-4 rounded shadow-sm"> <span className="text-gray-500">{dsl.title}</span> <h2 className="text-2xl font-bold">{String(dsl.props.value ?? '--')}</h2> </div> ); default: return <div>未识别的组件类型: {dsl.type}</div>; } }

4. 关键代码取舍：为什么选择前端捕获而非后端反复重试

在这套降级方案讨论阶段，后端同事曾提出：“如果模型吐出的 DSL 非法，后端直接在内部做 3 次 Retry 不就行了吗？”

我们果断否决了这种提案。

重试应由错误类型决定：网络瞬断或可重试的 5xx 可以在服务端或客户端做有限次数、带退避的重试；Schema 不合法通常应记录并返回可识别错误。客户端负责在交互超时后切换展示，但要想真正取消网络请求，fetchSchemaApi需要接收AbortSignal并传给fetch。

5. 生产环境巡检与故障降级指标

将隔离与降级逻辑上线后，我们在控制台保留了详细的排障追踪。

在运维仪表盘上，可以直接通过日志查看实时降级占比：

# 检查生成式 UI 的降级日志触发频率 tail -f /var/log/nginx/access.log | grep "/api/generative-ui" | awk '{print $9}' # 控制台输出日志： # [Degrade-Tracker] 200 OK | SchemaValid: True | Time: 1240ms # [Degrade-Tracker] 200 OK | SchemaValid: False (Invalid Enum) -> Degraded to MetricStat # [Degrade-Tracker] 504 Timeout -> Triggered Client Circuit Breaker

用 Zod 校验协议，用 Error Boundary 隔离渲染错误；同时记录失败类型、请求耗时和降级比例。数据足够后，再调整超时与重试策略。