【Nuxt.js】クライアントサイドのpluginsでエラーを処理する

この記事は アイスタイル Advent Calendar 2022 12日目の記事です。

こんにちは、アイスタイルではフロントエンド周りをちまちま触っているsakaguchiiと申します。2022年はNuxt.jsと戯れることが多く今年もいくつか学びを得ることが出来た年となりました。
そのうちのひとつをご紹介したいと思います。

前提

Nuxt.js v2系

やろうとしたこと

• ルートが変更されたら「Success」というログを表示
• 404ページに遷移したら「Not Found」というログを表示
• クライアントサイドで実行する

ルートが変更されたら「Success」というログを表示

plugins配下にjsを作成し、app.router.afterEachを使います。ここで記載された処理はルートが変更されたら（＝ページ遷移したら）実行されます。
また、クライアントサイドで実行したいので {任意}.client.js という名前でファイルを作成します。
参照：プラグイン名の規約

export default ({ app }) => {
  app.router.afterEach((to, from) => {
    // ページ遷移したらログを表示
    console.log('Success') 
  })
}

エラーページに遷移したら「Not Found」というログを表示

Nuxt.jsのエラーをキャッチするためにapp内のnuxt.err.statusCodeを参照します。

export default ({ app }) => {
  app.router.afterEach((to, from) => {
    if(app.nuxt.err.statusCode === 404) { // 判定追加
        // 404ページに遷移したらログを表示
        console.log('Not Found') 
    } else {
        // ページ遷移したらログを表示
        console.log('Success') 
    }
  })
}

しかしこの方法ではステータスコードは取得できません。
（表示上はエラーページに遷移しているのにapp.nuxt.errの中身は空っぽというへんてこな結果が返ってきました）

これはクライアントサイドのNuxtプラグインではredirectやerrorを使用することが出来ないためです。

参照：nuxtjs.org-コンテキスト

上記のドキュメントに記載の通り、window.onNuxtReady(() => { window.$nuxt.... }) を使ってこれを回避します。

export default ({ app }) => {
  app.router.afterEach((to, from) => {
    window.onNuxtReady(() => { // 追加
      if(window.$nuxt.nuxt.err.statusCode === 404) {
        // 404ページに遷移したらログを表示
        console.log('Not Found') 
      } else {
        // ページ遷移したらログを表示
        console.log('Success') 
      }
    })
  })
}

これで通常遷移したときも、404ページに遷移したときもログを表示することが出来ました。

おわり

以上になります。まとめてみるとサラッとしたものですが、当初この話を聞いた時は「ステータスコードが取れないならエラーページに遷移するはずがないのに遷移してて…でもステータスコードは取れない？？？？なんで？？？？🤔」と大分混乱していました。
まずはapp.nuxtの状態から確認しようと思いコンテキストのドキュメントをざっと眺めて、たまたま「It's not possible to use redirect or error in client-side Nuxt plugin」の文章を見つけたことで運よく回避することが出来ました。
これが正攻法か不安なところではありますが、期待通り動いてくれたのでとりあえずヨシということで。

ここまで読んでくださりありがとうございました😊

参考文献

• プラグイン名の規約
• nuxtjs.org-コンテキスト