javascript tutorial : gestion des erreurs dans un Web Worker html5

 

Dans la continuité de l’article consacré au Web Worker Multithreading Web Worker en javascript et html5, je vous montre rapidement comment gérer les erreurs associées.

 

Prérequis

– Savoir ce qu’est Javascript;
– en avoir fait un peu;
– un navigateur supportant les Web Workers (Google Chrome);
– de préférence un serveur apache fonctionnel sur lequel déployer les fichiers exemples.

Tout comme on abonne un Web Worker à l’interception de messages via l’événement du même nom, on abonne un Web Worker afin qu’il intercepte les erreurs afin qu’il puisse les traiter.

On abonne le Web Worker à l’événement error comme suit :

worker.addEventListener('error', function(event) {
     .....
  }, false);

ou

worker.onerror = function(event) {
     .....
  }, false);

Il suffit donc de spécifier l’événement error et de lui associer une fonction qui sera appelée lorsque qu’une erreur sera levée puis interceptée.

Cette fonction prend en paramètre un objet Event ayant trois propriétés :
filename : le nom du fichier concerné par l’erreur;
lineno : le numéro de ligne de l’erreur dans le script filename défini précédemment;
– et message : le message d’erreur explicite.

C’est tout ce qu’il y a à savoir sur la gestion des erreurs des Web Worker.

 

Exemple de gestion d’erreur Web Worker

Nous allons enrichir l’exemple Démo 3 de l’article Multithreading Web Worker en javascript et html5 en y ajoutant un bouton pour générer une erreur.

Le bouton va poster un message error qui lorsqu’il sera capturé par le web worker générera une erreur via la commande throw :

worker5.html

<html>
<head>
<title>DEMO WEB WORKER HTML5 JAVASCRIPT</title>
</head>
<script src="WorkerConsole.js"></script>
<body>
<h1>DEMO 5 <strong><u>WEB WORKER HTML5 JAVASCRIPT</u></strong></h1>
<br>
- <strong>Démarrer Worker</strong> : Démarrer ou redémarre le Worker après qu'il ait été suspendu.
<br>
- <strong>Suspendre Worker</strong> : Mettre le Worker en pause, l'instance du Worker est toujours présente. Il peut être redémarré via le bouton <strong>Démarrer Worker</strong>.
<br>
- <strong>Stopper Worker</strong> : Stopper le Worker, l'instance du Worker est détruite. Il ne peut être redémarré via le bouton <strong>Démarrer Worker</strong>.
<br><br>
LABEL : <label id='labelHeure'>WORKER NON DEMARRE</label>
<input type="button" id="boutonDemarrerWorker" value="Démarrer Worker">
 
<input type="button" id="boutonSuspendreWorker" value="Suspendre Worker">
 
<input type="button" id="boutonStopperWorker" value="Stopper Worker">
 
<input type="button" id="boutonGenererErreur" value="Generer Erreur">
<br>ERREUR : <label id='labelErreur'></label>
</body>
<script>
var worker;
if( !!window.Worker ) {
  // web workers supportes
  worker = new Worker("./worker5.js");
  worker.addEventListener('message', function(e) {
    // mis a jour de l'affichage a reception du message du worker
    document.getElementById("labelHeure").innerHTML = e.data;
  }, false);
  worker.addEventListener('error', function(e) {
    // mis a jour de l'affichage a reception d'une erreur
    document.getElementById("labelErreur").innerHTML = e.message + "  on " + e.filename + " at " + e.lineno;
  }, false);
} else {
  // web workers non supportes
}
 
var boutonDemarrerWorker = document.getElementById("boutonDemarrerWorker");
boutonDemarrerWorker.onclick = function(e) {
  worker.postMessage("start");
};

var boutonSuspendreWorker = document.getElementById("boutonSuspendreWorker");
boutonSuspendreWorker.onclick = function(e) {
  worker.postMessage("pause");
};

var boutonStopperWorker = document.getElementById("boutonStopperWorker");
boutonStopperWorker.onclick = function(e) {
  worker.postMessage("stop");
};

var boutonGenererErreur = document.getElementById("boutonGenererErreur");
boutonGenererErreur.onclick = function(e) {
  worker.postMessage("error");
};
</script>
</html>

worker5.js

var intervalId;
  
onmessage = function(e) {
  if ( e.data == "start" ) {
    console.log("start");
    intervalId = setInterval( envoyerDate, 1000);
  } else if ( e.data == "pause" ) {
    console.log("pause");
    clearInterval( intervalId );
    postMessage("WORKER SUSPENDU");
  } else if ( e.data == "stop" ) {
    console.log("stop");
    clearInterval( intervalId );
    postMessage("WORKER STOPPE");
    close();
  } else if ( e.data == "error" ) {
    console.log("error");
    throw "Test d'erreur";
  }
};

function envoyerDate() {
  postMessage(new Date());
}

Cliquez ici pour voir la démo 5 Web Worker html5

 

Posté dans html5Taggé faire des jeux, javascript tutorial, web worker, web worker javascript, web workers  |  Laisser un commentaire

Répondre