AI의 버그 찾기(서버 로그 vs 브라우저 로그)

VSCode의 Copilot(Claude Haiku 4.5)을 사용하여 프로젝트 내 오류를 해결한 적이 있는데 그 과정에서 알게 된 내용들을 정리

 

Claude Haiku는 다음과 같은 순서로 에러 로그를 확인했다.

# 서버 시작 & 로그를 파일에 저장하면서 백그라운드에서 실행
pnpm start:mock > /tmp/my-project.log 2>&1 &

# 컴파일 완료까지 대기
sleep 8

# 서버 준비됐는지 확인
grep "ready" /tmp/my-project.log | tail -1

# 에러가 있는지 확인
tail -30 /tmp/ciet.log | grep -E "error|Error"

# 실행 중인 서버 종료(실행 중이지 않을 경우에도 계속 진행하기 위해 || true를 붙임)
pkill -f "pnpm start:mock" || true

 

외부 /tmp/my-project.log 경로에 파일을 만들어서, 프로젝트 실행 시 발생하는 서버 로그를 저장하고 있음.

 

브라우저 콘솔 로그가 아니라 서버 로그를 저장하는 이유는 이렇다고 설명했다:

브라우저 콘솔의 문제점: 

• 사용자가 개발자 도구를 열어야 볼 수 있음
• 초기 에러는 페이지 로드 전에 발생해서 못 볼 수 있음
• 서버 에러와 클라이언트 에러가 섞여있음

서버 로그의 장점: 

• 서버가 시작될 때부터의 모든 메시지를 기록
• 컴파일 에러, 런타임 에러 모두 볼 수 있음
• 프로그래밍으로 자동 확인 가능

 

그래서 브라우저에서 모든 에러를 해결했다고 생각하면 알아서 브라우저 화면까지 열어줬다.

단, 브라우저 내에서 발생하는 콘솔로그나 사용자 상호작용에서 발생하는 에러는 내가 직접 발견해서 수정하거나 리포트 해줘야 했지만 이런 방법으로 해결할 수 있다는 게 흥미로웠다.