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さらに、AIコーディングエージェントに
00:00:07そのまま貼り付けられるプロンプトも提供されます。
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:46Better Stackチャンネルにある、
00:00:49Kent C. Doddsのショート動画をアップします。
00:00:51プリセットを選択します。
00:00:52Falloutを思い出させるので、これが好きなんです。
00:00:55デベロッパーツールを確認してみます。
00:00:57既に2つエラーが出ていますが、
00:00:59今回直すのはこれではありません。
00:01:01タイムラインを動かしていると、新しいエラーが出ます。
00:01:03しばらく動かしてみれば再現するはずです。
00:01:06……出ましたね。
00:01:08「SecurityError」が発生しました。
00:01:10これによりタイムラインのスクロールが止まります。
00:01:12このReactアプリは、Sentry React SDKを使って
00:01:14Better Stackに接続されています。
00:01:15接続設定は非常に簡単です。
00:01:17Better Stack専用のDSNを使用しており、
00:01:19アプリケーションを連携させ、
00:01:22追跡したいアプリの種類を選び、
00:01:24下にあるプロンプトをコピーして
00:01:27AIエージェントに貼り付けるだけです。
00:01:29それだけでセットアップが完了します。
00:01:30その後、このように
00:01:31Better Stackでエラーを確認できるようになります。
00:01:33これは約6分前に発生した
00:01:34最新のエラーですね。
00:01:35クリックすると、ブラウザ情報や
00:01:38エラーに至るまでの正確なステップなど、
00:01:39多くのデータを取得できます。
00:01:41AIに解説させることも可能です。
00:01:44また、匿名化されたセッションリプレイで
00:01:46発生時の状況を動画で見ることもできます。
00:01:48では、Claude Codeを使って修正してみましょう。
00:01:51「AI Prompt」をクリックして
00:01:53Claude 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:10Better Stackにサインインするだけです。
00:02:11MCPサーバーは多くの便利なツールを提供します。
00:02:15コンテキストを節約したい場合は、
00:02:16Claudeの settings.json で
00:02:18「deferred tool loading」を有効にしてください。
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:42WhatsApp、Telegramで通知を受け取ったり、
00:02:44Claudeに自動で修正PRを
00:02:46作成させたりすることも可能です。
00:02:47今は、このSecurityErrorの詳細を見てみましょう。
00:02:50Claudeが既にプロンプトを提案してくれています。
00:02:52ここでは、このエラーに関連する
00:02:54他のエラーがないか尋ねてみます。
00:02:56まとめて修正したいからです。
00:02:58Claudeは並行してコードベースの詳細を確認し、
00:03:01問題の根本原因と
00:03:03修正案を提示してくれました。
00:03:04404エラーは別件だと判断したようです。
00:03:07これらはまとめられません。
00:03:08では、このセキュリティ問題を修正し、
00:03:10新機能をブランチで作ってPRを出させます。
00:03:12あっという間に完了しました。
00:03:14作成されたプルリクエストの
00:03:16変更ファイルを確認してみましょう。
00:03:17たった1行のコードで
00:03:20すべてが解決するなんて驚きです。
00:03:21ローカル環境でテストしてみます。
00:03:23数分間タイムラインを操作しましたが、
00:03:25エラーは再現されませんでした。
00:03:27PRがマージされたら、
00:03:29ここからさらに素晴らしいことができます。
00:03:31手動でBetter Stackの画面に行き、
00:03:33「解決済み」ボタンを押す代わりに、
00:03:35最新の変更を取り込んだ後、
00:03:36Claudeに修正が適用されているか確認させ、
00:03:38Better Stack側の課題を解決済みにさせます。
00:03:41修正が適用されていることが確認され、
00:03:433つのセキュリティ問題が解決済みになりました。
00:03:45話している間に終わってしまいましたね。
00:03:47Better StackのUIに戻ると、
00:03:49この問題が解決済みになっており、
00:03:51過去の発生事例もすべて処理されています。
00:03:53この手順を繰り返すことで、
00:03:56アプリ内の全エラーを修正していけます。
00:03:58今後の開発は間違いなく
00:04:00この方向へ進んでいくでしょう。
00:04:01UIやブラウザを開く回数は減り、
00:04:03より便利なエージェント活用が主流になります。
00:04:07ぜひBetter Stack MCP サーバーを試して、
00:04:09デバッグワークフローがどれほど
00:04:11高速化されるか体感してください。
00:04:12MCPサーバー自体の詳細については、
00:04:14Jamesのこちらの動画を
00:04:16チェックしてみてください。

