await を書き忘れた場合の catch 方法

Question

実現したいこと

JavaScript で await を忘れたときに catch したいです。

発生している問題

該当のソースコードについて、[実行➁] の場合に値が確認できなくて困りました。

[実行➀] await あり
-> ブラウザ開発ツールで {args: 'illegal'} が確認できる

[実行➁] await を忘れた
-> ブラウザ開発ツールで {args: 'illegal'} が確認できない

具体的に言いますと、[実行➁] において unhandledrejection が反応せず、await を忘れたときにブラウザ開発ツールで制御できないという問題です。

await を忘れたときも、{args: 'illegal'} を確認したいのですが、良い方法はありますか？

該当のソースコード

ポイントとしては、handle-unhandled-errors.js ファイルのwindow.onerror と unhandledrejection で制御しているつもりなのに、await を忘れたときにどちらも反応してくれない！という点です。

main.js

import { initApp } from "./init-app.js";
import { handleError } from "./handle-error.js";

(async () => {
    try {
        // [実行➀] await あり
        // -> 問題なく開発ツールで {args: 'illegal'} が確認できる
        // await initApp();

        // [実行➁] await を忘れた
        // -> 確認できない
        initApp();
    } catch (error) {
        handleError(error);
    }
})();

init-app.js

import { hoge } from "./hoge.js";

export const initApp = async () => {
    await hoge();
};

hoge.js

import { fuga } from "./fuga.js";

export const hoge = async () => {
    await fuga();
};

fuga.js

import { validate } from "./validator.js";

export const fuga = async () => {
    const args = "illegal"; // 不正な値で検証時に throw する
    validate(args);
};

validator.js

import { CustomError } from "./CustomError.js";

export const validate = (args) => {
    if (args === "illegal") {
        throw new CustomError("不正な値です.", { args });
    }

    return true;
};

handle-error.js

export const handleError = (error, options = {}) => {
    error.logError(options);
};

CustomError.js

// 第二引数に確認用の debugInfo を持ったエラー
export class CustomError extends Error {
    constructor(message, debugInfo = {}) {
        super(message);
        this.name = "CustomError";
        this.debugInfo = debugInfo;
    }

    logError() {
        if (this.hasOwnProperty("debugInfo")) {
            console.error(this.stack, this.debugInfo);
        } else {
            console.error(this.stack);
        }
    }
}

handle-unhandled-errors.js

import { CustomError } from "./CustomError.js";

window.onerror = function (message, source, lineno, colno, error) {
    console.log("未制御例外を処理します", { error });

    if (error instanceof CustomError) {
        if (error.hasOwnProperty("debugInfo")) {
            console.error("Unhandled", error.stack, error.debugInfo);
        } else {
            console.error("Unhandled", error.stack);
        }

        // true を返し, throw によるデフォルトのコンソール出力を防ぐ
        return true;
    } else {
        // どうせ window.onerror までしかスタックを追えぬので
        // ここはデフォルトのコンソール出力を使う
        return false;
    }
};

// async など Promise の過程は onerror が使えないので addEventListener する
window.addEventListener("unhandledrejection", (event) => {
    const error = event.reason;

    console.log("Promise系の未制御例外を処理します", { error });

    // 文字列や非Errorオブジェクトもカバーする
    const isErrorInstance = error instanceof Error;
    const message = isErrorInstance
        ? error.message
        : typeof error === "string"
        ? error
        : JSON.stringify(error);

    const stack =
        isErrorInstance && error.stack
            ? error.stack
            : "No stack trace available";

    const debugInfo =
        isErrorInstance && "debugInfo" in error ? error.debugInfo : null;

    if (debugInfo) {
        // デフォルトのエラーハンドリングを防ぎ, 代わりに debugInfo つきの console.error を実行
        event.preventDefault();
        console.error("Unhandled", stack, debugInfo);
    } else {
        // デフォルトのエラーハンドリングが一番情報が多いのでここは何もしない
    }

    // logErrorToServer({
    //     message,
    //     stack,
    // });
});

試したこと

下記 [実行➂] のように、initApp() の返り値を確認し、await を忘れた場合にも catch で拾うように Promise.catch を明示してみました。

