JavaScriptファイルが「読まれなかった」時点で検知する方法

Question

JavaScriptでコードにエラーがあるときそのファイルが読まれませんが、「読まれなかった」時点で検知するにはどうしたらいいのでしょうか？

実行内容とエラー

ブラウザでこう実行すると

hoge('apple');

こちらの defined のエラーになりました。

caught ReferenceError: hoge is not defined

試したこと

開発ツールでHTMLを見てもきちんとこう書かれておりました。

    <script src="https://example.com/hoge.js"></script>
</body>

さらにブラウザのURLバーにhttps://example.com/hoge.jsを入力すると、問題なくこれが表示されました。

function hoge(fruits){
    const fruits = 'lemon';
    console.log('hoge!');
}

生じた疑問

「え？ファイルが存在していて、読めているのに、じゃなんで defined のエラーなのか？」と、ハマってしまったのです。

原因

その原因が今になって「どうやら hoge() 内で引数名と同名を const していたせいで「読まれなかったのか…」と分かったわけです。

質問

そもそもコンソールで「読まれなかった」という警告などを表示してくれればいいのになぁ。と悔しい思いです。

改めまして、以上のような経緯で「読まれなかった」時点で検知するにはどうしたらいいのでしょうか？

Comments

[otn]

> JavaScriptでコードにエラーがあるときそのファイルが読まれませんが、
とは、何のことを言ってますか？
<script href="https://example.com/hoge.js"></script>
のようにファイルを読むHTMLタグにエラーがあってファイルが読まれないことを言っているわけじゃ無さそうです。
しかし、質問のコードのように、
<script src="https://example.com/hoge.js"></script>
と正しく書いてあれば、ファイルが存在する限り、必ず読まれます。
hoge.js の中味にエラーがある場合は、hoge.jsのファイルを読んだ後でエラーが検知されます。その結果、開発者ツールのコンソールタブにエラーメッセージが表示されます。

[m.ts10806]

＞　hoge('apple');

上記をどこに書いてるんでしょうか。
そもそもその定義だとfruits が重複してエラーになります。

SyntaxError: Identifier 'fruits' has already been declared

[dameo]

通常.jsは読み込み時に文法エラーがあれば、そこで読み込みは中止になり、エラー内容がブラウザのコンソールに出力され、通常後からでも表示できると思います(正確なブラウザの種類・バージョン次第ですが)。
それが出力されていない以上、今の質問内容のままでは質問自体に疑いの目を向けるしかありません。

こんな想定をすること自体がナンセンスですが(質問者がその可能性をチェックし、除外できないといけない)、今回のケースは恐らく古いキャッシュに残ったhoge.jsが読み込まれ、そこにはhoge()がなかったのではないかと推測します。.jsなどの静的ファイルはブラウザキャッシュなどに残りやすく、長期間変更されていないとサーバー側で変更してもサーバー設定などによっては更新チェックすらされずにキャッシュを使う場合があります。
https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control

いずれにしても、再現性その他ご自身でよくよく検証された方がいいかと思います。

[退会済みユーザー]

質問者さん、無言ですが、いくつか回答が出ているのでそれらに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは？ 役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。解決したなら解決に役立った回答にベストアンサーをつけてクローズしてください。とにかく無言は NG です。

Answer 1

コードを見ると、bodyの最後に<script src="https://example.com/hoge.js"></script>を書いているようですが、
これより前に実行されるように書いたコードはhoge.jsを読む前に実行されます。
おそらく、

～～～～
<script>hoge('apple');</sdript>
～～～～
<script src="https://example.com/hoge.js"></script>

のように書いたのでしょう。仮にhoge.jsの中にエラーが無くても、hoge('apple');の実行時点ではhogeは未定義なので、未定義エラーメッセージが出ます。その後にhoge.jsが読まれてfruits重複のエラーメッセージが出ます。
1つめのエラーメッセージに気を取られて２つめのエラーメッセージを見落としたのでしょう。

