如何判断是前端问题还是后端问题

打开浏览器开发者工具，何判后端点开 Network 面板，断前端问刷新页面。题还如果某个接口返回了 500，问题那基本就是何判后端后端问题。如果所有接口都正常返回 200，断前端问但页面还是题还白屏或者数据没渲染出来，那大概率是问题前端问题。这个判断方法能解决八成以上的何判后端扯皮。

但现实往往没这么干脆。断前端问上个月我们团队遇到一个 case：用户列表页一直显示 loading，题还Network 里接口明明返回了 200，问题数据也确实在 response body 里。何判后端前端说后端字段名对不上，断前端问后端说前端自己不会取。题还最后发现是后端把 userName 改成了 username，大小写差了一个字母。这种问题你说算谁的？接口文档没更新，两边都有责任。但从排查路径上，前端先看 response 结构，对比自己代码里取的字段，五分钟就能定位。

另一个常见场景是页面卡顿。用户点个按钮转圈半天没反应。这时候别急着甩锅。打开 Performance 面板录一段，如果主线程被某个函数占满，那就是前端渲染或者计算逻辑的问题。如果主线程很空闲，但某个 XHR 请求 pending 了很久，那就是后端处理慢或者网络问题。有个很土但有效的办法：在按钮点击的回调里打一行 console.log('clicked')，如果这行日志秒出，说明前端事件响应没问题，卡在请求那一步。

数据不一致的情况更微妙。比如列表显示 10 条，详情页却显示 8 条。先看列表接口和详情接口是不是同一个数据源。前端有没有做本地过滤或者分页？后端有没有在返回前做了权限过滤？我见过一个 bug，前端在列表页用 filter 过滤掉了 status 为 0 的项，但详情页直接拿 id 去请求，没做同样过滤。用户点进去发现“怎么少了两条”。这种就是纯前端逻辑问题，后端数据完全正确。

还有一种迷惑性很强的情况：只在某些浏览器或某些用户那里出问题。比如 Chrome 正常，Safari 白屏。打开 Safari 的控制台，看到 SyntaxError: Unexpected token '?'。这是前端用了可选链 ?.，但构建工具没转译成 ES5。后端接口返回的数据一模一样。这种问题连 Network 都不用看，直接查浏览器兼容性。

反过来，如果所有前端代码都没动过，昨天还好好的，今天突然所有用户都报错。先别怀疑前端发版，去查后端服务日志。我经历过一次数据库连接池满了，所有接口超时。前端表现是每个请求都 pending 然后失败，看起来像“前端卡死”。实际上后端连 500 都来不及返回。这时候看 Network 里请求状态是 (failed) 或者 net::ERR_CONNECTION_TIMED_OUT，而不是具体的 HTTP 状态码。

一个实用的分界线：前端问题通常跟“展示”和“交互”有关——样式错乱、点击无响应、路由跳转错误、控制台报 JS 错误。后端问题通常跟“数据”和“状态”有关——接口报错、返回数据结构不对、数据缺失、权限校验失败、业务逻辑算错。但这条线不是绝对的。比如表单提交后没反应，可能是前端没绑事件，也可能是后端返回了 200 但 body 里 code: 500。所以最靠谱的还是打开开发者工具，看请求发了没，响应回了没，回的什么。

别在群里发“页面坏了”然后 @ 所有人。花两分钟看下 Network 和 Console，能省掉半小时的互相甩锅。我现在的习惯是：遇到问题先截三张图——Network 的请求列表、某个关键请求的 response、Console 的报错。把这三张图发出来，前端后端自己就会认领。

最新评论