JavaScript 예외를 처리하는 방법

프로그래머는 프로그램을 작성할 때 반드시 오류에 직면하게 됩니다. 이 문서는 JavaScript의 오류 처리 개념을 기반으로 합니다. JavaScript 프로그램을 작성할 때 도움이 되기를 바랍니다.

Demo Demonstration

우리가 사용하는 데모는 GitHub에서 다운로드할 수 있습니다. 프로그램이 실행되면 다음 페이지가 나타납니다:

모든 버튼이 오류를 발생시키고 TypeError를 발생시킵니다. 다음은 이 모듈의 정의입니다.

// scripts/error.jsfunction error() {var foo = {};return foo.bar();}

는 error()에 빈 객체 foo를 정의하므로 foo.bar()를 호출하면 정의되지 않았기 때문에 오류가 보고됩니다. 단위 테스트를 사용하여 확인하겠습니다.

// tests/scripts/errorTest.jsit('throws a TypeError', function () {should.throws(error, TypeError);});

단위 테스트를 위해 Should.js와 함께 Mocha를 사용했습니다.

코드 베이스를 복제하고 종속성 패키지를 설치한 후 npm t를 사용하여 테스트를 실행할 수 있습니다. 물론 다음과 같은 테스트 파일을 실행할 수도 있습니다. ./node_modules/mocha/bin/mocha presents/scripts/errorTest.js

믿어주세요. JavaScript와 같은 동적 언어에서는 누구나 쉽게 접할 수 있습니다. 이러한 오류.

잘못된 처리 방법

버튼에 해당하는 이벤트 처리 함수를 다음과 같이 좀 더 간단하게 추상화했습니다.

// scripts/badHandler.jsfunction badHandler(fn) {try {return fn();} catch (e) { }return null;}

badHandler는 fn을 콜백 함수로 받아 badHandler에서 호출됩니다. 해당 단위 테스트를 작성합니다:

// tests/scripts/badHandlerTest.jsit('returns a value without errors', function() {var fn = function()
{return 1;};var result = badHandler(fn);result.should.equal(1);});it('returns a null with errors', function() 
{var fn = function() {throw new Error('random error');};var result = badHandler(fn);should(result).equal(null);});

예외가 발생하면 badHandler가 단순히 null을 반환한다는 것을 알 수 있습니다. 전체 코드를 일치시키면 문제가 발견됩니다.

// scripts/badHandlerDom.js(function (handler, bomb) {var badButton = document.getElementById('bad');
if (badButton) {badButton.addEventListener('click', function () {handler(bomb);console.log('Imagine, getting promoted for hiding mistakes');});
}}(badHandler, error));

오류 발생 시 이를 잡아서 그냥 null을 반환하면 무엇이 잘못되었는지 전혀 찾을 수 없습니다. 이러한 실패 침묵 전략은 UI 혼란과 데이터 혼란으로 이어질 수 있으며 디버깅에 몇 시간을 소비할 수 있지만 재난의 원인인 try-catch의 코드를 무시할 수 있습니다. 코드가 너무 복잡해서 여러 수준의 호출이 있으면 무엇이 잘못되었는지 찾는 것이 거의 불가능합니다. 따라서 자동 실패 전략을 사용하는 것을 권장하지 않으며 보다 우아한 접근 방식이 필요합니다.

나쁘지는 않지만 나쁜 방법

// scripts/uglyHandler.jsfunction uglyHandler(fn) {try {return fn();} catch (e) {throw new Error('a new error');}}

오류를 처리하는 방식은 오류 e를 잡아서 새로운 오류를 발생시키는 것입니다. 이는 이전의 조용한 실패 전략보다 실제로 더 좋습니다. 문제가 발생하면 원래 발생한 오류 e를 찾을 때까지 계층별로 돌아갈 수 있습니다. 단순히 오류('새 오류')를 던지는 것은 제한된 정보를 가지며 정확하지 않습니다. 우리는 오류 개체를 사용자 정의하고 더 많은 정보를 보냅니다.

