Holen Sie sich Stack-Trace in JavaScript

  2. How-To's
  3. JavaScript-Anleitungen
  4. Holen Sie sich Stack-Trace in JavaScript
Habdul Hazeez 12 Oktober 2023
JavaScript JavaScript Stack Trace
  1. Stack-Trace mit dem Error-Objekt in JavaScript abrufen
  2. Holen Sie sich Stack Trace mit Console.trace() in JavaScript
  3. Holen Sie sich Stack Trace mit einer benutzerdefinierten Funktion in JavaScript
  4. Holen Sie sich Stack Trace mit StackTrace.js in JavaScript
Holen Sie sich Stack-Trace in JavaScript

In diesem Artikel erfahren Sie, wie Sie einen Stack-Trace in JavaScript auf folgende Weise erhalten:

  1. Stack-Trace mit dem Fehlerobjekt abrufen
  2. Stack-Trace mit console.trace() abrufen
  3. Stack-Trace mit einer benutzerdefinierten Funktion abrufen
  4. Stack-Trace mit StackTrace.js abrufen

Stack-Trace mit dem Error-Objekt in JavaScript abrufen

Mit der Eigenschaft stack im JavaScript-Fehlerobjekt erhalten Sie einen Stack-Trace. Allerdings müssen Sie das Fehlerobjekt mit dem Konstruktor Error erstellen.

Wenn in Ihrem Code ein Fehler auftritt, erstellen Sie daher das Fehlerobjekt. Als Ergebnis können Sie den Stack-Trace drucken.

Zum Beispiel haben wir die Funktion add_num in unserem Code unten, die zwei Zahlen addiert. In der Zwischenzeit hat add_num eine bedingte Prüfung, die die Funktionsargumente als Zahlen überprüft.

Wenn also die Prüfung fehlschlägt, erstellen wir ein Fehlerobjekt aus dem Error-Konstruktor. Dann drucken wir den Stack-Trace mit der Eigenschaft stack.

Daher haben wir testweise als zweites Argument der Funktion add_num einen String übergeben. Wir erhalten also einen Stack-Trace, wenn wir den Code ausführen.

Beispielcode:

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);

Ausgang:

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

Darüber hinaus können Sie Ihren Code auch in einen try-catch-Block packen. Sie platzieren also den Code, der einen Fehler verursachen kann, im try-Block und erhalten den Stack-Trace vom catch-Block.

Wenn im try-Block ein Fehler auftritt, können Sie auf eine Ausnahmevariable zugreifen. Diese Ausnahmevariable hat die Eigenschaft stack.

Beispielcode:

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

Ausgang:

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

Holen Sie sich Stack Trace mit Console.trace() in JavaScript

Das Konsolenobjekt enthält eine trace()-Funktion, um einen Stacktrace auf der Webkonsole auszugeben. Sie können also console.trace() in einem Codeabschnitt platzieren, in dem ein Fehler aufgetreten ist.

Unser Beispiel unten ist die zuvor besprochene Funktion add_num. Wir haben es jedoch so modifiziert, dass es die Funktion console.trace() verwendet.

Daher können Sie die Funktion add_num mit einem ungültigen Argument aufrufen, um den Stack-Trace zu drucken. Ein ungültiges Argument ist ein String, da die Funktion add_num nur Zahlen zulässt; alles andere führt zu einem Fehler.

Beispielcode:

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);

Ausgang:

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

In der Zwischenzeit sind Sie nicht darauf beschränkt, console.trace() zu verwenden, wenn ein Fehler auftritt. Dies bedeutet, dass Sie es verwenden können, um die Codeausführung zu drucken.

In unserem Beispiel unten verwenden wir also console.trace(), um die unterschiedliche Ausführung von add_num zu verfolgen.

Beispielcode:

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();

Ausgang:

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

Holen Sie sich Stack Trace mit einer benutzerdefinierten Funktion in JavaScript

Sie können eine benutzerdefinierte Funktion definieren, die einen Stack-Trace erzeugt, wenn ein Fehler auftritt. Außerdem müssen Sie die Funktion dort platzieren, wo ein Fehler in Ihrem Code auftritt.

In der Zwischenzeit arbeitet die Funktion so, dass ein Fehler in Ihrem Code einen Fehler in der Funktionsausführung verursacht. Daher können Sie den Stack-Trace sehen und wo er die Funktion beeinflusst hat.

Wir haben eine benutzerdefinierte Funktion im folgenden Code, die einen Stack-Trace erzeugt, wenn ein Fehler auftritt. Sie beobachten also den Stack-Trace in der Webbrowser-Konsole.

Beispielcode:

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);

Ausgang:

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

Holen Sie sich Stack Trace mit StackTrace.js in JavaScript

StackTrace.js ist eine JavaScript-Bibliothek, die Sie verwenden können, um einen Stack-Trace in Ihrem Code zu erhalten. Erstens erfordert StackTrace.js, dass Sie eine Callback-Funktion definieren.

Diese Callback-Funktion gibt den Stack-Trace an Ihre Webbrowser-Konsole aus. Unterdessen verwendet StackTrace.js hinter den Kulissen die Eigenschaft stack von Error.stack.

Im folgenden Code haben wir StackTrace.js aus CDNJS importiert. Also haben wir die Callback-Funktion als Pfeilfunktion definiert und die Funktion add_num neu erstellt.

Die Funktion add_num verwendet jedoch StackTrace.js, um den Stack-Trace zu drucken.

Beispielcode:

<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>

Ausgang:

_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
Autor: 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