wewe-rss 前端错误监控3 步修好白屏页面【免费下载链接】wewe-rss更优雅的微信公众号订阅方式支持私有化部署、微信公众号RSS生成基于微信读书项目地址: https://gitcode.com/GitHub_Trending/we/wewe-rsswewe-rss 是基于微信读书把公众号内容转成 RSS 订阅的开源项目。前端一旦出错——白屏、转圈、点了没反应——该怎么办这篇用三步讲清 wewe-rss 前端错误监控出错时发生什么、谁来接住哪类错误、怎么修看完你就能照着补上项目里缺失的几块。先看现象出错时用户看到什么先不看代码只看屏幕。网络正常时公众号源页面就该是上面这样。出了问题屏幕通常变成三种症状请求回不来列表一直转圈数据出不来。列表数据靠 tRPC 的 useQuery 拉取请求失败后查询就卡在半路。点了没反应点添加或删除毫无动静。请求其实失败了只是没人把错误说出来用户会以为按钮坏了。一处崩全站崩React 是一整棵渲染树一个组件抛异常整页白屏。这三种症状分别对应后文说的三类错误。把前端错误分成三类先搞清楚谁来接按网络错误、渲染错误、运行时错误去背分类没意义按谁来捕获分才实用请求层前端调后端接口抛出的错。wewe-rss 的所有前后端通信都走 tRPC统一配置在apps/web/src/provider/trpc.tsx。这一类最适合集中捕获全局配一次就能兜住所有请求失败。渲染层React 组件渲染时抛的异常比如访问了不存在的字段。它只能被错误边界ErrorBoundary接住没有边界的话一个小错就能带走整页。运行时层剩下的都算这类——未处理的 Promise 拒绝、资源加载失败。它们发生在 React 管不到的地方只有挂在 window 上的全局监听能接到。一句话请求层靠全局 query 配置渲染层靠错误边界运行时层靠全局监听。各管各的才不漏。第一步5 分钟铺一张全局网全局错误监听在apps/web/src/main.tsx加两段监听React 之外的错误从此一个不漏window.addEventListener(error, (e) { console.error(全局错误:, e.error); }); window.addEventListener(unhandledrejection, (e) { console.error(Promise 失败:, e.reason); });这就像烟雾报警器平时你感觉不到它但一旦起火它先响。将来线上出怪事控制台里至少有迹可查。错误边界一句话讲清它是干什么的——一个包在页面外面的特殊组件子组件渲染抛错时由它兜底展示友好提示整页不白屏。wewe-rss 的apps/web/src/App.tsx目前没有任何错误边界这是个真实缺口。补上核心逻辑只有这么几行class ErrorBoundary extends React.Component { state { hasError: false }; static getDerivedStateFromError() { return { hasError: true }; } render() { if (this.state.hasError) return div页面出错了请刷新重试。/div; return this.props.children; } }把它包在最外层路由外面就算某个组件挂了用户看到的是提示语而不是一片白。第二步修掉 2 个最高频的报错场景全局网铺好后错误不再是崩了没线索下一步是让错误被看见、看得懂。挑两个用着最勤的场景。场景一添加公众号源失败。apps/web/src/pages/feeds/index.tsx里的确认逻辑连着三次 await解析链接、添加源、拉文章但整段没有 try/catch。任何一步请求挂了错误直接流进全局网弹窗还开着用户不知道卡在哪一步。修法用 try/catch 包住发送逻辑在 catch 里把链接不对和网络失败分开提示同时提交期间禁用确定按钮防止连点。场景二删除账号报错。账号页apps/web/src/pages/accounts/index.tsx点删除后是deleteAccount(...).then(...)失败时 Promise 被拒绝、无人接收同样落进全局网。给它补个.catch弹一条删除失败请稍后再试日志则交给全局网记录事后好回溯。有个省事的事实wewe-rss 在 trpc provider 里已经配了全局 onError所有请求失败都会弹请求失败!的 toast。所以具体场景里你只需把提示写得更准、加个重试不用重复造轮子。第三步一张表说清开发和生产环境的区别同一套错误处理在两个环境里要表现不同开发时越吵越好生产时越稳越好。wewe-rss 在apps/web/src/utils/env.ts里已经留好了开关export const isProd import.meta.env.PROD;所有环境差异都基于它分支区分点开发环境生产环境错误展示完整堆栈 弹窗方便调试只给用户一句通俗提示日志去向打 console 即可上报到监控服务敏感信息可打印请求参数token 等一律不落日志错误边界兜底显示具体异常信息只显示请刷新重试原则只有一条用户永远不该看到内部报错原文细节进日志提示给用户。上线前检查清单部署 wewe-rss 前对照这 5 条过一遍window 的 error / unhandledrejection 监听已加错误边界包住路由每个 mutation添加、删除、状态切换失败时都有用户可见的提示401 处理验证过token 过期自动清掉并跳转登录页浏览器控制台里查不到 token 等敏感信息生产环境的错误提示都是通俗中文不含堆栈全文一句话总结先铺全局网、再修高频场景、最后分好环境wewe-rss 的前端错误就从崩了不知道变成崩了有线索、有提示、能复现。【免费下载链接】wewe-rss更优雅的微信公众号订阅方式支持私有化部署、微信公众号RSS生成基于微信读书项目地址: https://gitcode.com/GitHub_Trending/we/wewe-rss创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考