chrome · JavaScript

メッセージ

TypeError: Failed to fetch

何を意味するか

要求が応答を受け取らずに終わったという意味で、ブラウザが理由をあえて隠した文言です — CORS で塞がれた、宛先が死んでいる、証明書が不正、広告ブロック拡張が切った、が全て同じ言葉になります。これは状態ではなく投げられた誤りなので 404 や 500 はここまで来ません。サーバは応答を始めることさえできなかったのです。コンソールのこの行の上や Network タブに、より具体的な一行がある場合が多いのでそれを先に読み、curl -i でその URL を直接叩けば「サーバが落ちている」と「ブラウザが拒んだ」が分かれます。Firefox では同じ状況が NetworkError when attempting to fetch resource と出ます。

直しかた

curl -i https://api.example.com/data
出す道具
chrome
JavaScript
15

ブラウザと node の誤りは、たいてい何が壊れたかだけを告げ、なぜその値がそうなったかは告げません — undefined を読んだ、関数ではなかった、JSON ではなかった。ですから直す場所は投げた行ではなくその値を作った上流であり、?. や既定値でその行だけ黙らせると、同じ問題がもっと遠くで、もっと分かりにくい形で戻ってきます。

エラーメッセージの読み方

  • 一行目から読みます。下に行くほど道具の内部の話で、原因はたいてい一番上に書かれています。
  • ファイル名と行番号があればそこが出発点です — スタックの最上段ではなく、自分が書いたファイルが出てくる一番上の行です。
  • 文句はそのまま検索します。ただし自分のパスや変数名は消します — その部分が検索を邪魔します。
  • 同じ事情が道具の版ごとに違う言い方で出ます。結果が合わないときは版番号も入れてみます。
  • 直す命令を貼る前に、その命令が何を捨てるかを確かめます。取り消せないものが混ざっています。

よくある質問

Q. TypeError: Failed to fetch はどういう意味ですか。

要求が応答を受け取らずに終わったという意味で、ブラウザが理由をあえて隠した文言です — CORS で塞がれた、宛先が死んでいる、証明書が不正、広告ブロック拡張が切った、が全て同じ言葉になります。これは状態ではなく投げられた誤りなので 404 や 500 はここまで来ません。サーバは応答を始めることさえできなかったのです。コンソールのこの行の上や Network タブに、より具体的な一行がある場合が多いのでそれを先に読み、curl -i でその URL を直接叩けば「サーバが落ちている」と「ブラウザが拒んだ」が分かれます。Firefox では同じ状況が NetworkError when attempting to fetch resource と出ます。

Q. どう直しますか。

curl -i https://api.example.com/data — 実行する前に、この命令が何を捨てるかを上の説明で確かめてください。

Q. どの道具が出すエラーですか。

chrome です。JavaScriptの仲間で、文句は4語です。

近いエラー