Claude Code + Better Stack: The Only Error Debugging Setup You Need

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

Transcript

00:00:00Error tracking in Better Stack is super impressive.
00:00:02It supports any kind of app you want to build,
00:00:04render session replays,
00:00:05and even gives you a prompt that you can plug
00:00:07into any AI coding agent with important information
00:00:10to help you fix errors quickly.
00:00:11But it's not really efficient to open the browser
00:00:13and paste the error into your coding agent,
00:00:15especially if you have loads of errors to deal with.
00:00:17This is where the Better Stack MCP server comes in,
00:00:20massively speeding up your debugging process
00:00:22by giving your agent all the information about your errors
00:00:25that it can use to fix it in the terminal.
00:00:27Let's go through exactly how it works.
00:00:28And before we do, don't forget to subscribe.
00:00:30So for this demo, we're going to be fixing an error
00:00:36with my video emulation app.
00:00:37Now this is an actual error.
00:00:39It's not one I've made up for this video
00:00:41and it happens every now and again.
00:00:43So I'm going to try and replicate it live.
00:00:44And it happens whenever I upload a video.
00:00:46So I'm going to upload a short I made about Kent C. Dodds,
00:00:49which you can find in the Better Stack channel.
00:00:51I will pick a preset.
00:00:52I tend to like this because it reminds me of Fallout.
00:00:55And I'm going to inspect the developer tools.
00:00:57We already have two errors,
00:00:59but this isn't the one we're going to fix.
00:01:01And the new error happens if I scrub around for a bit.
00:01:03So I'll scrub around and hopefully it will trigger,
00:01:06which eventually it does.
00:01:08And this is it, an uncaught security error,
00:01:10which prevents the timeline from scrolling.
00:01:12Now, since this is a React app,
00:01:14I've connected it to Better Stack
00:01:15using the Sentry React SDK.
00:01:17And I'm using a Better Stack specific DSN,
00:01:19which you can get very easily by connecting an application,
00:01:22choosing the type of app you want to track errors on,
00:01:24and then scroll down to find this prompt,
00:01:27which you can copy and paste into your AI agent.
00:01:29And it takes care of the whole setup.
00:01:30And after that,
00:01:31we can see we're getting errors in Better Stack.
00:01:33So here's the one that triggered recently
00:01:34around six minutes ago.
00:01:35And if we click on it, we can get a bunch of data,
00:01:38like browser information,
00:01:39the exact steps that led to this error.
00:01:41And we can even click here to get AI to explain it to us.
00:01:44We could also watch an anonymous session replay
00:01:46of everything that led up to that error.
00:01:48But for now, let's focus on fixing this using Claude code.
00:01:51Now we could click on AI prompt
00:01:53and copy this prompt directly to Claude code,
00:01:55but this could be very tedious
00:01:57if we have lots of errors you want to deal with.
00:01:59So let's get this information directly into Claude code
00:02:02by using the Better Stack MCP server,
00:02:04which I already have set up,
00:02:05but you can do so by running this command
00:02:07or editing the configuration of your coding harness
00:02:10and signing into Better Stack.
00:02:11Now the MCP server gives us access to a lot of useful tools.
00:02:15And if you want to save context,
00:02:16you can turn on deferred tool loading
00:02:18in the Claude settings JSON,
00:02:19which only loads the tools you need
00:02:21instead of putting everything into context.
00:02:23Now, because I'm already in the projects directory,
00:02:26I can write a prompt like,
00:02:27give all the error details for this application.
00:02:29And Claude code uses the right tools to find the correct app
00:02:32and gives me a summary of the latest errors.
00:02:35Now this already is really powerful
00:02:36because you can have this run regularly as a routine
00:02:40and send you an email whenever there's a new error,
00:02:42ping you on WhatsApp or Telegram,
00:02:44or even get Claude to automatically create PRs
00:02:46with fixes to new issues.
00:02:47For now, let's just get the details of this security error,
00:02:50which it has already suggested a prompt for.
00:02:52But what I'm going to do is ask it
00:02:54if there are any other errors related to this one,
00:02:56so they can be fixed together.
00:02:58And now it's getting the details of the code base in parallel
00:03:01and it's giving me the root cause of the issue
00:03:03with a suggested fix
00:03:04and told me the 404 errors are a separate issue.
00:03:07So it won't group them together.
00:03:08Now let's get Claude to fix the security issue
00:03:10in a new feature branch and create a pull request,
00:03:12which it's done very quickly.
00:03:14And looking at the PR,
00:03:16we'll have a look at the files change.
00:03:17And I can't believe it's just this one line of code
00:03:20that fixes everything.
00:03:21So I'm going to test this locally
00:03:23and after scrubbing around for a few minutes,
00:03:25I can confidently say I'm not able to reproduce the error.
00:03:27So now the PR has been merged
00:03:29and at this stage, we can do something really cool.
00:03:31Instead of manually going into Betastack
00:03:33and clicking the resolve button,
00:03:35I can just pull the new changes,
00:03:36then tell Claude to check the fix is in place
00:03:38and if it is, resolve the issue in Betastack.
00:03:41So now it's confirmed the fix is in place
00:03:43and it's resolving the three security issues in Betastack,
00:03:45which it did while I was talking.
00:03:47So if we go back to the Betastack UI,
00:03:49we can see this issue has been resolved
00:03:51and so have all the previous occurrences of it.
00:03:53And we can continue these steps over and over again
00:03:56until we fix every single error in our app.
00:03:58I genuinely believe this is the direction
00:04:00things are going in.
00:04:01We'll be using more agents and less visiting the UI
00:04:03or visiting our browser because it's just more convenient.
00:04:07So I recommend you check out the Betastack MCP server
00:04:09to see exactly what it can do
00:04:11to speed up your debugging workflow.
00:04:12And if you want to know more details
00:04:14about the MCP server itself,
00:04:16then check out this video from James.

