tekitoumemo’s diary

.NET CoreとVue、Angularなどの技術ブログを書いています。みんなの洋楽ランキングを運営しています。

universalモードでのaxiosのエラーハンドリングを共通化する

universalモードの場合、SPAのハンドリング、SSRのハンドリングをしなければならない。

SPAの場合はビューで制御して
ビュー - NuxtJS

SSRの場合はnginxのerror_pageディレクティブとか使って制御する必要がある

フロントもSSR、SPAを判定してエラーハンドリングをしなければいけないのですが、めんどくさいのでそこらへんの判定を無視する雑なハンドリング方法を書く。雑実装なので非推奨

static/error.html

<body>
    エラーっす
</body>

plugins/axios.js

export default function({ $axios, redirect }) {
  $axios.onError((err) => {
    const code = parseInt(err.response && err.response.status)
    redirect(code, '/static/error.html')
  })
}

nuxt.config.js

plugins: [
    { src: '~/plugins/axios.js' },
]

あとはnginxとかでerror_pageディレクティブとか使ってハンドリングする。errorメソッドでハンドリングしても良いが、axiosの例外はSSRのときに500で拾ってしまうので正しいステータスコードをサーバーに伝えるため無理やり指定のstatusコードにredirectしてる。

雑すぎるのでおすすめしない。

[参考]
https://axios.nuxtjs.org/helpers