JavaScript Tips | ログ・デバッグ・エラー処理：グローバルエラーを捕捉する

JavaScript JavaScript
スポンサーリンク
スポンサーリンク

グローバルエラー捕捉は「予期しない例外を確実に記録し、システムの安全性を守るための最後の砦」

try/catch は「自分で囲った範囲のエラー」しか捕捉できません。 しかし業務システムでは、次のような 予期しないエラー が必ず発生します。

  • 非同期処理で発生した未捕捉エラー
  • Promise の未処理拒否（Unhandled Rejection）
  • UI イベント中に発生した例外
  • 外部ライブラリ内部で発生した例外
  • 実行環境の制御外で起きた例外

これらは try/catch では捕捉できないため、 「グローバルエラー捕捉」が必要になります。

グローバルエラー捕捉は、 システムの最後の砦（Last Line of Defense） として機能します。

ここでは、初心者でも理解しやすいように、 グローバルエラー捕捉の考え方 → 実装 → 強化 → 業務テンプレート までをステップバイステップで丁寧に解説します。

グローバルエラー捕捉の目的は「予期しない例外を確実にログに残すこと」

try/catch では捕捉できないエラーがある

例：

setTimeout(() => {
  throw new Error("非同期エラー");
}, 100);
JavaScript

このエラーは try/catch では捕捉できません。

Promise の未処理拒否も危険

Promise.reject(new Error("Unhandled rejection"));
JavaScript

これも try/catch では捕捉できません。

グローバルエラー捕捉が必要な理由

  • 障害調査のために「何が起きたか」を必ず記録する
  • 予期しない例外でアプリが落ちるのを防ぐ
  • 監視ツールに送信するための基盤になる
  • try/catch の漏れを補完する

ステップ1：ブラウザのグローバルエラーを捕捉する

ブラウザでは window.onerror を使います。

window.onerror = function(message, source, lineno, colno, error) {
  console.error("[GLOBAL ERROR]", {
    message,
    source,
    lineno,
    colno,
    error,
  });
};
JavaScript

何が捕捉できる？

  • 非同期エラー
  • イベントハンドラ内の例外
  • 外部ライブラリの例外
  • スクリプト読み込みエラー

ステップ2：Promise の未処理拒否を捕捉する

ブラウザでは window.onunhandledrejection を使います。

window.onunhandledrejection = function(event) {
  console.error("[UNHANDLED REJECTION]", {
    reason: event.reason,
  });
};
JavaScript

捕捉できる例

Promise.reject(new Error("API失敗"));
JavaScript

ステップ3：Node.js のグローバルエラーを捕捉する

Node.js では process.on("uncaughtException") を使います。

process.on("uncaughtException", (error) => {
  console.error("[UNCAUGHT EXCEPTION]", error);
});
JavaScript

捕捉できる例

setTimeout(() => {
  throw new Error("非同期エラー");
}, 100);
JavaScript

ステップ4：Node.js の未処理拒否を捕捉する

process.on("unhandledRejection", (reason) => {
  console.error("[UNHANDLED REJECTION]", reason);
});
JavaScript

ステップ5：エラーを整形して読みやすくする（重要）

グローバルエラーは情報量が多いため、 整形して読みやすくする必要があります。

function formatGlobalError(error) {
  return {
    name: error?.name,
    message: error?.message,
    stack: error?.stack,
  };
}
JavaScript

ステップ6：グローバルエラーを共通 Logger に流す

function logGlobalError(error, context) {
  Logger.error(formatGlobalError(error), context);
}
JavaScript

ステップ7：ブラウザ用グローバルエラー捕捉ユーティリティ（完成版）

export const GlobalErrorHandler = {
  init() {
    window.onerror = (message, source, lineno, colno, error) => {
      Logger.error({
        type: "onerror",
        message,
        source,
        lineno,
        colno,
        error: formatGlobalError(error),
      }, "GlobalError");
    };

    window.onunhandledrejection = (event) => {
      Logger.error({
        type: "unhandledrejection",
        reason: formatGlobalError(event.reason),
      }, "GlobalError");
    };
  },
};
JavaScript

ステップ8：Node.js 用グローバルエラー捕捉ユーティリティ（完成版）

export const NodeGlobalErrorHandler = {
  init() {
    process.on("uncaughtException", (error) => {
      Logger.error({
        type: "uncaughtException",
        error: formatGlobalError(error),
      }, "GlobalError");
    });

    process.on("unhandledRejection", (reason) => {
      Logger.error({
        type: "unhandledRejection",
        reason: formatGlobalError(reason),
      }, "GlobalError");
    });
  },
};
JavaScript

ステップ9：業務での活用例

Webアプリの初期化時に呼び出す

GlobalErrorHandler.init();
JavaScript

Node.js サーバー起動時に呼び出す

NodeGlobalErrorHandler.init();
JavaScript

API サーバーでの障害監視

Logger.error("APIサーバーが異常終了しました", "Server");
JavaScript

深掘り：グローバルエラー捕捉が重要な理由

1. try/catch の漏れを補完できる

どれだけ try/catch を書いても、 予期しない例外は必ず発生します。

2. 障害調査の「最後のログ」になる

グローバルエラーは、 システムが落ちる直前の貴重な情報です。

3. 監視ツールと連携しやすい

Sentry、Datadog、CloudWatch などは グローバルエラーを送信する設計が一般的です。

4. ユーザー体験を守る

Webアプリでは、グローバルエラーを捕捉して 「画面が真っ白になる」事故を防げます。

まとめ：グローバルエラー捕捉は「システムの最後の砦」

グローバルエラー捕捉を正しく実装することで、次のメリットが得られます。

  • try/catch では捕捉できない例外を確実に記録できる
  • 障害調査が圧倒的に楽になる
  • 監視ツールとの連携が容易になる
  • システムの安定性が向上する
  • ユーザー体験を守れる

try/catch 共通化と組み合わせることで、 エラー処理の品質が劇的に向上します。

スポンサーリンク
タイトルとURLをコピーしました