Claude Code와 Better Stack: 당신에게 필요한 유일한 오류 디버깅 설정

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

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 채널에 올렸던 Kent C. Dodds에 관한

00:00:49쇼츠 영상을 업로드해 보겠습니다.

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:14Sentry React SDK를 사용해

00:01:15Better Stack에 연결해 두었습니다.

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방금 발생한 에러가 여기 있네요.

00:01:34약 6분 전에 발생했습니다.

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:51AI 프롬프트를 클릭해서

00:01:53Claude code에 직접 복사할 수도 있지만,

00:01:55에러가 아주 많다면

00:01:57이 작업은 매우 번거로울 것입니다.

00:01:59그러니 이 정보를 Claude code로 직접 가져와 보죠.

00:02:02Better Stack MCP 서버를 이용하면 됩니다.

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지연 툴 로딩 기능을 켜면 됩니다.

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:42WhatsApp이나 텔레그램으로 알림을 받을 수 있고,

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:04404 에러는 별개의 이슈라고 알려주네요.

00:03:07그래서 묶어서 처리하지는 않을 겁니다.

00:03:08이제 Claude에게 보안 이슈를 수정하고

00:03:10새 기능 브랜치에서 PR을 생성하게 하겠습니다.

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새로운 변경 사항을 풀(pull)한 다음,

00:03:36Claude에게 수정 사항이 적용됐는지 확인하고

00:03:38적용됐다면 Better Stack의 이슈를 해결 처리하라고 시키면 됩니다.

00:03:41수정 사항이 적용된 것이 확인되었고

00:03:43Better Stack의 보안 이슈 세 건을 해결 처리 중입니다.

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:14더 자세히 알고 싶다면

00:04:16James의 영상을 확인해 보시기 바랍니다.

Key Takeaway

Better Stack MCP 서버와 Claude code를 결합하면 브라우저 전환 없이 터미널에서 실시간 에러 데이터를 조회하고 자동 PR 생성부터 이슈 해결까지 디버깅 전체 과정을 자동화합니다.

Highlights

Better Stack MCP 서버는 브라우저를 거치지 않고 터미널에서 에러 데이터를 직접 분석하고 수정하는 환경을 제공합니다.
React 앱의 경우 Sentry React SDK와 Better Stack 전용 DSN을 연결하여 에러 추적 설정을 1분 내에 완료합니다.
Claude의 settings.json에서 지연 툴 로딩(lazy tool loading) 기능을 활성화하면 불필요한 컨텍스트 소모 없이 필요한 도구만 호출합니다.
에이전트는 코드베이스를 분석하여 보안 에러의 근본 원인을 파악하고 단 한 줄의 코드로 수정 PR을 자동 생성합니다.
수정이 완료된 후 Claude는 변경 사항을 확인하고 Better Stack의 이슈 상태를 수동 조작 없이 원격으로 해결 처리합니다.

Timeline

비효율적인 수동 디버깅의 한계

브라우저에서 에러 정보를 복사하여 AI 에이전트에 붙여넣는 방식은 대량의 에러를 처리할 때 효율이 낮습니다.
Better Stack MCP 서버는 터미널 에이전트가 모든 에러 데이터에 직접 접근하도록 경로를 생성합니다.

Better Stack은 세션 리플레이와 앱 전용 프롬프트를 제공하여 에러 수정을 돕습니다. 하지만 처리해야 할 에러가 많아지면 웹 인터페이스와 코딩 환경을 오가는 과정에서 병목 현상이 발생합니다. MCP 서버를 도입하면 터미널 내에서 에이전트가 즉각적으로 컨텍스트를 파악합니다.

실제 보안 에러 재현 및 추적 설정

비디오 에뮬레이션 앱의 타임라인 스크러빙 과정에서 발생하는 미처리 보안 에러를 라이브로 포착합니다.
Sentry React SDK에 Better Stack 전용 DSN을 입력하면 실시간 데이터 수집이 시작됩니다.

실제 운영 중인 React 애플리케이션에서 타임라인 스크롤을 방해하는 보안 이슈를 확인합니다. Better Stack 대시보드에서는 브라우저 사양과 에러 발생까지의 정확한 사용자 경로를 데이터로 기록합니다. 익명화된 세션 리플레이 기능을 통해 에러 발생 직전의 상황을 시각적으로 복기합니다.

MCP 서버를 활용한 Claude 연동

지연 툴 로딩 기능은 Claude가 필요한 순간에만 Better Stack 도구를 호출하게 하여 토큰 비용을 절감합니다.
명령어 한 줄로 애플리케이션 내의 모든 최신 에러 요약 정보를 터미널로 가져옵니다.

Better Stack MCP 서버를 설정하면 Claude code 내에서 복잡한 로그인 과정 없이 데이터 조회가 가능합니다. 에러 요약 정보 조회를 자동화하면 새 이슈 발생 시 이메일이나 텔레그램으로 알림을 받는 워크플로우를 구축합니다. 이 시스템은 Claude가 자동으로 수정 PR을 생성하는 기초가 됩니다.

자동 수정 PR 생성 및 원격 이슈 해결

Claude는 보안 에러와 404 에러의 연관성을 분석하여 개별 수정 계획을 수립합니다.
수정된 코드를 로컬에서 검증한 뒤 터미널 명령으로 Better Stack의 이슈 3건을 일괄 해결 처리합니다.

에이전트가 코드베이스를 탐색하여 보안 이슈의 근본 원인을 특정하고 한 줄의 코드 수정으로 문제를 해결합니다. 생성된 PR은 실제 로컬 환경 테스트를 통해 재현되지 않음을 확인한 후 머지됩니다. 마지막으로 사용자가 웹 UI를 직접 조작하지 않아도 Claude가 Better Stack API를 통해 이슈 상태를 'Resolved'로 변경하며 작업을 마칩니다.

Community Posts

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

Write about this video