Claude Code + Better Stack：你唯一需要的错误调试方案

中文العربيةDeutschEnglishEspañolFrançaisहिन्दीBahasa Indonesia日本語한국어PortuguêsРусский
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00Better Stack 的错误追踪功能非常令人惊叹。
00:00:02它支持你想要构建的任何类型的应用程序，
00:00:04渲染会话重放，
00:00:05甚至为你提供一个可以插入到
00:00:07任何 AI 编程代理中的提示词，其中包含重要信息
00:00:10以帮助你快速修复错误。
00:00:11但是，打开浏览器并将错误
00:00:13粘贴到你的编程代理中其实并不高效，
00:00:15尤其是当你需要处理大量错误时。
00:00:17这就是 Better Stack MCP 服务器派上用场的地方，
00:00:20它极大地加快了你的调试过程，
00:00:22通过向你的代理提供关于错误的全部信息，
00:00:25使其可以在终端中进行修复。
00:00:27让我们来看看它是如何运作的。
00:00:28在开始之前，别忘了订阅。
00:00:30在这次演示中，我们将修复
00:00:36我的视频仿真应用中的一个错误。
00:00:37这是一个真实的错误。
00:00:39它不是我为了这个视频编造出来的，
00:00:41它偶尔就会发生。
00:00:43所以我打算尝试现场复现它。
00:00:44每当我上传视频时，它就会发生。
00:00:46所以我将上传一段我制作的关于 Kent C. Dodds 的短片，
00:00:49你可以在 Better Stack 频道中找到它。
00:00:51我会选择一个预设。
00:00:52我往往很喜欢这个，因为它让我想起了《辐射》。
00:00:55我打算检查开发者工具。
00:00:57我们已经有两个错误了，
00:00:59但这不是我们要修复的那个。
00:01:01如果我随意拖动进度条，新错误就会出现。
00:01:03所以我拖动一下，希望能触发它，
00:01:06最后它确实触发了。
00:01:08就是这个，一个未捕获的安全错误，
00:01:10它阻止了时间轴滚动。
00:01:12现在，由于这是一个 React 应用，
00:01:14我已经通过 Sentry React SDK
00:01:15将其连接到了 Better Stack。
00:01:17我正在使用一个 Better Stack 特定的 DSN，
00:01:19你可以通过连接应用程序轻松获得它，
00:01:22选择你想要追踪错误的应用程序类型，
00:01:24然后向下滚动找到这个提示词，
00:01:27你可以将其复制并粘贴到你的 AI 代理中。
00:01:29它会处理整个设置过程。
00:01:30之后，
00:01:31我们可以看到 Better Stack 中收到了错误。
00:01:33这就是最近触发的那个，
00:01:34大约是在六分钟前。
00:01:35如果我们点击它，可以获得大量数据，
00:01:38比如浏览器信息，
00:01:39以及导致此错误的确切步骤。
00:01:41我们甚至可以点击这里让 AI 为我们解释。
00:01:44我们还可以观看导致该错误发生的
00:01:46全过程匿名会话重放。
00:01:48但现在，让我们专注于使用 Claude code 来修复它。
00:01:51现在我们可以点击 AI 提示词，
00:01:53并将此提示直接复制到 Claude code，
00:01:55但如果我们有许多错误需要处理，
00:01:57这可能会非常繁琐。
00:01:59所以，让我们通过使用 Better Stack MCP 服务器，
00:02:02将这些信息直接导入 Claude code，
00:02:04我已经设置好了，
00:02:05但你可以通过运行这条命令
00:02:07或编辑你的编码环境配置
00:02:10并登录 Better Stack 来完成设置。
00:02:11现在 MCP 服务器为我们提供了许多有用的工具。
00:02:15如果你想节省上下文空间，
00:02:16你可以在 Claude 的 settings.json 中
00:02:18开启延迟工具加载，
00:02:19它只会加载你需要的工具，
00:02:21而不是将所有内容都放入上下文中。
00:02:23现在，因为我已经在项目目录中了，
00:02:26我可以写一个类似的提示词：
00:02:27“提供此应用程序的所有错误详情”。
00:02:29Claude code 会使用正确的工具找到对应的应用，
00:02:32并向我提供最新错误的摘要。
00:02:35这本身就已经非常强大了，
00:02:36因为你可以让它作为例行程序定期运行，
00:02:40在出现新错误时给你发送电子邮件，
00:02:42在 WhatsApp 或 Telegram 上提醒你，
00:02:44甚至让 Claude 针对新问题
00:02:46自动创建带有修复方案的 PR。
00:02:47现在，让我们先获取这个安全错误的详细信息，
00:02:50它已经为此建议了一个提示词。
00:02:52但我打算做的，是询问它
00:02:54是否有任何与此相关的其他错误，
00:02:56以便它们可以一起被修复。
00:02:58现在它正在并行获取代码库的详细信息，
00:03:01它向我提供了问题的根本原因
00:03:03和建议的修复方法，
00:03:04并告诉我 404 错误是另外一个问题。
00:03:07所以它不会将它们归为一类。
00:03:08现在让我们让 Claude 在新的功能分支中
00:03:10修复这个安全问题并创建一个拉取请求，
00:03:12它很快就完成了。
00:03:14看一下这个 PR，
00:03:16我们将查看更改的文件。
00:03:17真不敢相信，仅仅这一行代码
00:03:20就修复了所有问题。
00:03:21所以我打算在本地进行测试，
00:03:23在随意拖动了几分钟进度条之后，
00:03:25我可以自信地说我无法复现该错误了。
00:03:27现在 PR 已经被合并了，
00:03:29在这个阶段，我们可以做一件非常酷的事情。
00:03:31不用再手动进入 Better Stack
00:03:33并点击解决按钮，
00:03:35我只需要拉取新的更改，
00:03:36然后告诉 Claude 检查修复是否到位，
00:03:38如果是，就在 Better Stack 中解决该问题。
00:03:41现在它已经确认修复到位，
00:03:43正在解决 Better Stack 中的三个安全问题，
00:03:45它在我说话的时候就已经完成了。
00:03:47所以如果我们回到 Better Stack 的界面，
00:03:49我们可以看到这个问题已经被解决了，
00:03:51之前发生的所有相关记录也是如此。
00:03:53我们可以一遍又一遍地重复这些步骤，
00:03:56直到修复应用中的每一个错误。
00:03:58我由衷地相信这就是未来的
00:04:00发展方向。
00:04:01我们将更多地使用代理，而更少地访问 UI
00:04:03或访问浏览器，因为这样更加方便。
00:04:07所以我建议你查看一下 Better Stack MCP 服务器，
00:04:09看看它具体能做什么
00:04:11来加速你的调试工作流。
00:04:12如果你想了解更多关于
00:04:14MCP 服务器本身的细节，
00:04:16请观看 James 的这段视频。

