JavaScript 오류 처리 및 스택 추적에 대한 간략한 분석-JS 튜토리얼-php.cn

때때로 코드 축적 과정에서 오류 처리 및 스택 추적에 대한 일부 세부 사항이 무시되지만 이러한 세부 사항에주의를 기울이면 테스트 또는 오류 처리 관련 라이브러리 작성에 매우 유용합니다. 이제 훌륭한 처리를 제공합니다 이 아이디어는 우리가 스택을 처리하는 방식을 크게 향상시킬 수 있습니다. 사용자의 주장이 실패하면 더 신속한 정보를 제공하여(사용자가 찾는 데 도움이 됨)

스택 정보를 합리적으로 처리하면 쓸모 없는 데이터만 지우고 집중할 수 있습니다. 동시에 Errors 개체와 관련 속성을 더 잘 이해하면

Errors.

(함수 호출 스택은 어떻게 작동합니까?

오류에 대해 이야기하기 전에 먼저 먼저 함수 호출 스택의 원리를 이해하세요.

함수는 호출되면 스택의 맨 위로 푸시됩니다. 함수가 완료된 후에는 스택의 맨 위에서 제거됩니다. 의 스택은 LIFO(후입선출)로 알려진 후입선출입니다.

예:

function c() {
    console.log(&#39;c&#39;);
}
function b() {
    console.log(&#39;b&#39;);
    c();
}
function a() {
    console.log(&#39;a&#39;);
    b();
}
a();

로그인 후 복사

In 위 예에서 함수 a가 실행되면 맨 위에 추가됩니다. 그런 다음 함수 a 내부에서 함수 b가 호출되면 함수 b가 스택의 맨 위로 푸시됩니다. 함수 c가

함수 b의 내부 부분이 호출되면 스택의 맨 위로 푸시됩니다.

함수 c가 실행되면 스택에는 a, b, c가 이 순서대로 포함됩니다.

함수 c가 실행되면 스택 맨 위에서 제거되고 컨트롤이 삭제됩니다. 함수 호출의 흐름은 함수 b로 돌아갑니다. 함수 b의 실행이 끝나면 스택 상단에서도 제거되고 함수 호출의 제어 흐름

은 마지막으로 함수 b로 돌아갑니다. , 함수 a도 실행 후 스택 상단에서 제거됩니다.

데모에서 스택의 동작을 더 잘 보여주기 위해 console.trace()를 사용하여 현재 스택 데이터를 콘솔에 출력할 수 있습니다. 동시에 출력 스택 데이터를 위에서 아래로 읽어야 합니다.

function c() {
    console.log(&#39;c&#39;);
    console.trace();
}
function b() {
    console.log(&#39;b&#39;);
    c();
}
function a() {
    console.log(&#39;a&#39;);
    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(&#39;c&#39;);
}
function b() {
    console.log(&#39;b&#39;);
    c();
    console.trace();
}
function a() {
    console.log(&#39;a&#39;);
    b();
}

로그인 후 복사

보시다시피 함수 c가 완료된 후에는 스택 맨 위에서 제거되었습니다.

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)

로그인 후 복사

오류 개체 및 오류 처리

때 프로그램이 실행되는 동안 오류가 발생하면 일반적으로 Error 객체가 사용자 정의 오류 객체 상속을 위한 프로토타입으로 사용될 수 있습니다. Error.prototype 객체에는 다음 속성이 포함됩니다.

constructor – 생성자 인스턴스를 가리키는

message – 오류 메시지

name – 오류의 이름(유형)

위는 Error.prototype의 표준 속성입니다. 또한 다양한 실행 환경에는 특정 속성이 있습니다. Node, Firefox, Chrome, Edge, IE 10+, Opera 및 Safari 6 +

이러한 환경에서 Error 개체에는 오류의 스택 추적이 포함된 스택 속성이 있습니다. 오류 인스턴스의 스택 추적에는 모든 항목이 포함됩니다.

Error 객체에 대해 더 알고 싶다면 MDN에서 이 글을 읽어보세요.

오류를 발생시키려면 throw 키워드를 사용해야 합니다. 오류가 발생하면 try...catch를 사용하여 오류를 실행할 수 있는 코드를 포함해야 합니다. Catch의 매개변수는 실행된 오류 인스턴스입니다.

Java와 마찬가지로 JavaScript에서도 try 후에 finally 키워드를 사용할 수 있습니다. /catch. 오류를 처리한 후 finally 문 블록에서 정리 작업을 수행할 수 있습니다.

위 구문에서는 catch 블록을 따르지 않고 try 블록을 사용할 수 있지만 그 뒤에 finally 블록이 와야 합니다. . 이는 세 가지 다른 try 문 형식이 있음을 의미합니다.

try...catch

try.. . finally

try...catch...finally

try를 삽입할 수도 있습니다. Try 문에 있는 문:

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

로그인 후 복사

catch 또는 finally에 try 문을 삽입할 수도 있습니다.

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

로그인 후 복사

이 점을 강조해야 합니다. 오류가 발생하면 Error 개체 대신 간단한 값을 던질 수 있습니다. 이는 멋져 보이고 허용되지만 특히 다른 사람의 코드를 처리해야 하는 일부 라이브러리 및 프레임워크 개발자의 경우 권장되는 접근 방식이 아닙니다. 참조할 표준이 없고 코드에서 무엇을 기대할 수 있는지 알 수 있는 방법이 없기 때문입니다. 사용자가 오류 개체를 던질 수는 없지만 단순히 문자열이나 숫자 값을 던질 수 있기 때문에 이는 스택 정보 및 기타 메타 정보를 처리하기 어렵다는 것을 의미합니다. 예:

function runWithoutThrowing(func) {
    try {
        func();
    } catch (e) {
        console.log(&#39;There was an error, but I will not throw it.&#39;);
        console.log(&#39;The error\&#39;s message was: &#39; + e.message)
    }
}
function funcThatThrowsError() {
    throw new TypeError(&#39;I am a TypeError.&#39;);
}
runWithoutThrowing(funcThatThrowsError);

로그인 후 복사

사용자가 runWithoutThrowing 함수에 전달한 매개 변수가 오류 개체를 발생시키는 경우 위 코드는 정상적으로 오류를 포착할 수 있습니다. 그런 다음 문자열을 발생시키면 몇 가지 문제가 발생합니다.

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

로그인 후 복사

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

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

const fs = require(&#39;fs&#39;);
fs.readdir(&#39;/example/i-do-not-exist&#39;, 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(&#39;Error Message: &#39; + err.message);
        console.log(&#39;See? We can use Errors without using try statements.&#39;);
    } else {
        console.log(dirs);
    }
});

로그인 후 복사

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

new Promise(function(resolve, reject) {
    reject(new Error(&#39;The promise was rejected.&#39;));
}).then(function() {
    console.log(&#39;I am an error.&#39;);
}).catch(function(err) {
    if (err instanceof Error) {
        console.log(&#39;The promise was rejected with an error.&#39;);
        console.log(&#39;Error Message: &#39; + 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&#39;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&#39;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，关于前端的一些小技巧，希望大家共同探讨，一起进步。