JavaScript에서 스택 추적 가져오기

  2. 어떻게
  3. JavaScript 하우투
  4. JavaScript에서 스택 추적 가져오기
Habdul Hazeez 2023년10월12일
JavaScript JavaScript Stack Trace
  1. JavaScript에서 오류 개체로 스택 추적 가져오기
  2. JavaScript에서 Console.trace()로 스택 추적 가져오기
  3. JavaScript에서 사용자 지정 함수로 스택 추적 가져오기
  4. JavaScript에서 StackTrace.js로 스택 추적 가져오기
JavaScript에서 스택 추적 가져오기

이 문서에서는 다음 방법을 사용하여 JavaScript에서 스택 추적을 얻는 방법을 설명합니다.

  1. 오류 개체로 스택 추적 가져오기
  2. console.trace()로 스택 추적 가져오기
  3. 커스텀 함수로 스택 트레이스 얻기
  4. StackTrace.js로 스택 추적 가져오기

JavaScript에서 오류 개체로 스택 추적 가져오기

JavaScript 오류 개체의 stack 속성을 사용하여 스택 추적을 얻을 수 있습니다. 그러나 Error 생성자를 사용하여 오류 개체를 만들어야 합니다.

따라서 코드에서 오류가 발생하면 오류 개체를 만듭니다. 결과적으로 스택 추적을 인쇄할 수 있습니다.

예를 들어, 아래 코드에 add_num 함수가 있는데, 이 함수는 두 개의 숫자를 더합니다. 한편 add_num에는 함수 인수를 숫자로 확인하는 조건부 검사가 있습니다.

따라서 확인에 실패하면 Error 생성자에서 오류 개체를 생성합니다. 그런 다음 stack 속성을 사용하여 스택 추적을 인쇄합니다.

따라서 add_num 함수의 두 번째 인수로 문자열을 테스트로 제공했습니다. 따라서 코드를 실행할 때 스택 추적을 얻습니다.

예제 코드:

function add_num(first_number, second_number) {
  if (typeof (first_number) !== 'number' ||
      typeof (second_number) !== 'number') {
    var error = new Error();
    console.log(error.stack);
  } else {
    console.log(first_number + second_number);
  }
}

let a = 23;
let b = '23';

add_num(a, b);

출력:

add_num@http://localhost/stacktrace/stacktrace-1.html:11:17
@http://localhost/stacktrace/stacktrace-1.html:21:10
stacktrace-1.html:12:13

또한 try-catch 블록으로 코드를 래핑할 수도 있습니다. 따라서 try 블록에 오류를 일으킬 수 있는 코드를 배치하고 catch 블록에서 스택 추적을 가져옵니다.

try 블록에서 오류가 발생하면 예외 변수에 액세스할 수 있습니다. 이 예외 변수에는 stack 속성이 있습니다.

예제 코드:

try {
  let a = 23;
  console.log(a - b); /* Variable b is not defined, so we get an error */
} catch (e) {
  console.log(e.stack)
}

출력:

@http://localhost/stacktrace/stacktrace-1.html:11:4
stacktrace-1.html:13:12

JavaScript에서 Console.trace()로 스택 추적 가져오기

콘솔 개체에는 스택 추적을 웹 콘솔에 인쇄하는 trace() 함수가 포함되어 있습니다. 따라서 오류가 발생한 코드 섹션에 console.trace()를 배치할 수 있습니다.

아래 예제는 앞에서 설명한 add_num 함수입니다. 그러나 console.trace() 함수를 사용하도록 수정했습니다.

따라서 유효하지 않은 인수로 add_num 함수를 호출하여 스택 추적을 인쇄할 수 있습니다. add_num 함수는 숫자만 허용하므로 유효하지 않은 인수는 문자열입니다. 다른 것은 오류를 일으킵니다.

예제 코드:

function add_num(first_number, second_number) {
  if (typeof (first_number) !== 'number' ||
      typeof (second_number) !== 'number') {
    console.trace();
  } else {
    console.log(first_number + second_number);
  }
}

let a = 23;
let b = '23';

add_num(a, b);

출력:

console.trace() stacktrace-2.html:11:13
    add_num http://localhost/stacktrace/stacktrace-2.html:11
    <anonymous> http://localhost/stacktrace/stacktrace-2.html:20

한편, 오류가 발생하면 console.trace()를 사용하는 것으로 제한되지 않습니다. 즉, 코드 실행을 인쇄하는 데 사용할 수 있습니다.

따라서 아래 예제에서는 console.trace()를 사용하여 add_num의 다른 실행을 추적합니다.

예제 코드:

function add_numbers(a, b) {
  console.trace('You called add_numbers with', a, 'and', b);
  return a + b;
}

function calculate_it() {
  let f = add_numbers(42, 9);
  let j = add_numbers(0, 0);
  return f + j;
}

function start_the_trace() {
  let a = add_numbers(12, 33);
  let b = calculate_it();
}

start_the_trace();

출력:

console.trace() You called add_numbers with 12 and 33 stacktrace-2.html:10:12
    add_numbers http://localhost/stacktrace/stacktrace-2.html:10
    start_the_trace http://localhost/stacktrace/stacktrace-2.html:21
    <anonymous> http://localhost/stacktrace/stacktrace-2.html:25
console.trace() You called add_numbers with 42 and 9 stacktrace-2.html:10:12
    add_numbers http://localhost/stacktrace/stacktrace-2.html:10
    calculate_it http://localhost/stacktrace/stacktrace-2.html:15
    start_the_trace http://localhost/stacktrace/stacktrace-2.html:22
    <anonymous> http://localhost/stacktrace/stacktrace-2.html:25
console.trace() You called add_numbers with 0 and 0 stacktrace-2.html:10:12
    add_numbers http://localhost/stacktrace/stacktrace-2.html:10
    calculate_it http://localhost/stacktrace/stacktrace-2.html:16
    start_the_trace http://localhost/stacktrace/stacktrace-2.html:22
    <anonymous> http://localhost/stacktrace/stacktrace-2.html:25

JavaScript에서 사용자 지정 함수로 스택 추적 가져오기

오류가 발생할 때 스택 추적을 생성하는 사용자 지정 함수를 정의할 수 있습니다. 또한 코드에서 오류가 발생한 곳에 함수를 배치해야 합니다.

한편 함수는 작동하여 코드 오류로 인해 함수 실행 오류가 발생합니다. 따라서 스택 추적과 그것이 함수에 영향을 미친 위치를 볼 수 있습니다.

다음 코드에는 오류가 발생할 때 스택 추적을 생성하는 사용자 지정 함수가 있습니다. 따라서 웹 브라우저 콘솔에서 스택 추적을 관찰하게 됩니다.

예제 코드:

function stack_trace() {
  function st2(f) {
    let split_string = f.toString().split('(')[0].substring(9);
    let join_string = f.arguments.join(',');
    return !f ? [] :
                st2(f.caller).concat([split_string + '(' + join_string + ')']);
  }
  return st2(arguments.callee.caller);
}

function add_num(first_number, second_number) {
  if (typeof (first_number) !== 'number' ||
      typeof (second_number) !== 'number') {
    stack_trace();
  } else {
    console.log(first_number + second_number);
  }
}

let a = 23;
let b = '23';

add_num(a, b);

출력:

Uncaught TypeError: f.arguments.join is not a function
    st2 http://localhost/stacktrace/stacktrace-3.html:12
    stack_trace http://localhost/stacktrace/stacktrace-3.html:16
    add_num http://localhost/stacktrace/stacktrace-3.html:21
    <anonymous> http://localhost/stacktrace/stacktrace-3.html:30
stacktrace-3.html:12:35

JavaScript에서 StackTrace.js로 스택 추적 가져오기

StackTrace.js는 코드에서 스택 추적을 가져오는 데 사용할 수 있는 JavaScript 라이브러리입니다. 먼저 StackTrace.js에서는 콜백 함수를 정의해야 합니다.

이 콜백 함수는 웹 브라우저 콘솔에 스택 추적을 인쇄합니다. 한편, 뒤에서 StackTrace.js는 Error.stack의 stack 속성을 사용합니다.

다음 코드에서는 CDNJS에서 StackTrace.js를 가져왔습니다. 그래서 콜백 함수를 화살표 함수로 정의하고 add_num 함수를 다시 만들었습니다.

그러나 add_num 함수는 StackTrace.js를 사용하여 스택 추적을 인쇄합니다.

예제 코드:

<head>
    <meta charset="utf-8" />
    <title>Stacktrace-4</title>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/stacktrace.js/2.0.2/stacktrace.min.js"
        integrity="sha512-9fotp9F7mNA1AztobpB07lScgCKiN4i2JuRYTl8MxiHQVJs05EJqeUfPWt9OFAKD1QsIVZiNFQSdov9luOT8TA=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer">
    </script>
</head>
<body>
    <script>
        var callback = function (stack_frames) {
            var stringified_stack = stack_frames.map((the_stack_frame) => {
                return the_stack_frame.toString();
            }).join('\n');
            console.log(stringified_stack);
        };

        function addNum(n1, n2) {
            if (typeof(n1) !== "number" || typeof(n2) !== "number") {
                StackTrace.get().then(callback);
            } else {
                console.log(n1 + n2);
            }
        }

        let a = 23;
        let b = "23";
        addNum(a, b);
    </script>
</body>

출력:

_generateError (https://cdnjs.cloudflare.com/ajax/libs/stacktrace.js/2.0.2/stacktrace.js:28:)
get (https://cdnjs.cloudflare.com/ajax/libs/stacktrace.js/2.0.2/stacktrace.js:77:)
addNum (http://localhost/stacktrace/stacktrace-4.html:24:16)
http://localhost/stacktrace/stacktrace-4.html:32:9 stacktrace-4.html:19:12
작가: Habdul Hazeez
Habdul Hazeez avatar Habdul Hazeez avatar

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

LinkedIn