wewe-rss 前端错误监控实战 从崩溃现场到稳定上线【免费下载链接】wewe-rss更优雅的微信公众号订阅方式支持私有化部署、微信公众号RSS生成基于微信读书项目地址: https://gitcode.com/GitHub_Trending/we/wewe-rss 复刻最常见的故障现场点「删除账号」页面当场卡死控制台只有一行红字Uncaught (in promise)。wewe-rss 是一款微信公众号 RSS 订阅管理工具本文沿调用链搭好它的前端错误监控链路。先别慌这种故障不是玄学它的前端错误只分布在四层各层的报错位置与修复位置都不同先画地图再动手。️ 建立四层错误地图 找到前端日志收集点错误层典型表现高频触发场景对应源码目录网络请求层toast 连弹「请求失败!」同一错误重复出现弱网、后端慢响应批量请求整体超时provider/trpc.tsx组件渲染层整页白屏Cannot read properties of undefined后端漏字段、状态值超出 statusMap 枚举accounts/index.tsx状态同步层UI 已选中新值但服务端没变连点发出重复请求mutation 失败无 catch、按钮无 loading 锁定StatusDropdown.tsx静态资源加载层页面白屏控制台刷一串 404部署路径与 vite base 不一致vite.config.ts这张表不用背它是排障坐标系故障报上来先判断属于哪一层再直奔对应源码目录找监控挂点。 三条命令跑起来git clone https://gitcode.com/GitHub_Trending/we/wewe-rss 装依赖时报 unsupported engine根 package.json 要求 node≥20.9.0、pnpm≥8.6.1先升版本。cd wewe-rss pnpm install 构建时找不到 server 别名基本是用了 npm install这是 pnpm workspacenpm 装不进 apps/server 与 apps/web 两个子包。pnpm dev 接口全部指向 undefined/trpcdev 环境后端地址只来自 VITE_SERVER_ORIGIN_URL 这个环境变量没配就全挂。️ wewe-rss 前端错误监控实战 修掉两类高频故障处理 tRPC 请求异常给客户端一个硬超时用户点「添加读书账号」二维码出来了扫码状态却永远转圈把网络调到离线连续弹出三条「请求失败!」控制台是同一个轮询接口的三份错误栈。问题出在 provider/trpc.tsxQueryClient 的默认 retry 允许失败三次、retryDelay 逐次递增一次超时会连带打出三次请求httpBatchLink 还把多个查询打包进一个 HTTP批次一慢全军覆没。错误就是从这里冒出来的。给 tRPC 客户端加一个 10 秒硬超时把无限等待变成可捕获的失败httpBatchLink({ url: serverOriginUrl /trpc, async fetch(...args) { const controller new AbortController(); setTimeout(() controller.abort(), 10_000); // 硬超时失败必须可见 return fetch(...args, { signal: controller.signal }); }, }),轮询查询自己会重复请求别再叠加全局三次重试trpc.platform.getLoginResult.useQuery( { id: loginData?.uuid ?? }, { enabled: !!loginData?.uuid, retry: 0, // 轮询查询关掉 QueryClient 级重试 }, );验证DevTools 网络调成 Offline 后点「添加读书账号」弹窗应在 10 秒内放弃并只弹一次错误提示而不是连响三遍。处理表单提交异常失败路径上回滚状态账号表里把状态下拉切到「停用」后端返回 500下拉停在新值、状态 Chip 却留在旧值再点「删除账号」控制台冒出Uncaught (in promise)按钮没有 loading手快点两下就是两个请求。定位到 accounts/index.tsxupdateAccount(...).then(() refetch())这类裸.then()没有 catch失败路径整段不执行没有回滚rejected Promise 直接变成 unhandled rejection下拉显示依赖 item.status 属性不 refetch 就停在「本地选了、服务端没改」的失配态。用 async/await 包住 mutation成功与失败两条路做同一件事——跟服务端重新同步const handleStatusChange async (id: string, status: number) { try { await updateAccount({ id, data: { status } }); refetch(); // 成功跟服务端对齐 } catch (err) { console.error(状态更新失败, err); // 留下前端日志收集入口 toast.error(状态更新失败已回滚); refetch(); // 失败把 UI 拉回服务端真实值 } };删除按钮同理改造。怕有漏网之鱼在 main.tsx 渲染前补一条全局兜底window.addEventListener(unhandledrejection, (e) { console.error(未处理的 Promise 拒绝, e.reason); // 接住「删除失败」这类拒绝 });验证断开后端改一次状态、删一次账号——下拉自动弹回原值控制台只有一行日志而不是红字 Uncaught连点删除也只发出一个请求。补上渲染层白屏空值合并与 React ErrorBoundary表格里statusMap[item.status].color没有兜底后端回一个枚举外的状态值整页白屏。两行空值合并就能挡住const cfg statusMap[item.status] ?? statusMap[1]; // 越界状态回退默认配置 Chip color{cfg.color}{cfg.label}/Chip再往上看App.tsx 顶层目前没有 React ErrorBoundary一次渲染错误就是全局白屏用类组件包一层即可兜底文案要告诉用户下一步该干什么而不是一句「出错了」。⚠️ 我踩过的三个坑你大概会以为 tRPC 的 retry 只兜网络层故障但实际上它是 react-query 的通用默认5xx 的 TRPCClientError 一样会重试三次只有 401 分支被单独豁免。正确做法是每个查询显式声明 retry不靠全局默认。你大概会以为删除后白屏是后端崩了但实际上后端可能正常返回炸点在data?.blocks.includes(...)响应缺了 blocks 字段时直接对 undefined 取方法。正确做法是对后端返回的数组字段一律空值合并兜底。你大概会以为 nginx 指到 dist 目录就行但实际上 vite 的 base 是 /dash部署路径不匹配时静态资源全部 404页面白屏、控制台刷一串 404。正确做法是让 location 与 base 对齐。✅ wewe-rss 上线前 前端异常捕获检查清单生产环境把 loggerLink 静音当前 enabled 恒为 true每条 tRPC 请求响应都会打进浏览器控制台错误上报设采样率与去重窗口同一错误一分钟内只报一次避免故障风暴打爆上报服务错误上下文排除 authCode 与 Authorization 头localStorage 里的 token 最容易被顺手带进日志App.tsx 顶层包一层 React ErrorBoundary兜底文案写清「刷新或重新登录」而不是「出错了」确认生产构建正确注入window.__WEWE_RSS_SERVER_ORIGIN_URL__否则 serverOriginUrl 为 undefined全部请求打到空地址 下一步 把日志接上报把 main.tsx 全局监听里的 console.error 接到上报接口这套链路就成了真正的生产环境错误上报管道。【免费下载链接】wewe-rss更优雅的微信公众号订阅方式支持私有化部署、微信公众号RSS生成基于微信读书项目地址: https://gitcode.com/GitHub_Trending/we/wewe-rss创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
wewe-rss 前端错误监控实战 从崩溃现场到稳定上线
wewe-rss 前端错误监控实战 从崩溃现场到稳定上线【免费下载链接】wewe-rss更优雅的微信公众号订阅方式支持私有化部署、微信公众号RSS生成基于微信读书项目地址: https://gitcode.com/GitHub_Trending/we/wewe-rss 复刻最常见的故障现场点「删除账号」页面当场卡死控制台只有一行红字Uncaught (in promise)。wewe-rss 是一款微信公众号 RSS 订阅管理工具本文沿调用链搭好它的前端错误监控链路。先别慌这种故障不是玄学它的前端错误只分布在四层各层的报错位置与修复位置都不同先画地图再动手。️ 建立四层错误地图 找到前端日志收集点错误层典型表现高频触发场景对应源码目录网络请求层toast 连弹「请求失败!」同一错误重复出现弱网、后端慢响应批量请求整体超时provider/trpc.tsx组件渲染层整页白屏Cannot read properties of undefined后端漏字段、状态值超出 statusMap 枚举accounts/index.tsx状态同步层UI 已选中新值但服务端没变连点发出重复请求mutation 失败无 catch、按钮无 loading 锁定StatusDropdown.tsx静态资源加载层页面白屏控制台刷一串 404部署路径与 vite base 不一致vite.config.ts这张表不用背它是排障坐标系故障报上来先判断属于哪一层再直奔对应源码目录找监控挂点。 三条命令跑起来git clone https://gitcode.com/GitHub_Trending/we/wewe-rss 装依赖时报 unsupported engine根 package.json 要求 node≥20.9.0、pnpm≥8.6.1先升版本。cd wewe-rss pnpm install 构建时找不到 server 别名基本是用了 npm install这是 pnpm workspacenpm 装不进 apps/server 与 apps/web 两个子包。pnpm dev 接口全部指向 undefined/trpcdev 环境后端地址只来自 VITE_SERVER_ORIGIN_URL 这个环境变量没配就全挂。️ wewe-rss 前端错误监控实战 修掉两类高频故障处理 tRPC 请求异常给客户端一个硬超时用户点「添加读书账号」二维码出来了扫码状态却永远转圈把网络调到离线连续弹出三条「请求失败!」控制台是同一个轮询接口的三份错误栈。问题出在 provider/trpc.tsxQueryClient 的默认 retry 允许失败三次、retryDelay 逐次递增一次超时会连带打出三次请求httpBatchLink 还把多个查询打包进一个 HTTP批次一慢全军覆没。错误就是从这里冒出来的。给 tRPC 客户端加一个 10 秒硬超时把无限等待变成可捕获的失败httpBatchLink({ url: serverOriginUrl /trpc, async fetch(...args) { const controller new AbortController(); setTimeout(() controller.abort(), 10_000); // 硬超时失败必须可见 return fetch(...args, { signal: controller.signal }); }, }),轮询查询自己会重复请求别再叠加全局三次重试trpc.platform.getLoginResult.useQuery( { id: loginData?.uuid ?? }, { enabled: !!loginData?.uuid, retry: 0, // 轮询查询关掉 QueryClient 级重试 }, );验证DevTools 网络调成 Offline 后点「添加读书账号」弹窗应在 10 秒内放弃并只弹一次错误提示而不是连响三遍。处理表单提交异常失败路径上回滚状态账号表里把状态下拉切到「停用」后端返回 500下拉停在新值、状态 Chip 却留在旧值再点「删除账号」控制台冒出Uncaught (in promise)按钮没有 loading手快点两下就是两个请求。定位到 accounts/index.tsxupdateAccount(...).then(() refetch())这类裸.then()没有 catch失败路径整段不执行没有回滚rejected Promise 直接变成 unhandled rejection下拉显示依赖 item.status 属性不 refetch 就停在「本地选了、服务端没改」的失配态。用 async/await 包住 mutation成功与失败两条路做同一件事——跟服务端重新同步const handleStatusChange async (id: string, status: number) { try { await updateAccount({ id, data: { status } }); refetch(); // 成功跟服务端对齐 } catch (err) { console.error(状态更新失败, err); // 留下前端日志收集入口 toast.error(状态更新失败已回滚); refetch(); // 失败把 UI 拉回服务端真实值 } };删除按钮同理改造。怕有漏网之鱼在 main.tsx 渲染前补一条全局兜底window.addEventListener(unhandledrejection, (e) { console.error(未处理的 Promise 拒绝, e.reason); // 接住「删除失败」这类拒绝 });验证断开后端改一次状态、删一次账号——下拉自动弹回原值控制台只有一行日志而不是红字 Uncaught连点删除也只发出一个请求。补上渲染层白屏空值合并与 React ErrorBoundary表格里statusMap[item.status].color没有兜底后端回一个枚举外的状态值整页白屏。两行空值合并就能挡住const cfg statusMap[item.status] ?? statusMap[1]; // 越界状态回退默认配置 Chip color{cfg.color}{cfg.label}/Chip再往上看App.tsx 顶层目前没有 React ErrorBoundary一次渲染错误就是全局白屏用类组件包一层即可兜底文案要告诉用户下一步该干什么而不是一句「出错了」。⚠️ 我踩过的三个坑你大概会以为 tRPC 的 retry 只兜网络层故障但实际上它是 react-query 的通用默认5xx 的 TRPCClientError 一样会重试三次只有 401 分支被单独豁免。正确做法是每个查询显式声明 retry不靠全局默认。你大概会以为删除后白屏是后端崩了但实际上后端可能正常返回炸点在data?.blocks.includes(...)响应缺了 blocks 字段时直接对 undefined 取方法。正确做法是对后端返回的数组字段一律空值合并兜底。你大概会以为 nginx 指到 dist 目录就行但实际上 vite 的 base 是 /dash部署路径不匹配时静态资源全部 404页面白屏、控制台刷一串 404。正确做法是让 location 与 base 对齐。✅ wewe-rss 上线前 前端异常捕获检查清单生产环境把 loggerLink 静音当前 enabled 恒为 true每条 tRPC 请求响应都会打进浏览器控制台错误上报设采样率与去重窗口同一错误一分钟内只报一次避免故障风暴打爆上报服务错误上下文排除 authCode 与 Authorization 头localStorage 里的 token 最容易被顺手带进日志App.tsx 顶层包一层 React ErrorBoundary兜底文案写清「刷新或重新登录」而不是「出错了」确认生产构建正确注入window.__WEWE_RSS_SERVER_ORIGIN_URL__否则 serverOriginUrl 为 undefined全部请求打到空地址 下一步 把日志接上报把 main.tsx 全局监听里的 console.error 接到上报接口这套链路就成了真正的生产环境错误上报管道。【免费下载链接】wewe-rss更优雅的微信公众号订阅方式支持私有化部署、微信公众号RSS生成基于微信读书项目地址: https://gitcode.com/GitHub_Trending/we/wewe-rss创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
