More than 3 years have passed since last update.

nuxt plugins では process.client は undefined なので注意（axios のクライアント側エラー処理を書く時のハマりどころ）

Last updated at 2020-07-13Posted at 2020-07-13

これは何

axios のクライアント側エラー処理を書く時にはまったところについて共有のための記事です。
process.clientは使えないので、そもそもクライアント用とサーバ用でファイルを分けようという話です。

{
    "nuxt": "^2.11.0",
    "@nuxt/typescript-build": "^0.5.2",
    "@nuxt/typescript-runtime": "^0.3.3",
    "@nuxtjs/axios": "^5.9.5"
}

クライアントサイドでその処理が実行されるか、というのを制御できるprocess.clientプロパティがnuxtアプリケーションではよく使われます。

plugins読み込みの時にはこのプロパティが設定されていないのでundefinedになってしまいます。

plugins/plugin.ts

if (process.client) {
  // 何か処理
}

と書くと、一見動くように見えるのですが、実際にはprocess.clientがundefinedになるのでifの中の処理は常に実行されませんでした。

具体的に起こった問題は以下のようなもの

サーバ側処理もクライアント側処理も同じプラグインファイルに書いていた
クライアント側の処理をして問題なければreturnして処理おわり、その後にサーバサイドの処理をして問題あればnuxt errorを吐くみたいな処理を書いていた
そもそもifに入っていないのでreturnで処理が止まらず、クライアント側のクライアントエラー（4xx）でもnuxt errorを吐いて死んでしまう

clientとserverでそれぞれ実行する処理をファイル名を分けて、それぞれnuxt設定ファイルで読み込みます。

nuxt.config.ts

  plugins: [
    '@/plugins/axios.client.ts',
    '@/plugins/axios.server.ts',
  ],

他にもmodeを書く方法もあるようですが、ファイル名だけをみた時にどちらで実行されるのか？というのがはっきり分かるので、ファイル名で分けたほうが個人的にはいいかなと思います。

process.client は undefined になってしまうのですが、process オブジェクト自体は定義されているようでした。
これはnuxtがnodejsのインターフェースの拡張しているもののようです。

plugin のなかで console.log(process);すると以下のようになりました。

.browser を使えばフロントかサーバかの判定はできるようですが、すでにnuxtでは非推奨になっていました。