웹 워커(Web Worker)는 HTML5에서 제공하는 기능으로, 메인 스레드와 별개로 백그라운드에서 JavaScript를 실행할 수 있게 해줍니다. 하지만 워커 내부에서 오류가 발생했을 때 이를 제대로 처리하지 않으면 원인 파악이 매우 어려워집니다. 다음은 웹 워커 JavaScript 파일에서 발생한 오류를 콘솔에 기록하는 오류 처리 함수의 예시입니다.
예제
오류 처리 코드를 추가하면 기존 예제는 아래와 같이 완성됩니다.
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script>
var worker = new Worker('bigLoop.js');
worker.onmessage = function (event) {
alert("Completed " + event.data + "iterations" );
};
worker.onerror = function (event) {
console.log(event.message, event);
};
function sayHello(){
alert("Hello sir...." );
}
</script>
</head>
<body>
<input type = "button" onclick = "sayHello();" value = "Say Hello"/>
</body>
</html>
코드 설명
onerror 핸들러: 워커 스크립트 실행 중 오류가 발생하면 onerror 이벤트 핸들러가 자동으로 호출됩니다. 이때 전달되는 이벤트 객체에는 message(오류 메시지), filename(오류가 발생한 파일 이름), lineno(오류가 발생한 줄 번호) 등 유용한 정보가 담겨 있어 디버깅에 큰 도움이 됩니다. 위 예제에서는 console.log()를 통해 오류 메시지와 이벤트 객체 전체를 콘솔에 출력합니다.
onmessage 핸들러: 워커가 대량 연산을 마치고 결과를 메인 스레드로 전달하면 onmessage 핸들러가 실행되어 완료된 반복 횟수를 알림 창으로 표시합니다.
이처럼 onerror 핸들러를 활용하면 워커에서 발생하는 문제를 즉시 콘솔에 기록하여 빠르게 원인을 진단할 수 있으며, 조용히 실패하는 상황을 예방해 사용자 경험 저하를 막을 수 있습니다.