[日本語訳]SWR ドキュメンテーション エラーハンドリング
追記: 2021年6月8日
SWR公式日本語訳ページが追加されたので、そちらをご覧ください
このページは Error Handling – SWRの日本語訳です
SWR日本語訳全体についてはSWR 日本語訳をご覧ください
エラーハンドリング
fetcher
内でエラーがスローされた場合、フックによってerror
として返されます。
const fetcher = url => fetch(url).then(r => r.json())
// ...
const { data, error } = useSWR('/api/user', fetcher)
fetch promise が reject された場合にerror
オブジェクトが定義されます。
ステータスコードとエラーオブジェクト
APIがステータスコードと一緒にエラーオブジェクトを返すようにしたい場合があります。 どちらもクライアントにとって便利です。
fetcher
をカスタマイズして、より多くの情報を返すことができます。 ステータスコードが2xx
でない場合、JSONとして解析できる場合でも、エラーと見なされます。
const fetcher = async url => {
const res = await fetch(url)
// ステータスコードの値が200-299の間でなかった場合
// その場合でもパースを試して、スローします
if (!res.ok) {
const error = new Error('An error occurred while fetching the data.')
// エラーオブジェクトに追加の情報を付け足します
error.info = await res.json()
error.status = res.status
throw error
}
return res.json()
}
// ...
const { data, error } = useSWR('/api/user', fetcher)
// error.info === {
// message: "You are not authorized to access this resource.",
// documentation_url: "..."
// }
// error.status === 403
💡 data
とerror
が同時に存在する可能性があることに注意してください。 そのため、UIは次のリクエストが失敗したことを認識しながら、既存のデータを表示できます。
ここに例があります
エラーでの再試行
SWRは、指数バックオフアルゴリズム(exponential backoff algorithm)を使用して、エラー時に要求を再試行します。 このアルゴリズムにより、アプリはエラーからすばやく回復できますが、リソースを無駄に再試行することはありません。
onErrorRetryオプションを使用して、この動作をオーバーライドすることもできます。
useSWR('/api/user', fetcher, {
onErrorRetry: (error, key, config, revalidate, { retryCount }) => {
// 404はリトライしません
if (error.status === 404) return
// 特定のキーはリトライしません
if (key === '/api/user') return
// 10回だけリトライします
if (retryCount >= 10) return
// 5秒後にリトライします
setTimeout(() => revalidate({ retryCount: retryCount + 1 }), 5000)
}
})
このコールバックにより、さまざまな条件に基づいて再試行できる柔軟性が得られます。 shouldRetryOnError:false
を設定して無効にすることもできます。
これらは グローバル設定 Context を介して設定することもできます。
グローバルエラーレポート
コンポーネント内の error
オブジェクトはいつでもリアクティブに取得できます。 ただし、エラーをグローバルで処理する場合、toast や snackbar を表示するようにUIに通知する場合、またはSentryなどの場所で報告する場合は、onError
イベントがあります。
<SWRConfig value={{
onError: (error, key) => {
if (error.status !== 403 && error.status !== 404) {
// Sentry にエラーを送信します
// または、通知UIを表示します
}
}
}}>
<MyApp />
</SWRConfig>
Author And Source
この問題について([日本語訳]SWR ドキュメンテーション エラーハンドリング), 我々は、より多くの情報をここで見つけました https://qiita.com/tk1024/items/1d16da13a025a6900663著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .