React 前端实现

前端不是为了好看而存在，它承担一个教学任务：把 Durable Execution 的状态变化可视化。

页面结构

界面提供：

区域	作用
创建表单	输入 sku、数量、金额、幂等 key、故障注入点
Invocation 列表	观察状态、attempt 次数、更新时间
Business Order	观察订单表中的业务状态、支付单、库存预留、收据
Journal Timeline	查看每个 durable step 的提交结果
Runtime Events	查看 worker 何时重放、暂停、完成

轮询而不是 WebSocket

教学版用 1.5 秒轮询：

useEffect(() => {
  refresh();
  const timer = window.setInterval(refresh, 1500);
  return () => window.clearInterval(timer);
}, []);

这里故意不用 WebSocket，因为本教程的重点不是实时推送，而是让你能在 Network 面板和数据库里清楚看到状态如何变化。

观察重放

创建订单时选择 charge-payment 作为故障注入点：

1. 第一次 attempt 完成 create-order 和 charge-payment。
2. handler 抛错，invocation 变成 RETRYABLE。
3. 第二次 attempt 重新进入 handler。
4. Timeline 中前两个 step 显示已存在，后续 step 继续执行。

你会在事件列表里看到类似：

replay step 0: create-order
replay step 1: charge-payment

这就是 Durable Execution 最直观的证据。

观察业务状态

前端详情页新增了 Business Order 面板。它来自后端返回的 business_order 字段，而不是从 Journal 推导出来的临时展示。

当 workflow 运行时，你应该能看到订单状态按下面顺序变化：

CREATED -> PAID -> INVENTORY_RESERVED -> WAITING_SETTLEMENT -> COMPLETED

这能帮助你区分两类状态：

状态	示例	含义
Invocation 状态	WAITING_TIMER	运行时正在等待 durable timer
订单状态	WAITING_SETTLEMENT	业务上订单已付款、已锁库存，等待结算窗口

真实项目里，用户页面、运营后台、客服系统通常读的是订单表；Durable Execution runtime 负责保证订单表能在失败后继续推进到正确状态。