JavaScript 예외 처리



Answers

WebKit (Safari, Chrome 등)은 이제 오류를 지원하는 것으로 보입니다.

Original post : 내가 아는 한 WebKit / Safari는 onerror 이벤트를 지원하지 않습니다. 망할 수치 야.

Question

JavaScript 내에서 던져지는 모든 예외를 포착하는 가장 좋은 방법은 무엇입니까?

분명히 최고의 기술은 try ... catch를 사용하는 것입니다. 그러나 비동기 콜백 등으로 인해 까다로워 질 수 있습니다.

나는 IE와 Gecko 브라우저가 window.onerror를 지원한다는 것을 알고 있지만 Opera와 Safari는 어떨까요?

여기에 대한 중심 예외 처리 솔루션을 가지고 싶습니다 테스트 케이스 잔뜩 있습니다 :

// ErrorHandler-Test1
var test = null;
test.arg = 5;
// ErrorHandler-Test2
throw (new Error("Hello"));
// ErrorHandler-Test3
throw "Hello again";
// ErrorHandler-Test4
throw {
    myMessage: "stuff",
    customProperty: 5,
    anArray: [1, 2, 3]
};
// ErrorHandler-Test5
try {
    var test2 = null;
    test2.arg = 5;
} catch(e) {
    ErrorHandler.handleError(e);
}
// ErrorHandler-Test6
try {
    throw (new Error("Goodbye"));
} catch(e) {
    ErrorHandler.handleError(e);
}
// ErrorHandler-Test7
try {
    throw "Goodbye again";
} catch(e) {
    ErrorHandler.handleError(e);
}
// ErrorHandler-Test8
try {
    throw {
        myMessage: "stuff",
        customProperty: 5,
        anArray: [1, 2, 3]
    };
} catch(e) {
    ErrorHandler.handleError(e);
}

다른 테스트 케이스에 대해 생각해보십시오. 이 중 몇 가지 경우에는 ErrorHandler.handleError 메서드가 있습니다. try ... catch를 사용할 때 권장되는 지침 일뿐입니다.




약간의 작업만으로 모든 브라우저에서 합리적으로 완료되는 스택 트레이스를 얻을 수 있습니다.

최신 크롬과 오페라 (즉, 깜박임 렌더링 엔진을 기반으로 한 모든 것)는 ErrorEvent 및 window.onerror 대한 HTML 5 초안 사양을 완벽하게 지원합니다. 이 두 브라우저에서 window.onerror 를 사용할 수도 있고 'error'이벤트에 제대로 바인딩 할 수도 있습니다 (놀랍게도!) :

// Only Chrome & Opera pass the error object.
window.onerror = function (message, file, line, col, error) {
    console.log(message, "from", error.stack);
    // You can send data to your server
    // sendData(data);
};
// Only Chrome & Opera have an error attribute on the event.
window.addEventListener("error", function (e) {
    console.log(e.error.message, "from", e.error.stack);
    // You can send data to your server
    // sendData(data);
})

불행히도 파이어 폭스, 사파리, 인터넷 익스플로러 (IE)는 여전히 존재하며 우리는 그들을 지원해야한다. 스택 추적은 window.onerror 에서 사용할 수 없으므로 조금 더 작업해야합니다.

stacktraces를 에러에서 얻으려면 할 수있는 일은 try{ }catch(e){ } 블록에 모든 코드를 래핑 한 다음 e.stack을 살펴 보는 것입니다. 함수를 사용하고 오류 처리가 좋은 새 함수를 반환하는 wrap이라는 함수를 사용하면 프로세스를 어느 정도 더 쉽게 만들 수 있습니다.

function wrap(func) {
    // Ensure we only wrap the function once.
    if (!func._wrapped) {
        func._wrapped = function () {
            try{
                func.apply(this, arguments);
            } catch(e) {
                console.log(e.message, "from", e.stack);
                // You can send data to your server
                // sendData(data);
                throw e;
            }
        }
    }
    return func._wrapped;
};

이 작동합니다. 수동으로 랩하는 모든 함수는 오류 처리가 잘됩니다.

이미지 태그를 사용하여 다음과 같이 데이터를 보낼 수 있습니다.

function sendData(data) {
    var img = newImage(),
        src = http://yourserver.com/jserror + '&data=' + encodeURIComponent(JSON.stringify(data));

    img.crossOrigin = 'anonymous';
    img.onload = function success() {
        console.log('success', data);
    };
    img.onerror = img.onabort = function failure() {
        console.error('failure', data);
    };
    img.src = src;
}

그러나 데이터를 시각화하려면 프런트 엔드와 데이터를 수집하려면 백엔드를 사용해야합니다.

Atatus 에서 우리는이 문제를 해결하기 위해 노력하고 있습니다. 오류 추적 이상으로, Atatus는 실제 사용자 모니터링을 제공합니다.

Atatus 사용해보십시오.

면책 조항 : 저는 Atatus의 웹 개발자입니다.




나는 또한 오류 처리 및 stacktrace 및 사용자 작업에 대한 로깅을 찾고 있었는데 이것이 내가 당신도 https://github.com/jefferyto/glitchjs 도움이되기를 희망하는 것으로 나타났습니다.




자신의 예외 처리기로 모든 예외를 잡아서 instanceof를 사용하십시오.

$("inuput").live({
    click : function (event) {
        try {
            if (somethingGoesWrong) {
                throw new MyException();
            }
        } catch (Exception) {
            new MyExceptionHandler(Exception);
        }

    }
});

function MyExceptionHandler(Exception) {
    if (Exception instanceof TypeError || 
        Exception instanceof ReferenceError || 
        Exception instanceof RangeError ||  
        Exception instanceof SyntaxError ||     
        Exception instanceof URIError ) {
        throw Exception; // native error
     } else {
         // handle exception
     }
}

try-catch 블록이 없으므로 MyExcetpionHandler는 기본 오류를 발생시킵니다.

http://www.nczonline.net/blog/2009/03/10/the-art-of-throwing-javascript-errors-part-2/ 방문 http://www.nczonline.net/blog/2009/03/10/the-art-of-throwing-javascript-errors-part-2/




Related