Teach with us

How to handle errors in HTML5 Web Workers?

HTML5Web DevelopmentFront End Technology

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.

raja
Riya Kumari
Updated on 12-Oct-2022 14:11:36

Previous Page Print Page Next Page  
Advertisements