[Javascript] Call stack 출력 방법

Call stack(stack trace)를 출력하여 에러 로그를 출력하고, 디버깅하는 방법을 소개합니다.

 

가장 간단한 방법으로 로그(console.log())를 출력하여 특정 시간에 어떤 변수가 어떤 값을 갖고 있는지 확인할 수 있고, 문제 원인을 확인해볼 수 있습니다.

 

그런데 만약 어떤 함수가 호출되서 문제가 발생했는데, 어떤 경로로 호출되었는지 알고 싶을 때 로그 한줄만으로 찾기 어려울 수 있습니다. 이럴 때, Call stack을 출력하여 해당 코드까지 어떤 stack으로 함수가 호출되었는지 확인할 수 있습니다.

 

console.trace()으로 콜스택 출력

console.trace(message)는 message와 함께 콜스택을 출력합니다. 콜스택을 출력하면 해당 코드 위치까지 어떤 스택으로 함수가 호출되었는지 알 수 있습니다. 

 

아래 예제는 aaa() 함수를 호출합니다. aaa() 내부에서 trace() 함수를 호출하고, bbb()를 호출하며, 그 내부에서 다시 trace()를 출력합니다. 결과를 보시면 어떻게 콜스택이 출력되는지 알 수 있습니다.

function aaa() {
  console.trace("Trace from aaa():");
  console.log("Inside aaa()");
  bbb();
}

function bbb() {
  console.trace("Trace from bbb():");
  console.log("Inside bbb()");
}

aaa();

Output:

Error: 
Trace: Trace from aaa():
    at aaa (/home/mjs/js_project/examples/node_29eba7c610466.tmp.js:2:11)
    at Object.<anonymous> (/home/mjs/js_project/examples/node_29eba7c610466.tmp.js:12:1)
    at Module._compile (node:internal/modules/cjs/loader:1218:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at Module.load (node:internal/modules/cjs/loader:1081:32)
    at Module._load (node:internal/modules/cjs/loader:922:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47

Inside aaa()
Inside bbb()
Error: 
Trace: Trace from bbb():
    at bbb (/home/mjs/js_project/examples/node_29eba7c610466.tmp.js:8:11)
    at aaa (/home/mjs/js_project/examples/node_29eba7c610466.tmp.js:4:3)
    at Object.<anonymous> (/home/mjs/js_project/examples/node_29eba7c610466.tmp.js:12:1)
    at Module._compile (node:internal/modules/cjs/loader:1218:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at Module.load (node:internal/modules/cjs/loader:1081:32)
    at Module._load (node:internal/modules/cjs/loader:922:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47

 

console.log()로 콜스택 출력

console.log(message, error)는 message와 함께 error를 출력합니다. 에러 정보를 아래와 같이 출력하면 에러가 발생한 지점에 대한 콜스택도 함께 출력됩니다.

 

따라서, 어떤 에러가 발생했을 때 그 지점의 콜스택 정보를 보고 싶을 때는 에러 핸들링을 통해 에러의 콜스택을 출력하는 방법을 사용할 수 있습니다.

function aaa() {
  throw new Error("unknown error");
}

try {
  aaa();
} catch (error) {
  console.error("An error occurred:", error);
}

Output:

Error: 
An error occurred: Error: unknown error
    at aaa (/home/mjs/js_project/examples/node_907f6eb5110a0.tmp.js:2:9)
    at Object.<anonymous> (/home/mjs/js_project/examples/node_907f6eb5110a0.tmp.js:6:3)
    at Module._compile (node:internal/modules/cjs/loader:1218:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1272:10)
    at Module.load (node:internal/modules/cjs/loader:1081:32)
    at Module._load (node:internal/modules/cjs/loader:922:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:23:47