gpt-error-analyzer 라이브러리 개발기: 실시간 에러 분석 자동화

아이디어의 시작

개발을 하면서 가끔 실없는 생각을 하곤 했다.

“한국어가 전 세계 공통어라면, 코딩도 한국어로 하면 얼마나 좋을까.”
“최소한 에러 메시지라도 한국어로 떴으면 좋겠는데...”

 

그러던 중, 코코무 프로젝트를 진행하면서 팀원들과 주고받은 무심한 한마디가 머릿속에 깊이 남게 되었다.

 

개발 중에는 늘 다음과 같은 흐름을 반복한다.

에러 발생 → 원인 검색 or GPT에게 질문 → 수정

 

우리 팀도 이 루틴 속에서 개발을 이어가고 있었고, 어느 날 팀원 중 한 명이 툭 던지듯 말했다.

"에러 뜨면 콘솔 아래에 GPT가 자동으로 분석해서 알려주면 좋을 것 같지않아요? 귀찮게 복붙도 안해도 되고.."

 

그때는 모두가 농담처럼 웃고 넘겼지만, 나는 계속해서 그 말이 머리에 맴돌았다.

 

생각해보면, 에러 메시지가 영어로 나오는 점, 그리고 그 에러를 분석해야 하는 과정—
이 두 가지를 우리는 이미 GPT를 통해 빠르게 해결하고 있었다.

 

그렇다면 정말 팀원분의 말처럼,

“에러가 뜨자마자 AI가 콘솔에 분석 결과를 자동으로 띄워준다면 어떨까?”

 

복사하고, 붙여넣고, 질문하고...
그 반복적인 과정이 확 줄어들고, 개발 흐름은 훨씬 끊김 없이 이어질 수 있을 것 같았다.

 

---

목표 설정: 에러 → GPT → 분석 결과 출력 자동화

내가 목표로 삼은 구조는 아주 단순했다.

 

브라우저에서 에러 발생
→ 자동으로 감지
→ GPT에게 전송
→ 분석 요약을 받아 콘솔에 출력

 

사용자는 에러가 뜨면 별다른 조작 없이 콘솔에서 GPT의 분석을 함께 볼 수 있다.

---

🧩 프론트만으로 해결하려 했지만, 현실은 그렇지 않았다

초기에는 단순하게 생각했다. GPT API를 클라이언트에서 직접 호출하면 되겠지.

 

gpt-error-analyzer는 프론트 라이브러리니까, 에러가 발생했을 때 해당 메시지를 바로 GPT에게 보내 분석해주는 구조면 끝날 줄 알았다.

 

곧 아래와 같은 보안 경고와 제한에 마주하게 되었다.

"It looks like you're running in a browser-like environment. This is disabled by default, as it risks exposing your secret API credentials to attackers."
— OpenAI SDK 오류 메시지 중

 

OpenAI는 공식적으로 브라우저 환경에서 API 키를 사용하는 것을 권장하지 않으며, 실제로 SDK에서도 기본적으로 막아두고 있다.

 

이 부분을 깊이 고민하지 못했던 나 자신을 반성하며... 결국 다시 생각하게 되었다.

 

그리고 고민 끝에 내린 결론은 분명했다.

GPT 호출은 반드시 백엔드에서 처리되어야 한다.

 

---

그래서 서버도 만들었다

프론트에서 직접 GPT를 호출하는 대신, 서버를 두고 POST로 에러 메시지를 전송하면 서버가 GPT에게 요청하고, 그 응답만 클라이언트로 돌려주는 구조로 바꾸었다.

 

서버의 역할은 단 하나다.

• 에러 메시지 + 스택 트레이스 수신
  → GPT에게 전송
  → 분석 요약을 받아 클라이언트에 응답

Express 기반의 아주 가벼운 구조로 작성했고, API 키는 환경변수(OPENAI_API_KEY)로 설정 가능하도록 했다.

 

이걸로 API 키 노출 문제는 해결되었다.

 

🤔 그런데 또 다른 고민이 생겼다

서버를 만들었으니 끝났다고 생각했지만, 이번엔 “이걸 다른 사람이 어떻게 쓰게 할까?”라는 문제가 남았다.

 

내가 만든 서버를 누군가가 사용하려면...

• 코드를 클론하고
• Node.js + TypeScript + 빌드 도구(tsup)를 설치하고
• 직접 빌드까지 해야 했다

이건 내가 생각하는 라이브러리 사용자 경험과는 거리가 멀었다.

 

라이브러리는 결국 간편함을 위해 사용하는 도구인데, 이 서버 구조는 사용자에게 너무 많은 설정을 요구하고 있었다.

 

🔧 해결: 실행 전용 구조로 다시 설계하다

서버는 꼭 필요했다.

그렇다면 사용자 입장에서 어떻게든 과정을 최소화해야 한다.

 

생각 끝에 도달한 방식은 바로 "빌드는 내가 하고, 사용자에겐 실행만 맡기자." 였다.

 

그래서 나는 레포를 다음과 같이 분리했다.

• gpt-error-analyzer-server
  👉 개발용 / TypeScript 원본 포함 / 빌드 및 테스트 가능
• gpt-error-analyzer-server-runtime
  👉 실행 전용 / 빌드된 dist만 포함 / clone 후 바로 실행 가능

사용자는 다음 세 줄만 입력하면 서버가 실행된다.

git clone ...
npm install
npm start

 

결국 내가 하고 싶었던 건, "사용자가 최대한 간편하고 빠르게 GPT 분석 서버를 띄우게 하자"는 것이었다.

 

지금 이 구조는 그 목표에 꽤 가까워졌다고 생각한다.

 

---

gpt-error-analyzer는 이렇게 동작합니다

아래의 코드를 통해 실제로 에러가 발생했을 때, 콘솔에 GPT의 분석 결과가 어떻게 출력되는지 확인해보았다.

import { initGptErrorAnalyzer } from 'gpt-error-analyzer';

initGptErrorAnalyzer({
  gptServerUrl: 'server url',
});

// 일부러 에러 던지기
setTimeout(() => {
  throw new Error('🔥 테스트용 에러입니다!');
}, 1000);

 

테스트용 에러를 감지하고, GPT가 자동으로 분석하여 콘솔에 출력해주는 것을 볼 수 있다!

 

https://github.com/Seio924/gpt-error-analyzer

GitHub - Seio924/gpt-error-analyzer

 

 

https://www.npmjs.com/package/gpt-error-analyzer/v/1.0.1?activeTab=readme

gpt-error-analyzer