JavaScript エラー処理とスタック トレースの簡単な分析

コードの蓄積の過程で、エラー処理やスタック トレースの詳細が無視されることがありますが、これらの詳細に注意すると、テストやエラー処理に関連するライブラリを作成するのに非常に役立ちます。優れた処理を提供します。このアイデアにより、スタックの処理方法が大幅に改善されます。ユーザーのアサーションが失敗した場合、より迅速な情報が提供されます (ユーザーが見つけやすくするため)。同時に、Errors オブジェクトとその関連プロパティをより深く理解すると、

Errors.

( 関数の呼び出しスタックはどのように機能するか

) エラーについて話す前に、まず関数の呼び出しスタックの原理を理解してください。

関数が呼び出されると、関数はスタックの先頭にプッシュされ、関数が完了するとスタックの先頭から削除されます。

スタックの は、LIFO (後入れ先出し) として知られる後入れ先出しです。

例:

function c() {
    console.log('c');
}
function b() {
    console.log('b');
    c();
}
function a() {
    console.log('a');
    b();
}
a();

In 上記の例では、関数 a が実行されると、それが先頭に追加されます。次に、関数 a 内で関数 b が呼び出されるとき、関数 b はスタックの先頭にプッシュされます。関数 c が

にあるとき、関数 b の内部部分も呼び出されます。スタックの最上位。

関数 c が実行されているとき、スタックには a、b、c が (この順序で) 含まれます。

関数 c の実行が終了すると、スタックの最上位から削除され、その後コントロールが削除されます。関数呼び出しのフローは関数 b に戻り、関数 b の実行が終了すると、関数 b もスタックの先頭から削除され、最後に関数呼び出し

の制御フローが関数 b に戻ります。 、関数 a も実行後にスタックの先頭から削除されます

デモでスタックの動作をよりよく示すために、console.trace() を使用して現在のスタック データをコンソールに出力できます。同時に、出力スタック データを上から下の順序で読み取る必要があります

function c() {
    console.log('c');
    console.trace();
}
function b() {
    console.log('b');
    c();
}
function a() {
    console.log('a');
    b();
}
a();

ノードの REPL モードで上記のコードを実行すると、次の出力が得られます:

Trace
    at c (repl:3:9)
    at b (repl:3:1)
    at a (repl:3:1)
    at repl:1:1 // <-- For now feel free to ignore anything below this point, these are Node&#39;s internals
    at realRunInThisContextScript (vm.js:22:35)
    at sigintHandlersWrap (vm.js:98:12)
    at ContextifyScript.Script.runInThisContext (vm.js:24:12)
    at REPLServer.defaultEval (repl.js:313:29)
    at bound (domain.js:280:14)
    at REPLServer.runBound [as eval] (domain.js:293:12)

関数 c からの呼び出し 出力するとき、スタックには関数 a、b、c が含まれています。

関数 c が完了した後、現在のスタック データを関数 b で出力すると、関数 c がスタックの先頭から削除されていることがわかります。 . この時点では、スタックには関数 a と関数 b のみが含まれています。

function c() {
    console.log('c');
}
function b() {
    console.log('b');
    c();
    console.trace();
}
function a() {
    console.log('a');
    b();
}

ご覧のとおり、関数 c が完了した後、スタックの先頭から削除されています。プログラムの実行中にエラーが発生すると、通常、Error オブジェクトがスローされます。Error オブジェクトは、ユーザー定義のエラー オブジェクト継承のプロトタイプとして使用できます。 Error.prototype オブジェクトには、次のプロパティが含まれます。

constructor – コンストラクター。インスタンスを指します

message – エラー メッセージ

name – エラーの名前 (タイプ)

上記は Error.prototype の標準プロパティです。さらに、さまざまな実行環境にはそれぞれ固有のプロパティがあります。 Node、Firefox、Chrome、Edge、IE 10 以降、Opera および Safari 6 以降

このような環境では、Error オブジェクトにはエラーのスタック トレースが含まれる stack 属性があり、エラー インスタンスのスタック トレースにはすべてが含まれます。コンストラクターの後のスタック構造