質問のコメントに書いたとおり、

JavaScriptでコードにエラーがあるときそのファイルが読まれませんが、

というのは勘違い、ないし、文章の書き間違いだと思いますが、

「読まれなかった」時点で検知するにはどうしたらいいのでしょうか？

についても意味の無いことを言っています。
この文脈において「読まれなかった時点」という概念は実在しません。

何らかの身体症状が出て医者に行ったとして、「症状が出た時点で、この薬を飲んでください」と言われたらやるべき事は明確ですが、「症状が出なかった時点で、この薬を飲んでください」だと、いつ薬を飲めば良いのか？
「お風呂に入って症状が出なかったら」とか、「寝る前の時点でそれまでに症状が出なかったら」のように判断する時点の指定が必要です。

文章の書き間違いで、

エラーが発生した時点で検知するにはどうしたらいいのでしょうか？

であれば、目で見るので良いのであれば、開発者ツールのコンソールですが、これは見てますよね？
エラートリガーで何かしたい場合はtry catchとかありますが、文法エラーならtry自体が認識されない気がします。

関数未定義の解決策としては、
・先に実行して欲しいコードは先に書く
・先に実行して欲しいコードを後ろに書かざるを得ない場合は、先に実行されるように工夫する
など。
また、「このHTML要素が表示されてから実行したいコード」とかあれば、イベントを使う。

Answer 2

状況がわかりませんがとりあえずtry-catchしてみるとかですかね

• try...catch - JavaScript | MDN

<script>
try{
  hoge('apple');
}catch(e){
  console.error(e);
}
try{
  if(typeof hoge=="undefined"){
    throw new Error("my error!");
  }
  hoge('apple');
}catch(e){
  console.error(e);
}
</script>
<script src="https://example.com/hoge.js"></script>
<script>
try{
  hoge('apple');
}catch(e){
  console.error(e);
}
</script>

Answer 3

え？ファイルが存在していて、読めているのに、

問題の js ファイルは読んだけど、m.ts10806 さんが質問のコメント欄で書かれたように SyntaxError: Identifier 'fruits' has already been declared というエラーで無効 (hoge は未定義) 。

じゃなんで defined のエラーなのか？

質問に書いてないので想像ですが、質問に書いてない別のスクリプトで hoge を使ったからでしょう。

---

【追記】

「読まれなかった」時点で検知するにはどうしたらいいのでしょうか？

上に書いたように読まれなかったわけではないようなので、「読まれなかった」ことは検知できないはずです。

なので取りうる手段は、int32_t さんが書かれたように、「フロントエンド開発中にはブラウザの開発者ツールのコンソール」を見て、とにかくまず js ファイルのエラーに気づいてそれを直すようにすることだと思います。

そのうえで、js ファイルに含まれる特定のオブジェクトを調べて、未定義かどうか調べるという話になると思います。

例えば、CDN から提供される js ファイルが読めなかった場合（CDN サイトがダウンしてたとかで）、以下の記事の「(2) Script Tag Helper の場合」のように、js ファイルに含まれる特定のオブジェクトを調べて、それが無かったらフォールバック（代替え）js ファイルをダウンロードさせると言ったこともできます。

Link Tag Helper と Script Tag Helper (CORE)
http://surferonwww.info/BlogEngine/post/2021/08/09/link-tag-helper-and-script-tag-helper-for-aspnet-core.aspx

Answer 4

「読まれなかった」わけではなくて、関数 hoge() を実行した結果エラーが出たわけです。

基本的には、フロントエンド開発中にはブラウザの開発者ツールのコンソールを開きっぱなしにしておきましょう。エラーが表示されます。
それでも見逃してしまうなら、error イベントで目立つように表示すればよいでしょう。

window.addEventListener('error', error => {
  alert(`${error.type}: ${error.message}`);
});