스택 추적이란 무엇인가?
스택 추적(Stack Trace)은 코드 실행 중 오류가 발생한 지점까지의 함수 호출 경로를 보여주는 기록입니다. 디버깅 시 어떤 함수가 어떤 순서로 호출되었는지 파악할 수 있어, 버그의 근본 원인을 빠르게 찾는 데 필수적인 도구입니다.
JavaScript에서 가장 간단하게 스택 추적을 얻는 방법은 Error 객체의 stack 속성을 활용하는 것입니다. new Error()를 생성하는 순간 현재 호출 스택이 자동으로 기록되며, 이를 문자열로 반환받아 출력하면 됩니다.
Error 객체로 스택 추적 얻기
다음 예제처럼 stackTrace 함수를 정의하면 어디서든 호출하여 현재 위치의 스택 정보를 확인할 수 있습니다.
<html>
<head>
<script>
function stackTrace() {
var err = new Error();
return err.stack;
}
console.log(stackTrace());
document.write(stackTrace());
</script>
</head>
<body>
<p>위에 스택 추적 결과가 출력됩니다.</p>
</body>
</html>실행 결과
브라우저 콘솔에는 다음과 유사한 형태로 스택 추적이 출력됩니다.
Error
at stackTrace (<anonymous>:4:17)
at <anonymous>:9:13첫 줄은 에러 메시지(또는 에러 타입)이며, 그 아래 줄부터는 호출된 함수 이름과 파일 위치, 줄 번호가 차례대로 표시됩니다. 이 정보를 통해 오류가 발생하기까지의 호출 흐름을 한눈에 파악할 수 있습니다.
try-catch 문에서 활용하기
실무에서는 예외가 실제로 발생했을 때 스택 추적을 확인하는 경우가 많습니다. try-catch 블록에서 잡힌 에러 객체에도 동일하게 stack 속성이 포함되어 있습니다.
try {
// 오류가 발생할 가능성이 있는 코드
nonExistentFunction();
} catch (e) {
console.error(e.stack); // 예외 발생 지점까지의 스택 추적 출력
}참고 사항
- 표준 여부:
Error.prototype.stack은 ECMAScript 공식 표준은 아니지만, Chrome·Firefox·Safari·Edge 등 주요 브라우저와 Node.js에서 모두 지원합니다. - 콘솔 활용: 단순히 현재 위치의 스택만 확인하고 싶다면
console.trace()를 사용하는 것도 편리합니다. - window.onerror: 처리하지 못한 전역 예외를 감지하려면
window.onerror핸들러나window.addEventListener('error', ...)를 사용할 수 있습니다.
이처럼 Error 객체의 stack 속성만으로도 손쉽게 스택 추적을 확보할 수 있으며, 이를 로깅 시스템과 결합하면 운영 환경에서 발생하는 오류 분석에 큰 도움이 됩니다.