特定のプロパティについては、MDN のこの記事を参照してください。

エラーをスローするには、 throw キーワードを使用する必要があります。スローされたエラーをキャッチするには、try...catch を使用して、エラーを実行する可能性のあるコードを含める必要があります。Catch のパラメーターは、実行されたエラー インスタンスです。

Java と同様に、JavaScript では、後で、finally キーワードを使用することもできます。 try/catch. エラーを処理した後、finally ステートメント ブロックでクリーンアップ作業を行うことができます。

上記の構文では、catch ブロックを続けなくても try ブロックを使用できますが、その後にはfinally が続く必要があります。これは、3 つの異なる try ステートメント形式があることを意味します:

try...catch

try.. .finally

try...catch...finally

Try ステートメントを Try ステートメントに埋め込むこともできます:

Trace
    at b (repl:4:9)
    at a (repl:3:1)
    at repl:1:1  // <-- For now feel free to ignore anything below this point, these are Node&#39;s internals
    at realRunInThisContextScript (vm.js:22:35)
    at sigintHandlersWrap (vm.js:98:12)
    at ContextifyScript.Script.runInThisContext (vm.js:24:12)
    at REPLServer.defaultEval (repl.js:313:29)
    at bound (domain.js:280:14)
    at REPLServer.runBound [as eval] (domain.js:293:12)
    at REPLServer.onLine (repl.js:513:10)

try ステートメントを catch またはfinallyに埋め込むこともできます:

try {
    try {
        throw new Error('Nested error.'); // The error thrown here will be caught by its own `catch` clause
    } catch (nestedErr) {
        console.log('Nested catch'); // This runs
    }
} catch (err) {
    console.log('This will not run.');
}

エラーがスローされたときに、Error オブジェクトの代わりに単純な値をスローするだけで済みます。これは見た目はクールで許可されていますが、特に他の人のコードを扱う必要がある一部のライブラリやフレームワーク開発者にとっては、参照する標準がないため、何が期待できるかを知る方法がなく、推奨されるアプローチではありません。ユーザーが Error オブジェクトをスローすることを信頼することはできません。ユーザーは単に文字列または数値をスローする可能性があるためです。これは、スタック情報やその他のメタ情報を扱うことが難しいことも意味します。例:

try {
    console.log('The try block is running...');
} finally {
    try {
        throw new Error('Error inside finally.');
    } catch (err) {
        console.log('Caught an error inside the finally block.');
    }
}

ユーザーが関数 runWithoutThrowing に渡したパラメーターがエラー オブジェクトをスローした場合、上記のコードは通常どおりエラーをキャッチできます。その後、文字列をスローすると、いくつかの問題が発生します。

function runWithoutThrowing(func) {
    try {
        func();
    } catch (e) {
        console.log('There was an error, but I will not throw it.');
        console.log('The error\'s message was: ' + e.message)
    }
}
function funcThatThrowsString() {
    throw 'I am a String.';
}
runWithoutThrowing(funcThatThrowsString);

现在第二个 console.log 会输出undefined. 这看起来不是很重要, 但如果你需要确保 Error 对象有一个特定的属性或者用另一种方式来处理 Error 对象的特定属性(例如 Chai的throws断言的做法), 你就得做大量的工作来确保程序的正确运行.同时, 如果抛出的不是 Error 对象, 也就获取不到 stack 属性.

Errors 也可以被作为其它对象, 你也不必抛出它们, 这也是为什么大多数回调函数把 Errors 作为第一个参数的原因. 例如:

const fs = require('fs');
fs.readdir('/example/i-do-not-exist', function callback(err, dirs) {
    if (err instanceof Error) {
        // `readdir` will throw an error because that directory does not exist
        // We will now be able to use the error object passed by it in our callback function
        console.log('Error Message: ' + err.message);
        console.log('See? We can use Errors without using try statements.');
    } else {
        console.log(dirs);
    }
});

最后, Error 对象也可以用于 rejected promise, 这使得很容易处理 rejected promise:

new Promise(function(resolve, reject) {
    reject(new Error('The promise was rejected.'));
}).then(function() {
    console.log('I am an error.');
}).catch(function(err) {
    if (err instanceof Error) {
        console.log('The promise was rejected with an error.');
        console.log('Error Message: ' + err.message);
    }
});

处理堆栈

这一节是针对支持 Error.captureStackTrace的运行环境, 例如Nodejs.

Error.captureStackTrace 的第一个参数是 object, 第二个可选参数是一个 function.Error.captureStackTrace 会捕获堆栈信息, 并在第一个参数中创建 

stack 属性来存储捕获到的堆栈信息. 如果提供了第二个参数, 该函数将作为堆栈调用的终点. 因此, 捕获到的堆栈信息将只显示该函数调用之前的信息.

用下面的两个demo来解释一下. 第一个, 仅将捕获到的堆栈信息存于一个普通的对象之中:

const myObj = {};
function c() {
}
function b() {
    // Here we will store the current stack trace into myObj
    Error.captureStackTrace(myObj);
    c();
}
function a() {
    b();
}
// First we will call these functions
a();
// Now let's see what is the stack trace stored into myObj.stack
console.log(myObj.stack);
// This will print the following stack to the console:
//    at b (repl:3:7) <-- Since it was called inside B, the B call is the last entry in the stack
//    at a (repl:2:1)
//    at repl:1:1 <-- Node internals below this line
//    at realRunInThisContextScript (vm.js:22:35)
//    at sigintHandlersWrap (vm.js:98:12)
//    at ContextifyScript.Script.runInThisContext (vm.js:24:12)
//    at REPLServer.defaultEval (repl.js:313:29)
//    at bound (domain.js:280:14)
//    at REPLServer.runBound [as eval] (domain.js:293:12)
//    at REPLServer.onLine (repl.js:513:10)

从上面的示例可以看出, 首先调用函数 a(被压入堆栈), 然后在 a 里面调用函数 b(被压入堆栈且在a之上), 然后在 b 中捕获到当前的堆栈信息, 并将其存储到 myObj 中. 所以, 在控制台输出的堆栈信息中仅包含了 a和 b 的调用信息.

现在, 我们给 Error.captureStackTrace 传递一个函数作为第二个参数, 看下输出信息:

const myObj = {};
function d() {
    // Here we will store the current stack trace into myObj
    // This time we will hide all the frames after `b` and `b` itself
    Error.captureStackTrace(myObj, b);
}
function c() {
    d();
}
function b() {
    c();
}
function a() {
    b();
}
// First we will call these functions
a();
// Now let's see what is the stack trace stored into myObj.stack
console.log(myObj.stack);
 
// This will print the following stack to the console:
//    at a (repl:2:1) <-- As you can see here we only get frames before `b` was called
//    at repl:1:1 <-- Node internals below this line
//    at realRunInThisContextScript (vm.js:22:35)
//    at sigintHandlersWrap (vm.js:98:12)
//    at ContextifyScript.Script.runInThisContext (vm.js:24:12)
//    at REPLServer.defaultEval (repl.js:313:29)
//    at bound (domain.js:280:14)
//    at REPLServer.runBound [as eval] (domain.js:293:12)
//    at REPLServer.onLine (repl.js:513:10)
//    at emitOne (events.js:101:20)

当将函数 b 作为第二个参数传给 Error.captureStackTraceFunction 时, 输出的堆栈就只包含了函数 b 调用之前的信息(尽管 Error.captureStackTraceFunction 是在函数 d 中调用的), 这也就是为什么只在控制台输出了 a. 这样处理方式的好处就是用来隐藏一些与用户无关的内部实现细节.

感谢大家阅读本篇文章，之后也会给大家带来关于JS，关于前端的一些小技巧，希望大家共同探讨，一起进步。

相关推荐：

JavaScript和ECMAScript 之间的区别

JavaScript刷新页面location.reload()的用法

JavaScript中正则表达式的含义与使用

以上がJavaScript エラー処理とスタック トレースの簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。