跳到正文

报错与调用栈

Stack Trace

中级通用

报错是程序运行失败时给出的信息,调用栈(Stack Trace)记录出错位置及当时经过的函数调用。它能帮你从“保存按钮没反应”追到具体代码,再判断是哪里出了问题,而不只盯着页面上的提示。

你可能会说:「保存按钮一按就失败,能不能帮我找到是哪段代码出的问题?」

读之前建议先了解

动手看看

项目周报
保存草稿
本周进展已完成首页改版,等待周五评审。
开发者工具 · Console
TypeError: Failed to fetch保存草稿失败;展开调用栈,看看错误从哪里传来。
request · client.ts:87
persistDraft · drafts.ts:18
saveDraft · editor.ts:42
client.ts:87throw new Error('Failed to fetch')
drafts.ts:18return api.post('/drafts', data)
editor.ts:42await persistDraft(form)
保存成功 · Console 中没有报错
模拟保存请求失败
查看调用栈层级

试着悬停、按住或聚焦「保存草稿」,再切换请求是否失败。报错出现后,切换调用栈层级,右侧会显示对应的代码位置。

页面只告诉你保存失败;Console 给出具体错误。调用栈从上到下是网络请求、保存接口、按钮回调,能顺着这条路径追查。

最上层指向实际抛错的位置:client.ts 的网络请求。先看这里,再判断是断网、服务端不可达,还是请求处理有问题。

要点

  1. 1

    报错说明失败发生了什么

    报错信息通常会给出异常类型和简短原因,比如代码想读取一个不存在的值。它是排查的起点,不一定是根因;因为数据可能更早就出了问题,只是在这里首次导致程序无法继续运行。

  2. 2

    调用栈还原代码走过的路径

    调用栈会列出相关函数,以及可能存在的文件位置和行号。你可以从出错位置往上看:保存请求由哪个处理函数发起,又是谁调用了它。不同运行环境的显示顺序可能不同,先认清每一帧的位置和名称。

  3. 3

    沿路径核对数据与触发条件

    看到某一行报错,先对照那里的输入、状态和最近改动,再尝试复现。比如只有未登录用户保存失败,调用栈指向读取用户编号的代码,我们就能检查登录状态何时变成了空值,而不是直接改掉报错那一行。

容易混淆的地方

报错信息说的是失败的表现,调用栈说的是代码到达出错处的路径;两者合起来看,仍不能自动证明根因。服务端日志则记录更广的运行事件,可能包含请求记录和报错。当页面只显示“保存失败”时,我们常要去浏览器控制台或服务端日志找调用栈;如果代码经过打包压缩,看到的文件位置也可能需要源码映射才能对应回原代码。

什么时候用

适合用

  • 做网站时,点击保存后页面卡住,浏览器控制台出现异常;用调用栈定位触发它的组件和处理函数。
  • 后台接口偶尔返回错误;结合请求发生的时间和服务端调用栈,追查是哪段处理代码失败。
  • 让 AI Agent 排查能稳定复现的崩溃时,提供报错全文、调用栈和复现步骤,方便它核对代码。

不适合用

  • 只是想知道页面有多少人点击保存,没有程序异常可追;这时用埋点统计,而不是找调用栈。
  • 页面没有崩溃,只是布局在手机上错位;先用浏览器开发者工具检查元素与样式。
  • 接口持续变慢但没有抛出异常;先看监控中的耗时和请求指标,调用栈未必能解释性能变化。

练一练

一个 AI 工具的“生成摘要”按钮偶尔失败,页面只提示“请重试”。你拿到了失败时的报错和调用栈,下一步怎么做更有助于定位原因?

让 AI 帮你做

请帮我排查“生成摘要”按钮偶尔失败的问题。我会提供复现步骤、报错全文和调用栈。请先沿调用栈定位相关函数,核对输入、请求和状态,区分出错位置与可能根因;如果证据不足,请告诉我还需要哪些日志或复现信息。

接下来学什么