JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで例外のスタックトレースを取得する方法をわかりやすく解説

JavaScriptで例外発生時のスタックトレースを取得するには、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>

実行結果

JavaScriptで例外のスタックトレースを取得する方法をわかりやすく解説

このコードを実行すると、コンソールとページ上に現在の呼び出し履歴が出力されます。どの関数からどの関数が呼ばれたのか、またその行番号まで確認できるため、バグの原因特定に非常に役立ちます。

try-catch構文と組み合わせた実践的な使い方

実際の開発では、例外が発生した瞬間のスタックトレースを取得したいケースがほとんどです。その場合は、try-catch構文と組み合わせるのが一般的です。

try {
   // エラーが発生する可能性のある処理
   undefinedFunction();
} catch (e) {
   console.error(e.stack);
}

catchブロックで受け取ったエラーオブジェクトのstackプロパティを参照すれば、例外が発生した箇所とそこに至るまでの呼び出し経路を詳細に把握できます。ログ出力ツールやエラーモニタリングサービスと組み合わせれば、本番環境でのトラブルシューティングも効率的に行えるでしょう。

  1. JavaScriptで文字列を検索する方法【search()メソッドの使い方を解説】

    JavaScriptで文字列を検索する方法 JavaScriptで文字列の中から特定の文字列を探すには、search()メソッドを使用します。このメソッドは、引数に渡した文字列（または正規表現）が対象の文字列内で最初に一致した位置（インデックス）を返し、見つからなかった場合は -1 を返します。 以下は、JavaScriptで文字列を検索するサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8" />

  2. JavaScriptでh1のinnerTextを取得する方法｜子要素のテキストを除外する

    h1タグ内に子要素（spanなど）が含まれている場合、単純にinnerTextを取得すると子要素のテキストまで一緒に取られてしまいます。h1直下のテキストのみを取得したい場合は、childNodesとtextContentを組み合わせることで実現できます。 childNodes[0].textContent; 仕組みの解説 querySelector()で取得したh1要素に対してchildNodesを使うと、その子ノードの一覧（NodeList）が返されます。[0]で最初の子ノード、つまりh1直下のテキストノードにアクセスし、そこからtextContentを取得することで、子要素内のテキストを