JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5のWeb Workerで発生したエラーをコンソールにログ出力する方法

Web Worker内でエラーが発生した場合、メインスクリプト側の onerror イベントハンドラを利用することで、そのエラーを捕捉してコンソールにログとして記録できます。ここでは、エラーハンドリングを行うJavaScriptファイルの実装例を紹介します。

コード例

エラー処理のコードを追加すると、基本的なWeb Workerのサンプルは次のようになります。

<!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>

解説のポイント

この例では、bigLoop.js というワーカーファイルを読み込み、時間のかかるループ処理をバックグラウンドで実行しています。worker.onerror にイベントハンドラを登録しておくことで、ワーカー内で例外やスクリプトエラーが発生した際に自動的に呼び出され、エラー内容をコンソールへ出力できます。

onerrorイベントで取得できる主な情報

  • event.message：エラーの内容を示すメッセージ文字列
  • event.filename：エラーが発生したファイル名（ここでは bigLoop.js）
  • event.lineno：エラーが発生した行番号

なお、onerror ハンドラ内で event.preventDefault() を呼び出すと、エラーがブラウザのデフォルトのエラー報告（コンソールへの自動出力など）に伝播するのを防ぐことも可能です。デバッグ時には console.log() を活用することで、ワーカースレッド内の問題を効率的に特定できるようになります。

  1. HTML5 Webワーカー（Web Workers）が役立つのはなぜ？

    JavaScriptのシングルスレッドという課題JavaScriptは、もともとシングルスレッド環境で動作するように設計されています。そのため、複数のスクリプトを同時に実行することができません。UIイベントへの応答、大量のAPIデータの取得・加工、DOM操作など、複数のタスクを同時にこなす必要がある場面では、これが大きな制約になります。CPUの使用率が高くなると、JavaScriptはブラウザ全体をフリーズさせてしまうことがあります。次に挙げるのは、大きなループ処理によってJavaScriptがブラウザを固めてしまうシンプルな例です。<!DOCTYPE HTML> <html

  2. JavaScriptのconsole.log()メソッドとは？基本の使い方と実行例をわかりやすく解説

    JavaScriptのconsole.log()メソッドは、ブラウザの開発者コンソールにメッセージや値を出力するために使用される、最も基本的かつ頻繁に使われるデバッグ用メソッドです。 文字列だけでなく、数値・オブジェクト・配列など、あらゆる型のデータを出力できるため、変数の中身を確認したり、プログラムの動作を検証したりする際に欠かせません。 基本構文 console.log(出力したい値); 引数には、出力したいメッセージや変数、オブジェクトなどを指定します。カンマ区切りで複数の値を渡すことも可能です。 コード例 以下は、console.log()メソッドを使ってオブジェクトと文字列をコンソー