JavaScript 전역 오류 처리기란?
JavaScript 애플리케이션에서 try-catch 문으로 감싸지 않은 코드에서 예외가 발생하면, 해당 오류는 브라우저 콘솔로 그대로 노출됩니다. 이런 처리되지 않은 예외(unhandled exception)를 전역적으로 잡아내려면 window.onerror 이벤트 핸들러를 활용할 수 있습니다.
window.onerror에 함수를 할당하면, 스크립트 실행 중 발생하는 모든 런타임 오류가 자동으로 이 함수로 전달됩니다. 이 핸들러는 다음과 같은 다섯 개의 매개변수를 받습니다.
- errMsg – 오류 메시지 문자열
- url – 오류가 발생한 파일의 URL
- line – 오류가 발생한 줄 번호
- column – 오류가 발생한 열 번호
- error – 오류 정보를 담고 있는 Error 객체
전역 오류 처리기 구현 예제
다음 예제는 window.onerror를 사용해 처리되지 않은 예외를 잡아내는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<body>
<script>
window.onerror = function(errMsg, url, line, column, error) {
var result = !column ? '' : '\ncolumn: ' + column;
result += !error;
document.write("Error= " + errMsg + "\nurl= " + url + "\nline= " + line + result);
var suppressErrorAlert = true;
return suppressErrorAlert;
};
setTimeout(function() {
eval("{");
}, 500)
</script>
</body>
</html>코드 동작 방식
위 예제의 흐름을 단계별로 살펴보면 다음과 같습니다.
window.onerror에 오류 정보(메시지, URL, 줄 번호, 열 번호, Error 객체)를 받아 화면에 출력하는 함수를 등록합니다.- 열 번호(column)나 Error 객체(error)가 존재하지 않는 브라우저 환경을 대비해, 값이 없으면 빈 문자열을 반환하도록 처리했습니다.
setTimeout으로 500ms 후eval("{")를 실행하여 의도적으로 구문 오류(SyntaxError)를 발생시킵니다.- 발생한 오류는 별도의 try-catch 없이도 전역 핸들러에 의해 자동으로 잡히고, 오류 메시지와 위치 정보가 화면에 출력됩니다.
return true의 역할
핸들러 마지막에서 true를 반환하면 브라우저의 기본 오류 알림 동작(콘솔 출력 등)이 억제됩니다. 즉, 오류를 직접 처리했음을 브라우저에 알려주는 것입니다. 반대로 false를 반환하거나 아무것도 반환하지 않으면, 기본 오류 처리도 함께 수행됩니다.
참고 사항
최신 브라우저에서는 window.addEventListener('error', ...) 방식이나 Promise 거부(rejection)를 잡는 unhandledrejection 이벤트를 함께 사용하는 것이 권장됩니다. 또한 실무에서는 이러한 전역 오류 처리기를 통해 오류 정보를 서버로 전송해 로그를 수집하는 용도로 많이 활용합니다.