HTML5 웹 워커(Web Worker)를 사용하다 보면 백그라운드 스레드에서 실행 중인 스크립트 내부에서 다양한 오류가 발생할 수 있습니다. 이러한 오류를 효과적으로 감지하고 처리하려면 onerror 이벤트 핸들러를 활용하는 것이 핵심입니다.
웹 워커 오류 처리의 기본 원리
웹 워커 내에서 오류가 발생하면 해당 오류 정보가 담긴 onerror 이벤트가 메인 스레드로 전달됩니다. 개발자는 이 이벤트 핸들러를 통해 오류를 콘솔에 기록하거나, 사용자에게 알림을 표시하는 등 적절한 후속 조치를 수행할 수 있습니다.
오류 이벤트 객체에는 디버깅에 유용한 다음과 같은 속성들이 포함되어 있습니다:
- message — 발생한 오류의 메시지 내용
- filename — 오류가 발생한 스크립트 파일의 경로
- lineno — 오류가 발생한 코드의 줄 번호
실전 예제
다음은 웹 워커 파일(bigLoop.js)을 생성하고, worker.onerror 핸들러를 등록하여 발생한 오류를 브라우저 콘솔에 기록하는 전체 예제입니다.
<!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>
코드 동작 방식 살펴보기
new Worker('bigLoop.js') 구문으로 워커 객체를 생성하면, 지정된 자바스크립트 파일이 별도의 백그라운드 스레드에서 실행됩니다. 이후 두 가지 이벤트 핸들러가 각각 역할을 담당합니다.
- worker.onmessage — 워커가 작업을 정상적으로 마치고 데이터를 전달하면 호출되어 반복 횟수를 alert 창으로 표시합니다.
- worker.onerror — 워커 실행 중 오류가 발생하면 호출되어
event.message와 이벤트 객체 전체를 콘솔에 출력합니다.
이처럼 오류 핸들러를 미리 등록해 두면, 워커 내부에서 문제가 발생하더라도 애플리케이션 전체가 중단되지 않고 원인을 추적할 수 있습니다. 특히 대규모 연산을 수행하는 워커에서는 onerror 처리를 필수적으로 구현하는 것이 좋습니다.