Key Takeaway

利用 Better Stack MCP 服务器将实时错误追踪数据集成至 Claude Code，可实现从错误定位到单行代码修复再到后台状态更新的全自动化终端调试工作流。

Highlights

  • Better Stack MCP 服务器支持将浏览器中的错误数据直接导入 Claude Code 终端，消除手动复制粘贴的低效环节。

  • 通过在 Claude settings.json 中开启延迟工具加载选项，可以显著节省 AI 上下文空间并仅加载必要的调试工具。

  • Claude Code 能够识别 404 错误与安全错误的根本区别，并针对特定安全漏洞自动生成单行代码修复方案。

  • 系统支持在修复验证完成后，直接通过 Claude 命令行终端远程更改 Better Stack 后台的错误状态为“已解决”。

  • 用户可以配置自动化的例行程序，在出现新错误时通过 WhatsApp、Telegram 或电子邮件触发修复通知或自动创建 PR。

Timeline

当前 AI 调试流程的局限性

  • Better Stack 提供支持各类应用的错误追踪、会话重放及 AI 提示词插入功能。
  • 在处理大量错误时，频繁在浏览器与 AI 编程代理之间切换并手动粘贴信息会导致效率低下。
  • 视频仿真应用中存在一个偶发性的未捕获安全错误，该错误会导致时间轴停止滚动。

虽然 Better Stack 具备渲染会话重放和提供错误背景提示词的能力，但传统的 Web UI 操作模式限制了处理速度。在实际的 React 应用案例中，即使配置了 Sentry SDK 和 DSN 接口，开发者仍需手动提取错误数据以供 AI 分析。

MCP 服务器的配置与工具集成

  • 通过运行特定安装命令或编辑编码环境配置，可将 Better Stack MCP 服务器集成至终端。
  • 开启延迟工具加载功能可以优化 Claude 的资源消耗，防止不相关的工具占用 Token 上下文。
  • Better Stack 特定的 DSN 连接使应用程序能够自动同步最新的错误堆栈信息。

MCP 服务器的作用是作为桥梁，让 AI 代理直接拥有读取外部监控数据的权限。用户无需离开终端，仅需通过配置文件和简单的登录指令，即可让 Claude 获得访问项目错误日志的权限，并配合延迟加载策略维持系统响应速度。

自动化错误分析与 PR 生成

  • 输入“提供此应用的所有错误详情”指令后，Claude 会自动识别不同类型的错误并提供摘要。
  • AI 能够区分相互关联的错误点，并针对安全问题在新的功能分支中快速生成修复 PR。
  • 整个分析过程包含了根本原因定位、建议修复方法以及自动化的 Git 分支管理。

当 Claude 介入后，它不仅能获取错误详情，还能并行检查代码库。这种方法允许开发者询问相关错误之间的关联性，AI 会识别出哪些错误需要归类处理。最终，AI 能够自主完成从发现问题到编写修复方案并提交拉取请求的闭环。

验证修复并远程管理错误状态

  • 通过在本地拉取更改并拖动进度条验证，确认单行代码修改已彻底解决安全冲突。
  • Claude 可以在确认修复到位后，直接调用接口在 Better Stack 仪表盘中批量关闭对应的问题记录。
  • 这种基于代理（Agent）的交互模式预示着未来开发者将更少依赖图形化 UI，转而采用全终端调试流。

修复验证通过后，开发者无需手动回到浏览器点击“解决”按钮。Claude 能够检查修复是否真正生效，并同步更新云端监控平台的状态。这种深度集成缩短了调试周期，使开发者能够连续处理应用中的每一个错误，而无需在不同软件界面间跳转。

Community Posts

No posts yet. Be the first to write about this video!

Write about this video