main.js (修正バージョン)

import { initApp } from "./init-app.js";
import { handleError } from "./handle-error.js";

(async () => {
    try {
        // [実行➀] await あり
        // -> 問題なく開発ツールで {args: 'illegal'} が確認できる
        // await initApp();

        // [実行➁] await を忘れた
        // -> 確認できない
        // initApp();

        // [実行➂] await を忘れた場合にも catch で拾うように Promise.catch を明示
        // -> 確認できたけどこれ書くならそもそも await を書き忘れることはない
        const result = initApp();
        if (result instanceof Promise) {
            result.catch((error) => handleError(error));
        }
    } catch (error) {
        handleError(error);
    }
})();

すると確認できましたが、これを書くならそもそも await を書き忘れることはないでしょうからダメダメな気がいたします・・

理想としては handle-unhandled-errors.js の修正による解決で、「await を書き忘れてもいつだって僕がなんとかしてあげるよ！」みたいな頼れる感じのやつなのですが、良い方法ございますでしょうか？

補足情報（FW/ツールのバージョンなど）

Google Chrome 利用ですが、利用ブラウザに関わらず確認できるようにしたいなと思っています。

以上です。
よろしくお願い致します。

Comments

[Lhankor_Mhy]

> [実行➁] await を忘れた
> -> ブラウザ開発ツールで {args: 'illegal'} が確認できない

というのがよくわからなかったです。コンソールに {args: 'illegal'} が表示されているだけではダメ、ということでしょうか？

[munekun]

要領を得ない質問をいつも丁寧に読んでくださって誠にありがとうございます。

> というのがよくわからなかったです。コンソールに {args: 'illegal'} が表示されているだけではダメ、ということでしょうか？

「コンソール」とは「ブラウザ開発ツールのコンソール」ですよね？うーん、[実行➁] のように await を書き忘れたケースにおいて {args: 'illegal'} は表示されないと思います。（今改めて確認しました。）

[実行➁] のように await を書き忘れたケースでも {args: 'illegal'} をコンソールに表示したいのです。でも handle-unhandled-errors.js のコードでは catch できず、コンソールに表示できないのです。なので、await を書き忘れた場合の catch 方法というタイトルで、handle-unhandled-errors.js の修正による解決を求めているという次第です。

[実行➁] のように await を書き忘れたケースでは handle-unhandled-errors.js による catch が効かず、 {args: 'illegal'} がコンソールに表示されず、ちょっと困っちゃった。という感じです。

期待していたのは「handle-unhandled-errors.js が、最後の砦として、未 catch をおしなべて catch してくれる」という機能だったのですが、今回のように await を書き忘れたケースでは catch してくれなくて、 catch してくれないから、{args: 'illegal'} がコンソールに表示されないのです。

[Lhankor_Mhy]

コンソールに表示されるというのは、こういうのではダメ、ということでいいですか？

https://ddjkaamml8q8x.cloudfront.net/questions/2025-06-10/0f98fd51-0c8f-4c3d-96b0-eed3a05ba9a9.png

できればどういうコンソールの出力を期待しているのか、共有していただきたいです。

[Lhankor_Mhy]

もしかして、import "./handle-unhandled-errors.js"; が漏れているとか……？

[munekun]

おそらく [実行➁] のように await を書き忘れたケースの結果が、画像の一番最後の Uncaught ... だと思います。

画像の上から2番目の Unhandled ... には {args: 'illegal'} が表示されていますよね？これを常に期待しています。

期待しているのは、[実行➁] のように await を書き忘れたケースでも、 {args: 'illegal'} を表示することです。

そのために Uncaught ...（ブラウザが自動で表示するログ）ではダメで、 Unhandled ...（handle-unhandled-errors.js による catch が表示するログ）を出したいと思っています。

なのに、現状の handle-unhandled-errors.js は、[実行➁] のように await を書き忘れたケースでは catch してくれないのです。

[Lhankor_Mhy]

画像の上から2番目のが、[実行➁]の際に表示されているんですが……　逆に言うと[実行①]の時にはエラーがハンドルされるので、unhandled ... とは出ないと思うんですよね。

