웹 애플리케이션을 개발하다 보면 코드 어딘가에서 발생하는 처리되지 않은(unhandled) JavaScript 예외를 놓치기 쉽습니다. 이러한 오류를 전역적으로 잡아내려면 window.onerror 핸들러를 활용할 수 있습니다.
window.onerror 이벤트 핸들러
onerror 이벤트 핸들러는 오류의 정확한 원인을 파악할 수 있도록 다음 세 가지 정보를 제공합니다.
- 오류 메시지(Error message) — 브라우저가 해당 오류에 대해 표시하는 것과 동일한 메시지입니다.
- URL — 오류가 발생한 파일의 경로입니다.
- 줄 번호(Line number) — 해당 URL 내에서 오류가 발생한 줄 번호입니다.
예제 코드
다음 코드를 실행하여 처리되지 않은 예외를 잡는 동작을 직접 확인해 볼 수 있습니다. 버튼을 클릭하면 정의되지 않은 함수 myFunc()가 호출되어 오류가 발생하고, window.onerror가 이를 감지합니다.
<html>
<head>
<script>
<!--
window.onerror = function (msg, url, line) {
alert("Message : " + msg );
alert("url : " + url );
alert("Line number : " + line );
}
//-->
</script>
</head>
<body>
<p>아래 버튼을 클릭하면 결과를 확인할 수 있습니다:</p>
<form>
<input type = "button" value = "Click Me" onclick = "myFunc();" />
</form>
</body>
</html>추가 팁: 최신 방식으로 오류 잡기
최신 브라우저 환경에서는 window.addEventListener('error', ...) 방식을 사용하는 것이 권장됩니다. 여러 개의 리스너를 등록할 수 있고, 기존 핸들러를 덮어쓰지 않기 때문입니다.
window.addEventListener('error', function (event) {
console.log('메시지:', event.message);
console.log('파일:', event.filename);
console.log('줄 번호:', event.lineno);
});또한 Promise에서 처리되지 않은 거부(rejection)까지 잡고 싶다면 unhandledrejection 이벤트를 함께 등록하는 것이 좋습니다.
window.addEventListener('unhandledrejection', function (event) {
console.log('처리되지 않은 Promise 거부:', event.reason);
});이렇게 전역 오류 핸들러를 설정해 두면 운영 환경에서 발생하는 예기치 못한 오류를 로깅 서버로 전송하거나 사용자에게 안내 메시지를 보여주는 등 효과적으로 대응할 수 있습니다.