// scripts/specifiedError.js// Create a custom errorvar SpecifiedError = function SpecifiedError(message)
 {this.name = 'SpecifiedError';this.message = message || '';this.stack = (new Error()).stack;};
 SpecifiedError.prototype = new Error();SpecifiedError.prototype.constructor = SpecifiedError;
 、//  scripts/uglyHandlerImproved.jsfunction uglyHandlerImproved(fn) {try {return fn();} catch (e)
  {throw new SpecifiedError(e.message);}}// tests/scripts/uglyHandlerImprovedTest.jsit('returns a specified error with errors',
   function () {var fn = function () {throw new TypeError('type error');};should.throws(function () {uglyHandlerImproved(fn);}, 
   SpecifiedError);});

이제 이 사용자 정의된 오류 개체에는 원래의 잘못된 정보가 포함되므로 더욱 유용해집니다. . 하지만 다시 던져졌기 때문에 여전히 처리되지 않은 오류였습니다.

예외 차단

한 가지 아이디어는 모든 함수를 try...catch로 둘러싸는 것입니다.

function main(bomb) {try {bomb();} catch (e) {// Handle all the error things}}

그러나 이러한 코드는 매우 비대해지고 읽을 수 없으며 비효율적입니다. 아직도 기억하시나요? 이 글의 시작 부분에서 JavaScript의 예외는 단지 이벤트일 뿐이라고 언급했습니다. 다행스럽게도 전역 예외 이벤트 처리 방법(onerror)이 있습니다.

// scripts/errorHandlerDom.jswindow.addEventListener('error', function (e) {var error = e.error;console.log(error);});

스택 정보 가져오기

서버에 오류 정보를 보낼 수 있습니다:

// scripts/errorAjaxHandlerDom.jswindow.addEventListener('error', function (e)
{var stack = e.error.stack;var message = e.error.toString();if (stack) {message += '\n' + stack;}
var xhr = new XMLHttpRequest();xhr.open('POST', '/log', true);// Fire an Ajax request with error detailsxhr.send(message);});

더 자세한 오류 정보를 얻고 데이터 처리 수고를 덜기 위해 fundebug의 JavaScript 모니터링 플러그인을 사용하여 빠르게 연결할 수도 있습니다. 3분 안에 버그 모니터링 서비스를 시작하세요.

다음은 서버에서 받은 오류 메시지입니다.

스크립트가 다른 도메인 이름에 있는 경우 CORS를 활성화하지 않으면 스크립트 오류 외에는 유용한 오류 메시지가 표시되지 않습니다. 구체적인 해결 방법을 알고 싶다면 스크립트 오류 종합 분석을 참조하세요.

비동기 오류 처리

setTimeout의 비동기 실행으로 인해 다음 코드 예외는 try...catch에서 포착되지 않습니다.

// scripts/asyncHandler.jsfunction asyncHandler(fn) {try {// This rips the potential bomb from the current contextsetTimeout(function () {fn();}, 1);} catch (e) { }}

try...catch 문은 현재 예외만 캡처합니다. 실행 환경. 그러나 위 예외가 발생하면 JavaScript 인터프리터는 더 이상 try...catch 상태가 아니므로 catch할 수 없습니다. 모든 Ajax 요청에도 마찬가지입니다.

약간 개선하여 비동기 함수의 콜백에 try...catch를 작성할 수 있습니다.

setTimeout(function () {try {fn();} catch (e) {// Handle this async error}}, 1);

그러나 이러한 루틴으로 인해 프로젝트가 try...catch로 가득 차게 됩니다. 코드가 매우 간결합니다. 또한 JavaScript를 실행하는 V8 엔진은 함수에서 try...catch 사용을 권장하지 않습니다. 다행스럽게도 우리는 이렇게 할 필요가 없습니다. 전역 오류 처리 onerror가 이러한 오류를 잡아낼 것입니다.

결론

제 조언은 실수를 숨기지 말고 용기를 내어 버릴 수 있다는 것입니다. 코드의 버그로 인해 프로그램이 중단될 수 있으므로 누구도 부끄러워해서는 안 됩니다. 실수는 피할 수 없기 때문에 어떻게 대처하느냐가 중요합니다.

위 내용은 자바스크립트 오류 처리 방법입니다. 도움이 되셨다면 빠르게 저장해주세요.

관련 권장 사항:

작성 과정 중 vue.js의 불규칙한 공백 및 오류 보고 문제를 해결하는 방법

PHP 설치 확장 mysqli의 구현 단계 및 오류 보고에 대한 완벽한 솔루션

MySQL 데이터베이스 오류: 연결이 너무 많습니다. 해결책

위 내용은 JavaScript 예외를 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!