Key Takeaway

Better Stack MCP サーバーと Claude Code を組み合わせることで、エラー情報の取得からコード修正、プルリクエスト作成、モニタリングツールのステータス更新までをターミナル完結の自動化フローに統合できます。

Highlights

  • Better Stack MCP サーバーは、エラー追跡データと AI コーディングエージェントをターミナル上で直接統合します。

  • Sentry React SDK を通じて Better Stack と連携し、ブラウザ情報やエラー発生までの正確なステップを収集します。

  • deferred tool loading を設定することで、必要なツールのみをオンデマンドで読み込み、コンテキストウィンドウの消費を抑制します。

  • Claude Code は特定されたエラーに対して、修正コードの作成からプルリクエストの生成までを自動で実行します。

  • 修正完了後、Claude Code は Better Stack 上のステータスを自動で解決済みに変更し、過去の同一事象も一括処理します。

Timeline

デバッグプロセスの効率化と MCP サーバーの導入

  • Better Stack はエラー追跡、セッションリプレイ、AI 用プロンプトの提供を統合したプラットフォームです。
  • ブラウザから AI エージェントへエラー情報を手動でコピーする作業は、大量のエラー発生時に非効率となります。
  • Better Stack MCP サーバーは、ターミナル上のエージェントに直接エラーの全情報を供給します。

あらゆる種類のアプリ開発において、エラー修正に不可欠な情報をエージェントに即座に受け渡す環境を構築します。これにより、デバッグプロセスにおけるブラウザとエディタの往復を排除し、作業スピードを向上させます。

React アプリケーションとの連携とエラー検知

  • Sentry React SDK と Better Stack 専用の DSN を使用してアプリケーションを接続します。
  • セッションリプレイ機能は、エラー発生時のユーザーの操作を動画形式で再現します。
  • エラー発生の約 6 分後には、ブラウザ情報や具体的なエラー発生ステップがダッシュボードで確認可能になります。

動画エミュレーションアプリにおける SecurityError の発生を例に、リアルタイムでエラーが記録される仕組みを構築します。接続設定はプロンプトのコピーと貼り付けのみで完了し、匿名化されたリプレイデータによって視覚的なデバッグが可能になります。

MCP サーバーの設定と AI エージェントによる自動分析

  • Claude の settings.json で deferred tool loading を有効にし、必要なツールだけを読み込みます。
  • アプリのエラー詳細を問い合わせるだけで、Claude Code が最新のエラー概要を特定し表示します。
  • エラー通知をトリガーにして、AI に自動で修正プルリクエストを作成させる運用が可能です。

サインインと設定ファイルの編集だけで MCP サーバーが利用可能になります。プロジェクトディレクトリで直接プロンプトを入力することで、AI がコードベースと Better Stack のデータを照合し、複数のエラーを横断的に把握します。

自動コード修正とモニタリングステータスの同期

  • Claude Code は根本原因を特定し、新しいブランチの作成から 1 行のコード修正、プルリクエスト送信までを一気通貫で行います。
  • ローカル環境でのテスト後、Claude に修正の適用を確認させ、Better Stack 側の課題を自動で解決済みに変更します。
  • 手動の解決ボタン操作をスキップし、過去の全事例を含めたステータス同期が完了します。

セキュリティ問題に関連する複数のエラーを並行して確認し、別件の 404 エラーなどは自動で除外して整理します。最終的に Better Stack の UI 上でもステータスが解決済みとして反映されるため、開発者はブラウザ操作を最小限に抑えながら全エラーの修正を進められます。

Community Posts

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

Write about this video