どうも、そちらとこちらでは違うコードを実行してそうですね。

[munekun]

> もしかして、import "./handle-unhandled-errors.js"; が漏れているとか……？
ここまで自分がアホだとは思いませんでした……。

仰る通りでした。泣きたい。

ありがとうございます、というか、もう本当に申し訳ございません。

[Lhankor_Mhy]

ご解決されて何よりです。
そういう時ってありますよね、お察しいたします……

Answer 1

こんにちは。

Promise 内で throw されてハンドルされなかった例外は console に自動的に出力されていると思いますが、それでは不足なのでしょうか？
await していない以上コンテキストが一致しないため catch は不可能ですが、console で観測した時点でコードを修正すれば済む話な気がしています。
あるいは、Chrome devtools の Breakpoints 設定で 'Pause on caught exceptions' のチェックを入れると、非同期例外であっても発生直後に devtools で観測できるようになります。

「await し忘れ」を問題としているのであれば、上記の対応のいずれかで開発途中に解消できるのではないかと思います。
「await していない対象の例外を catch する」をしたいというのが主題である場合、それは非同期の仕組み上根本的に不可能です。

Comments

[munekun]

ありがとうございます。

> それでは不足なのでしょうか？
debugInfo の値、つまり{args: 'illegal'} が確認できないのが不足を感じているポイントなのです。

> console で観測した時点でコードを修正すれば済む話な気がしています。
それは一理ありだと思います。実際今回も観測した時点で修正できました。
けれど handle-unhandled-errors.js で制御できないのが納得できなないポイントなのです。

せっかく「未 catch をおしなべて制御するための handle-unhandled-errors.js を作った」のに、それでは安心しきれない（debugInfo の値が確認できないケースがある）というのが・・うーん、という感じなのです。

[tamoto]

handle-unhandled-errors.js をインポートする ("unhandledrejection" を listen する) と、Promise の投げっぱなし例外はそちらに流れるはずなので、そこで event オブジェクトをそのまま丸ごと console.error に放り込めば console 上で debugInfo の値も確認できそうな気がします。
await し忘れの例外というものは基本的に1件も存在してはいけないと考えた方が良いので、それくらい雑に観測した方が (得られる情報量も多いので) 良い結果になるのではないかと思いました。

```handle-unhandled-errors.js
window.addEventListener("unhandledrejection", console.error); // これだけ
```

[munekun]

ありがとうございます。自分であれやこれやとマシマシしてしまいましたが、そちらの `// これだけ` でもよかったのですね。下手なアレンジを続けずに済みました。

尚、質問の方はコメント欄で Lhankor_Mhy さんがご指摘くださったように import 忘れが原因でした。

Answer 2

コメント欄にて、Lhankor_Mhy さんがご回答くださった下記の通りでした。

もしかして、import "./handle-unhandled-errors.js"; が漏れているとか……？

くだらないミスでお騒がせしてしまい大変申し訳ございません。

Lhankor_Mhy さん、本当にありがとうございます。
tamoto さん、yambejp さんもご助力感謝です。

Answer 3

catchしたいならerrorをthrowしてください
そうなると戻り値の型をチェックするのが手っ取り早いかと

<script type="module">
const test=async ()=>{
  return true;
};
(async()=>{
  try{
    const t1=test();
    //awaitしないとtestの戻り値はPromiseになる
    if(t1 instanceof Promise) throw new Error("no await t1");
  }catch(e){
    console.log(e);
  }
})();
(async()=>{
  try{
    const t2=await test();
    //awaitしているのでtestの戻り値はreturnした値
    if(t2 instanceof Promise) throw new Error("no await t2");
  }catch(e){
    console.log(e);
  }
})();
</script>

Comments

[munekun]

ご回答ありがとうございます。要領を得ない質問で申し訳ございません。参考にさせていただきます。

[yambejp]

ようはasync内でpromiseにawaitをつけようがつけまいがエラーにはならないのでそのままではcatchできないということです。強制的にcatchしたいときはerrorをthrowするということを理解ください