자바스크립트에서 오류가 발생했을 때 정확한 원인을 파악하려면 스택 추적(Stack Trace)이 매우 유용합니다. 스택 추적은 에러가 발생하기까지 함수가 어떤 순서로 호출되었는지를 보여주기 때문에, 디버깅 작업을 훨씬 수월하게 만들어 줍니다.
스택 추적을 얻는 가장 간단한 방법은 Error 객체를 생성한 뒤, 해당 객체가 가지고 있는 stack 속성을 확인하는 것입니다. 아래와 같이 코드에 추가하기만 하면 됩니다.
예제 코드
<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>실행 결과
위 코드를 실행하면 브라우저 콘솔과 화면에 현재 시점까지의 호출 스택이 출력됩니다.
동작 원리 설명
- new Error(): 실제로 에러를 발생시키지 않더라도, Error 객체를 생성하는 순간 그 시점의 호출 스택 정보가 객체 내부에 기록됩니다.
- err.stack: 기록된 호출 스택을 문자열 형태로 반환합니다. 함수 이름, 파일 경로, 라인 번호 등이 포함됩니다.
- console.log(): 개발자 도구 콘솔에 스택 추적을 출력하여 디버깅에 활용할 수 있습니다.
참고 사항
실무에서는 try-catch 문에서 catch 블록으로 전달된 에러 객체의 stack 속성을 활용하거나, console.trace() 메서드를 사용하는 방법도 널리 쓰입니다. 또한 브라우저마다 스택 문자열의 형식이 조금씩 다를 수 있다는 점도 참고하시기 바랍니다.