- In my previous post we have learnt about importing external script to a web worker.
- In this demo “We will learn to use error handling in Web Worker”.
- We can throw an error from a web worker using throw keyword.
- In the calling script we can catch the error by listening to the error event using addEventListener() function.
- In this example we have a worker squareWorker which expects a positive number to generate the square of the input number.If a negative number is supplies it throws an error message.In the calling script we have caught the error message and displayed in the browser.
- The demo is present in the positiveNoSquareWorkerDemo.html file and the code content is as follows.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Web Worker Error Handler Demo</title>
</head>
<body>
<h1 id="resultContainer"></h1>
<input type="number" id="number1" value="-4" placeholder="Enter a number">
<button id="squareResult">Square</button>
<script id="squareWorker" type="javascript/worker">
self.addEventListener("message",function(event){
var requestData = event.data,
number1 = requestData.number1,
squareResult = 0;
if(number1>0) {
squareResult = number1 * number1
self.postMessage({result:squareResult});
} else{
//For negative number throw error
throw "It is a negative number.Please supply a positive number.";
}
});
</script>
<script>
var textContent = document.querySelector('#squareWorker').textContent,
workerBlob = new Blob([textContent]),
workerURL = window.URL.createObjectURL(workerBlob),
squareWorker = new Worker(workerURL),
resultContainer = document.getElementById("resultContainer"),
squareResult = document.getElementById("squareResult"),
number1 = document.getElementById("number1"),
number2 = document.getElementById("number2");
squareResult.addEventListener("click", function () {
squareWorker.postMessage({
number1:parseInt(number1.value,10)
});
});
//Success Handler for the worker
squareWorker.addEventListener("message", function (workerEvent) {
var responseData = workerEvent.data,
result = responseData.result;
resultContainer.innerText = "Result: " + result;
});
//Error Handler for the worker
squareWorker.addEventListener('error', function(workerErrorEvent){
resultContainer.innerText = "Error: " + workerErrorEvent.message;
}, false);
</script>
</body>
</html>
- The output of the above code is as follows.
- The demo code can be viewed in the following JSBIN link.