Key Takeaway

Integrating the Better Stack MCP server with Claude Code replaces manual browser-based debugging with a terminal-native workflow that automatically identifies, fixes, and resolves production errors.

Highlights

  • The Better Stack MCP server enables Claude Code to access error logs and session data directly within the terminal.

  • Integrating the Sentry React SDK with a Better Stack DSN allows developers to capture specific browser data and step-by-step error reproduction paths.

  • Claude Code can analyze the root cause of security errors and generate functional pull requests with a single line of code fix.

  • Enabling deferred tool loading in the Claude settings JSON optimizes context by loading only the necessary MCP tools.

  • The workflow allows for bulk resolution of issues in the Better Stack UI directly through terminal commands after verifying local fixes.

  • Automated routines can be configured to trigger notifications via email, WhatsApp, or Telegram whenever new errors are detected.

Timeline

Efficiency gaps in manual error tracking

  • Better Stack captures session replays and provides AI prompts to assist in error resolution.
  • Manually copying and pasting error data from a browser into an AI agent creates a bottleneck in high-volume environments.
  • The MCP server bridges the gap by feeding live error data directly into a terminal-based coding agent.

While modern error tracking platforms offer detailed data such as browser environments and user steps, the transition between the monitoring UI and the code editor is often inefficient. Speeding up the debugging process requires removing the need to toggle between tools. The MCP server acts as a data pipeline that allows the agent to see what the monitoring platform sees without manual intervention.

Capturing live application errors

  • React applications connect to Better Stack using the Sentry React SDK and a specific DSN.
  • Better Stack identifies specific event sequences and browser information leading up to security errors.
  • Anonymous session replays provide a visual record of the user actions that triggered a crash.

A live demonstration involves a video emulation app where scrubbing the timeline triggers an uncaught security error. Connecting the app via the Sentry SDK allows the platform to log these specific failures in real-time. This setup provides the AI agent with a rich context including the exact environment variables and user behaviors present at the moment of failure.

Terminal-based debugging with MCP tools

  • The Better Stack MCP server gives Claude Code access to a specialized suite of diagnostic tools.
  • Deferred tool loading in the configuration prevents context window saturation by only activating tools on demand.
  • Claude Code summarizes recent errors and differentiates between unrelated issues like 404s and core security failures.

Users initialize the MCP server by running a configuration command and signing into their account. Once active, the agent can query the application's error history and summarize the latest incidents directly in the project directory. This allows for parallel processing where the agent reads the codebase while simultaneously analyzing remote error logs to find the root cause.

Automated patching and issue resolution

  • Claude Code creates feature branches and pull requests to implement suggested fixes automatically.
  • Verifying fixes locally allows the agent to merge changes and update the status of the issue in the cloud.
  • Successful patches can trigger bulk resolution of all previous occurrences of an error in the Better Stack UI.

The debugging cycle concludes with the agent generating a one-line fix for the security error and creating a pull request. After the developer merges the change and pulls the latest code, the agent confirms the fix is active in the local environment. It then communicates back to Better Stack to mark the issues as resolved, eliminating the need to visit the web dashboard entirely.

Community Posts

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

Write about this video