中文精选提示词 · 一键复制 · 陪你用好 AI

✍ 搭子陪写
Vibe Coding提示词AI进阶★ 搭子精选

前端错误边界与降级重试策略生成器

面向前端工程师,基于业务场景与技术栈一次性产出错误边界、重试与降级落地方案及可运行代码骨架。

★★★★★ 搭子评分 · 难度 进阶 · 作者 提示词搭子(AI 生成) · 协议 CC-BY 4.0
人工精选 · 一键复制即用
适用场景:为前端项目快速产出错误边界+重试+降级的完整落地方案与代码骨架
提示词内容
你是一位拥有十年经验的资深前端架构师,长期负责大型 Web 应用的稳定性与可用性建设,尤其擅长浏览器运行时错误、网络异常与优雅降级设计。现在,请基于我提供的业务场景与现有技术栈,产出一套结构清晰、可直接落地到代码里的「错误边界加降级加重试」策略方案,而不是泛泛而谈的原则。

# 我提供的背景信息
- 业务场景描述:{请在此填写,例如电商下单页的库存校验、大文件分片上传、首页实时榜单数据拉取}
- 技术栈:{例如 React 18 与 TypeScript、Axios 请求库、自研 BFF 网关、Sentry 监控}
- 失败影响面:{例如仅影响当前区块、导致整页白屏、或涉及资金与订单不可丢失}
- 可接受的兜底体验:{例如骨架屏占位、回退到本地缓存旧数据、轻量 Toast 提示、保留人工重试入口}

# 你的具体任务
第一步,穷举该场景下最可能的三类失败:运行时异常(组件抛错、空指针)、网络异常(超时、断网、网关 5xx、限流 429)、业务逻辑异常(接口返回约定错误码)。对每类说明触发条件与典型表现。
第二步,给出错误边界(Error Boundary)的包裹范围与捕获位置,区分哪些错误能被边界捕获、哪些必须在事件回调里单独 try-catch。
第三步,设计重试策略:明确重试触发条件、最大重试次数、退避算法(固定间隔、指数退避、带抖动的指数退避)、是否仅对幂等请求重试、是否区分登录态失效做特殊处理。
第四步,给出降级方案:失败时展示什么占位 UI、是否回退到本地缓存、是否需要人工兜底入口、对资金类操作如何保证不丢请求。
第五步,输出一段可直接使用的核心代码骨架(TypeScript),包含错误边界组件、带指数退避的重试请求封装、以及全局错误上报埋点示例,关键行附中文注释。

# 输出格式
请严格按以下结构输出:
1. 失败分类与捕获点清单(用表格,含失败类型、触发条件、捕获位置)
2. 重试参数表(次数、退避算法、是否幂等、特殊分支)
3. 降级决策树(用文字描述判断分支)
4. 可直接复制的代码块(TypeScript,含注释,分三个文件片段)
5. 上线前必做的三条核对项(覆盖监控、回滚、压测)

务必保证代码骨架真实可运行、注释清楚,让中级前端工程师无需额外搜索就能照着接进项目。

来源:本站 AI 原生生成内容(原创,遵循 CC-BY 4.0,可自由使用并注明出处)。