tekitoumemo’s diary

思ったことを書くだけ。長文版Twitter

トップ > NuxtJS > universalモードでのaxiosのエラーハンドリングを共通化する

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

NuxtJS Vue

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