Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to handle errors in HTML5 Web Workers?
Suppose you want the browser to do complex calculations on web page on clicking a word. This will take time. So, the web page will become unresponsive until the operation is completed. You need something which will do the required operation silently without affecting the user interface. So, how to solve this problem.
In this article, we will discuss about how to solve such issues.
The solution is Web workers. But what is a web worker? Let’s see.
What is a Web Worker?
A web worker is an object consisting of Javascript codes which runs behind the web page that is, in another global context which is different from the working window, independent of all other scripts. The worker thread does not interrupt the performance of webpage like clicking, scrolling etc.
After the creation of a web worker, it sends messages to Javascript codes of which it is consisted. Specifically, it sends the messages to the event handler assigned by that Javascript code and vice versa. The data is exchanged between the web workers and the main document through messages using postMessage() method and onmessage property.
Web worker can also use XMLHttpRequest to have communication with the web server
There are 2 types of web workers −
Dedicated web workers − A dedicated worker is a one which can be accessed only by one script which has called it.
Shared web workers − A shared worker is the one which can be accessed by multiple scripts
Working of a web worker
Let’s see how to create a simple web worker which runs Javascript codes −
<script> var worker = new Worker (‘ demo.js ‘) ; </script>
postMessage() is a method used for sending messages from the worker to the main document.
Syntax
worker.postMessage();
Parameter
It contains the data that is to be passed to the main document.
Example
const webWorker = new Worker (‘ demo.js’ ); webWorker.postMessage ( ‘ This is an example ‘ );
onMessage is a property of message event which occurs after a message is received through an event source. It can also be done using addEventListener() method
Syntax
worker.onmessage = function (event) {script}
Or
Worker.addEventListener (“message”, script);
Example
<script> const webWorker = new Worker ( ‘demo.js ‘); webWorker.onmessage = function (event) => { console.log ( ‘ this is an example’ ); }; webWorker.addEventListener ( “message”, function(e) { document.getElementById ( “ demo “).innerhtml; }; </script>
How to terminate a web worker?
If you want to stop a web worker which is executing a code, you can use terminate() method which is used to stop the worker thread. It can also be done using close() method.
terminate() method is used to stop the worker from the main document while close() method is used to stop the worker from its own scope.
Syntax
webWorker.terminate(); webWorker.close();
Example
const webWorker = new Worker (‘ demo.js’); webWorker.onmessage = function (event) => { document.getElementById ( ‘ demo’ ); }; webWorker.terminate();
Debugging the errors
In Javascript, when an error occurs during the operation of the web worker, an error event is used to debug it.
There are 3 main properties of the onerror handler. They are as follows −
message − it is only notified that there is an error
lineon − notifies the number of the line inside the worker which caused the error
filename − notifies the name of the file inside the worker in which there is error.
Syntax
addEventListener ( ‘error’ , (event) => {});
Or
Onerror = ( event) => {} ;
Example
<script> const webWorker = new Worker ( ‘demo’ ); webWorker.postMessage (‘ this is an example of error handling ‘); webWorker.addEventListener ( “message” , function(event){ alert ( “Completed” + event.data + “of the operation”); }; webWorker.onerror = (event) => { console.log (‘ Error identified with your worker ‘ ) ; }; </script>
Let’s understand the whole thing with another example −
Suppose you want to find the factorial of 10000 and you want to use web workers.
First create an external js file named as demo.js
const number = 10000; const fact = 1; for ( let i= 1; i<= number; i++){ fact = fact * I; } console.log(fact);
Now write the HTML code -
<html> <title> Web Workers </title> <script> const webWorker = new Worker ( ‘demo.js’ ); webWorker.onmessage = function (event) { document.getElementById( “solution” ).innerhtml = event.data; }; webWorker.onerror = event => { console.log( “ error occurred while doing the operation “); }; </script> <body> <div id = “solution” ></div> </body> </html>
Here,
event.data element consists of the messages sent by the web worker.
Note − The codes which is executed the web worker is always stored in an individual Javascript file.
Conclusion
Web worker is a recent feature of HTML5. Although it is very helpful in performing heavy calculations on the web browser, it can have errors because it is still in the developing stage. So, it is a good thing to add error handling to the web page code so that in case of such errors you’ll get notified and hence, debugging actions could be done.
1K+ Views
