一个极其难维护的错误提示组件

今天的工作任务是继续完善字幕翻译功能出错相关提示的展示，最难搞的字幕获取逻辑都整上了，结果收集错误反倒是更困难的...

项目的现状比较离谱，错误展示的组件并没有详细说明一共有多少种类型的错误，甚至这个组件涵盖业务好几种，两套样式，还被挂载到了两个不同的位置（页面某处固定、某处弹窗内），就特别离谱。它们之间虽然也或多或少存在关联（例如 LLM 返回的错误码），但渲染内容还是根据业务情况有些许差异，导致该组件的参数和判断逻辑特别复杂且不易阅读。

interface ErrorProps {
  error: string
  type?: string
  summaryName?: string
  setError?: (error: string) => void
  setLoading?: (loading: boolean) => void
  onRetryCallBack?: () => void
  translateRetry?: () => void
  translate?: boolean
  mode?: ProviderType
}

就问你能看懂这些参数的意思么，组件渲染内容的判断条件，除了 error，没想到 translate 也是地位很高的吧，它是 true 的时候无视 props 其他什么东西，甚至 onRetryCallBack 和 translateRetry 还是同级别的关系只是名字不同

我目前想到的方案就是尽可能的收集已知的错误类型，将弹窗独立成一个挂载在页面上的组件，错误内容则是根据业务的不同拆分多个组件，分别去做判断和展示，统一使用 postMessage 传送错误码到弹窗。即便它们的错误信息可能有重叠，但现状看上去适当的冗余还是更有利于后期维护的。