[SW Engineering] 구체적인 사례로 보는 JavaScript Stack Trace 읽는 법

프로젝트를 하면서 발생한 에러를 중심으로 JavaScript(이하 JS) Stack Trace 읽는 법을 정리하려고 한다. JS뿐만 아니라 모든 언어에도 적용 가능하다.

 

발생한 에러

Uncaught TypeError: Cannot read properties of undefined (reading 'message')
    at Object.error (cart:163:50)
    at c (jquery-3.5.1.min.js:2:28294)
    at Object.fireWith [as rejectWith] (jquery-3.5.1.min.js:2:29039)
    at l (jquery-3.5.1.min.js:2:79825)
    at XMLHttpRequest.<anonymous> (jquery-3.5.1.min.js:2:82254)

1. 에러 타입과 메시지

 

Uncaught TypeError: Cannot read properties of undefined (reading 'message')

 

분석:

• Uncaught: 예외가 catch되지 않았음 (처리되지 않은 에러)
• TypeError: 타입 관련 에러 (잘못된 타입으로 연산 시도)
• Cannot read properties of undefined (reading 'message'): undefined인 객체의 message 속성에 접근하려 했음

 

해석 : 어떤 변수, 속성이 undefined인데, 그 변수에서 .message를 읽으려고 해서 에러 발생

 

 

 

2. Stack Trace (호출 스택) 분석

Uncaught TypeError: Cannot read properties of undefined (reading 'message')
    at Object.error (cart:163:50)                           ← 실제 에러 발생 지점 (여기서 시작)
    at c (jquery-3.5.1.min.js:2:28294)                     ← 이 함수에서 위 함수를 호출
    at Object.fireWith [as rejectWith] (jquery-3.5.1.min.js:2:29039)
    at l (jquery-3.5.1.min.js:2:79825)
    at XMLHttpRequest.<anonymous> (jquery-3.5.1.min.js:2:82254) ← 최초 시작점

 

 

2.Stack Trace 읽기 팁

2.1. 위에서부터 읽기

• 가장 위에 있는 것이 실제 에러 발생 지점
• 아래로 갈수록 호출 경로

2.1.1 실제 코드 호출 vs Stack Trace 읽는 방향

• 실제 코드 호출: 아래 → 위 (XMLHttpRequest → jQuery → 내 코드)
• Stack Trace 읽기: 위 → 아래 (에러 발생지점부터)

2.2. 라이브러리 코드는 건너뛰기

• jquery.min.js, lodash.js 같은 라이브러리 스택은 참고용
• 내가 작성한 코드 부분에 집중

2.3. 익명 함수 주의

• <anonymous>는 이름 없는 함수
• 콜백 함수나 즉시실행함수에서 자주 발생

2.4 파일 위치와 줄 번호 읽기

형식: (파일명:줄번호:문자위치)

at Object.error (cart:163:50)

• cart: 파일명 (cart.js 또는 cart.html 내의 스크립트)
• 163: 163번째 줄
• 50: 그 줄에서 50번째 문자 위치

 

 

실제 디버깅 과정

0단계 : 에러 메세지 읽기

Uncaught TypeError: Cannot read properties of undefined (reading 'message')

• Uncaught: 예외가 catch되지 않았음 (처리되지 않은 에러)
• TypeError: 타입 관련 에러 (잘못된 타입으로 연산 시도)
• Cannot read properties of undefined (reading 'message'): undefined인 객체의 message 속성에 접근하려 했음

1 단계 : StackTrace 가장 윗줄 에러 찾기

at Object.error (cart:163:50)  ← 여기가 실제 문제 발생 지점

 

2단계: 해당 파일과 줄 번호 확인

 

• cart 파일의 163번째 줄로 이동
• 거기서 .message를 사용하는 코드 찾기

3단계: 변수 상태 확인

// 163번째 줄 근처에서
alert(jqXHR.responseJSON.message);  // ← jqXHR.responseJSON이 undefined

4단계: 원인 파악

• jqXHR.responseJSON이 undefined인 이유 찾기
• 서버 응답이 JSON이 아닌 다른 형태로 왔을 가능성 확인