[javascript] JavaScript 예외 처리

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

최신 Chrome 및 Opera (즉, Blink 렌더링 엔진을 기반으로하는 모든 것)는 ErrorEvent 및 window.onerror. 이 두 브라우저에서를 사용 window.onerror하거나 (놀랍게도!) ‘오류’이벤트에 올바르게 바인딩 할 수 있습니다.

// 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);
})

불행히도 Firefox, Safari 및 IE는 여전히 주변에 있으며 우리도 지원해야합니다. 스택 트레이스는에서 사용할 수 window.onerror없으므로 조금 더 작업을해야합니다.

오류에서 스택 트레이스를 얻기 위해 할 수있는 유일한 방법은 모든 코드를 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는 실제 사용자 모니터링을 제공합니다.

시도해보십시오 https://www.atatus.com/

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