web-dev-qa-db-ja.com

JavaScriptフェッチエラーを処理するにはどうすればよいですか？

fetch 呼び出しがChromeで失敗した場合、返されるエラーの詳細は

TypeError：フェッチに失敗しました

この場合、エンドユーザーに有益なエラーメッセージを表示するにはどうすればよいですか？

具体的には：

フェッチが失敗した理由の詳細を取得することは可能ですか？

たとえば、サーバーがクラッシュした場合、Chrome DevToolsはnet：ERR_EMPTY_RESPONSEのコンソールメッセージをログに記録する可能性がありますが、JavaScriptからこれにアクセスする方法はないようです。

私の知る限り、答えはノーです。これはセキュリティ上の理由で、悪意のあるJSがエラーメッセージを調べてアクセスできるサイトとアクセスできないサイトを見つけられないようにするためだと思います。

フェッチエラーを他のTypeErrorsと区別することは可能ですか？

エラーの詳細を取得できない場合は、少なくとも、恐ろしく漠然とした「フェッチに失敗しました」を、有益な「Webサイトにアクセスできませんでした。後でもう一度やり直してください」というメッセージに置き換えたいので、やりたいと思います。これは、他のTypeErrorsにそのメッセージを表示するリスクがありません。

ここで見つけた唯一の解決策は、実際のmessageをチェックして、それが"Failed to fetch"であるかどうかを確認することです。これは明らかにブラウザ固有です。 Chromeで動作し、Chromeのどのユーザー言語でも動作するようです。他のブラウザでは、独自のテストと処理が必要になります。

javascriptgoogle-chromeexceptionfetch-api
22
Josh Kelley

ネットワーク/許可/入力の問題については、これ以上の詳細がないようです。

フェッチエラーを他のTypeErrorと区別することは可能ですか？

はい、catch呼び出しからのエラーのみをfetchする必要があります。

fetch(…)
.catch(err => new FetchError(err))
.…

class FetchError extends Error {
    constructor(orig) {
        super();
        this.message = "fetch error";
        this.details = orig;
    }
}
8
Bergi