JavaScript에서 발생하는 모든 오류를 감지하려면 onerror() 메서드를 사용하면 됩니다. onerror 이벤트 핸들러는 JavaScript에서 오류 처리를 위해 처음 도입된 기능으로, 페이지에서 예외가 발생할 때마다 window 객체에서 error 이벤트가 트리거됩니다.
onerror 이벤트 핸들러가 제공하는 정보
onerror 이벤트 핸들러는 오류의 정확한 원인을 파악할 수 있도록 다음 세 가지 정보를 제공합니다.
- 오류 메시지(Error message) – 해당 오류에 대해 브라우저가 표시하는 것과 동일한 메시지입니다.
- URL – 오류가 발생한 파일의 경로입니다.
- 줄 번호(Line number) – 해당 URL에서 오류를 일으킨 코드의 줄 번호입니다.
예제 코드
아래 코드를 실행하여 JavaScript 오류를 감지하는 방법을 직접 확인해 보세요.
<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>실행 결과
버튼을 클릭하면 정의되지 않은 함수 myFunc() 호출로 인해 오류가 발생하고, window.onerror 핸들러가 이를 감지하여 오류 메시지, 발생 파일의 URL, 줄 번호를 차례대로 알림 창으로 표시합니다.
추가 팁: 현대적인 오류 처리 방법
window.onerror는 간단하지만 몇 가지 한계가 있습니다. 최신 브라우저 환경에서는 다음과 같은 방법을 함께 고려하는 것이 좋습니다.
- window.addEventListener('error', ...) – 캡처 단계에서 오류를 잡아 더 유연하게 처리할 수 있습니다.
- window.addEventListener('unhandledrejection', ...) – Promise에서 처리되지 않은 거부(rejection)를 감지합니다.
- try...catch 문 – 특정 코드 블록의 오류를 세밀하게 제어할 때 사용합니다.
이처럼 onerror 이벤트 핸들러를 활용하면 페이지 전체에서 발생하는 런타임 오류를 손쉽게 포착하고, 디버깅에 필요한 핵심 정보를 빠르게 확인할 수 있습니다.