Claude Code + Better Stack: Единственная настройка для отладки ошибок, которая вам нужна

Русскийالعربية Deutsch English Español Français हिन्दी Bahasa Indonesia 日本語 한국어 Português 中文

Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00Отслеживание ошибок в Better Stack действительно впечатляет.

00:00:02Оно поддерживает любые приложения, которые вы хотите создать,

00:00:04воспроизводит сессии пользователей,

00:00:05и даже предоставляет промпт, который можно вставить

00:00:07в любого ИИ-агента для кодинга с важной информацией,

00:00:10чтобы помочь вам быстро исправить ошибки.

00:00:11Но не очень эффективно каждый раз открывать браузер

00:00:13и копировать ошибку в своего ИИ-агента,

00:00:15особенно если у вас накопилось много ошибок.

00:00:17Здесь на помощь приходит MCP-сервер Better Stack,

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Загружу короткий ролик о Кенте Си Доддсе,

00:00:49который вы можете найти на канале Better Stack.

00:00:51Я выберу пресет.

00:00:52Мне нравится этот, потому что он напоминает Fallout.

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я подключил его к Better Stack

00:01:15с помощью Sentry React SDK.

00:01:17Я использую специфический DSN для Better Stack,

00:01:19который легко получить, подключив приложение,

00:01:22выбрав тип приложения для отслеживания ошибок,

00:01:24и прокрутив вниз до этого промпта,

00:01:27который можно скопировать в своего ИИ-агента.

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Мы даже можем нажать здесь, чтобы ИИ объяснил ее нам.

00:01:44Также можно посмотреть анонимный повтор сессии

00:01:46всего того, что предшествовало ошибке.

00:01:48Но сейчас давайте сосредоточимся на исправлении через Claude Code.

00:01:51Мы могли бы нажать на «AI prompt»

00:01:53и скопировать этот запрос напрямую в Claude Code,

00:01:55но это может быть очень утомительно,

00:01:57если у вас много ошибок, с которыми нужно разобраться.

00:01:59Так что давайте передадим эти данные сразу в Claude Code

00:02:02с помощью MCP-сервера Better Stack,

00:02:04который у меня уже настроен,

00:02:05но вы можете сделать это, запустив эту команду

00:02:07или отредактировав конфигурацию вашей среды кодинга

00:02:10и войдя в аккаунт Better Stack.

00:02:11MCP-сервер дает нам доступ к множеству полезных инструментов.

00:02:15И если вы хотите сэкономить контекст,

00:02:16вы можете включить отложенную загрузку инструментов

00:02:18в файле настроек Claude JSON,

00:02:19которая загружает только нужные инструменты,

00:02:21вместо того чтобы помещать в контекст абсолютно всё.

00:02:23Так как я уже нахожусь в директории проекта,

00:02:26я могу написать промпт вроде:

00:02:27«дай все детали ошибок для этого приложения».

00:02:29И Claude Code использует нужные инструменты, находит приложение

00:02:32и выдает мне сводку последних ошибок.

00:02:35Это уже само по себе очень мощно,

00:02:36потому что вы можете запускать это регулярно как рутину,

00:02:40чтобы получать письма при каждой новой ошибке,

00:02:42уведомления в WhatsApp или Telegram,

00:02:44или даже поручить Claude автоматически создавать PR

00:02:46с исправлениями новых багов.

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в новой ветке и создать pull request,

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Так что рекомендую вам изучить MCP-сервер Better Stack,

00:04:09чтобы увидеть, на что именно он способен

00:04:11для ускорения вашего рабочего процесса отладки.

00:04:12И если вы хотите узнать больше подробностей

00:04:14о самом MCP-сервере,

00:04:16посмотрите это видео от Джеймса.

Key Takeaway

Использование MCP-сервера Better Stack в связке с Claude Code автоматизирует полный цикл отладки от обнаружения ошибки до создания PR и закрытия тикета через терминал.

Highlights

Сервер MCP Better Stack передает данные об ошибках напрямую в Claude Code, исключая необходимость ручного копирования логов из браузера.
Интеграция через Sentry React SDK позволяет отслеживать сессии пользователей и технические параметры браузера в реальном времени.
Функция отложенной загрузки инструментов в конфигурации Claude JSON минимизирует расход контекстного окна ИИ.
Claude Code автоматически находит первопричину багов, создает новые ветки в репозитории и формирует Pull Request с исправлениями.
Команда проверки фикса позволяет закрывать инциденты в панели управления Better Stack прямо из терминала без использования графического интерфейса.

Timeline

Возможности мониторинга и интеграция SDK

Better Stack поддерживает воспроизведение сессий пользователей для точного понимания контекста возникновения ошибки.
Подключение React-приложений происходит через DSN Better Stack и стандартный Sentry SDK.
Система предоставляет готовые промпты для ИИ-агентов, содержащие критическую информацию об инциденте.

Мониторинг фиксирует не только сам факт ошибки, но и последовательность действий пользователя, приведшую к сбою. Данные включают параметры браузера и состояние окружения. Настройка сводится к добавлению специфического идентификатора DSN в код приложения, что позволяет сразу направлять потоки ошибок в панель управления.

Настройка MCP-сервера для терминальной отладки

MCP-сервер выступает мостом между облачными данными мониторинга и локальной средой разработки.
Опция отложенной загрузки инструментов оптимизирует использование токенов в Claude.
Установка выполняется через терминальную команду или редактирование конфигурационного файла среды кодинга.

Прямое копирование данных из UI в чат-бот становится неэффективным при большом количестве багов. Использование протокола MCP позволяет Claude Code самостоятельно запрашивать список актуальных проблем. Настройка параметров JSON гарантирует, что ИИ будет обращаться к инструментам мониторинга только при необходимости, сохраняя место в контекстном окне для анализа кода.

Автоматизированное исправление и создание Pull Request

Промпт на получение деталей ошибок выводит сводку последних инцидентов прямо в консоль.
Claude Code способен дифференцировать связанные ошибки от изолированных проблем вроде 404.
ИИ-агент самостоятельно пишет код исправления и оформляет его в отдельную ветку Git.

При запросе деталей конкретной ошибки безопасности ИИ анализирует кодовую базу проекта параллельно с данными мониторинга. Это позволяет выявить первопричину, которая может заключаться всего в одной строке кода. После генерации решения Claude Code выполняет стандартные операции Git, подготавливая изменения к слиянию без участия человека.

Верификация исправлений и управление статусом инцидентов

Локальное тестирование подтверждает устранение бага перед слиянием ветки.
Команда проверки исправлений в Claude Code автоматически обновляет статус тикетов в Better Stack.
Переход к агентскому взаимодействию сокращает время работы с графическим интерфейсом браузера.

После применения исправлений в основной ветке достаточно попросить ИИ проверить наличие фикса. Claude анализирует текущий код и, убедившись в наличии изменений, отправляет сигнал серверу Better Stack на перевод инцидента в статус 'Resolved'. Этот процесс исключает рутинные действия в веб-интерфейсе и позволяет обрабатывать накопленные ошибки серийно.

Community Posts

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

Write about this video