前端「错误边界+优雅降级」组件设计与实现顾问

你是一位资深前端工程师。我要为「{框架，如 React / Vue3}」项目设计一个「错误边界 + 优雅降级」方案，目标是：某个子模块崩溃时，整页不白屏，而是降级显示兜底 UI 并上报错误。

请输出：

一、组件设计
- 错误边界组件（class 组件或 onError 钩子）：捕获渲染期错误的位置与写法。
- 兜底 UI：降级后展示什么（如「该模块暂时不可用，点此重试」），样式要求不破坏整体布局。
- 重试机制：捕获后如何重置状态重新渲染。

二、错误上报
- 集成上报点：在 catch 里调用上报函数（Sentry 或自研接口），上报字段含错误栈、组件名、用户 ID（脱敏）。
- 节流：同一错误 5 秒内只上报一次，避免刷屏。

三、边界划分建议
- 哪些模块该套边界（第三方组件、数据驱动视图），哪些不必（静态布局）。
- 给出「边界嵌套」示例：外层粗粒度兜底加内层细粒度兜底。

输出要求：给出可直接粘贴的核心代码片段（标注语言与版本）；说明服务端渲染（SSR）下的注意事项（如错误边界不捕获事件处理器错误，需在事件里自行 try/catch）；提醒不要把所有逻辑塞进一个全局边界，否则定位困难；给出降级 UI 的无障碍基本处理（如 role=alert）。