Next js v13の内部通信で起きたSocket Errorの解決法（暫定）【株式会社ライトコード】

※弊社エンジニアの記事になります。

TL;DR

1. Next jsの内部通信でUND_ERR_SOCKETエラーが発生。
2. エラーが出た箇所で使用しているundici-fetchがバグを含んでいる可能性があり、エラーが出ているよう。
3. Next js v13.4.12までバージョンを落とすとundici-fetchの代わりに、http.requestを使用するのでエラーが起きなくなる。

発生したエラー

TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11576:11) at async invokeRequest (/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12) at async invokeRender (/node_modules/next/dist/server/lib/router-server.js:254:29) at async handleRequest (/node_modules/next/dist/server/lib/router-server.js:447:24) at async requestHandler (/node_modules/next/dist/server/lib/router-server.js:464:13) at async Server.<anonymous> (/node_modules/next/dist/server/lib/start-server.js:117:13) {
    cause: SocketError: other side closed
    Socket.onSocketEnd (/node_modules/next/dist/compiled/undici/index.js:1:63301)
    Socket.emit (node:events:526:35)
    endReadableNT (node:internal/streams/readable:1359:12)
    process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
        code: 'UND_ERR_SOCKET',
        socket: {
            localAddress: '127.0.0.1',
            localPort: 59251,
            remoteAddress: undefined,
            remotePort: undefined,
            remoteFamily: undefined,
            timeout: undefined,
            bytesWritten: 3641,
            bytesRead: 297
        }
    }
}

エラー発生原因

私の所属しているプロジェクトでは、先日フロントエンド側の環境をNode js v18.17.1 / Next js v13.4.19にアップグレードしたのですが、それ以後にごくたまにNext js サーバーで上記エラーが起きるようになりました。

エラーログの内容を確認するとNext jsの内部間通信時にundiciというライブラリでエラーが起こっているようでした。

最初はSocketError: other side closedというメッセージがあるため、Keep AliveによるTCP Socketのタイムアウトタイミングのずれによるエラー（参考）なのかと思ったのですが、undiciのGithubリポジトリのイシューを確認しているとどうやらそうでもなさそうでした。

原因はどうやらundici側にありそうで、イシューなどで議論が行われていました。

fetchリクエスト時にヘッダーのTransfer-Encoding に正しくない値がセットされるようでUND_ERR_SOCKETエラーが起こってしまうようです。

ただ同様のイシュー上で、fetch関数のレスポンスbodyを毎リクエストごとにbody mixinのコールを行い削除する必要があると触れられており、そうすることでエラーが発生しないようなのですが依然ドキュメントにはそのことが書かれておらずこのエラーへの対処方法が謎です。

このエラーの発生原因がバグなのかどうかの判断がつきませんが、少なくとも2023/6/6時点までは同じようにbody mixinを使用しないとエラーが発生するようでした。（参考）

上記のため、バグ（？）を抱えていそうなundiciを使用しない方法はないかという方針で一旦調査してみることにしました。

ところで、ここまで何度もundici、undiciといってきましたがそもそもundiciとはなんでしょうか？

undiciとは何者か

undiciとはNode js用に開発されたHTTP/1.1クライアントです。

Node js v18から試験的に導入されたfetch関数で使用されているようです。

💡 ちなみにundiciとはイタリア語で11を意味する言葉で、HTTP/1.1 → 11 → undiciという理由で命名されたようです。

パフォーマンスは既存のhttpモジュールを使用しての通信より上がっているようです。(https://undici.nodejs.org/ より抜粋）

ただまだ”試験的”であるように、テストカバレッジが十分でなかったり色々とバグなどの問題を抱えているようで、

ドキュメントには-no-experimental-fetch フラグをNode js実行時に与えてあげればundiciを使用したfetch関数を無効化できると書かれていました。

とりあえず脳死で試してみましたが、変わらずエラーがおきました。

-no-experimental-fetchを使用してnext serverを立ち上げた時、Next js内部はどのように処理されているのでしょうか？

…

記事の続きは下のリンクをクリック！

https://rightcode.co.jp/blog/information-technology/next-js-v13-socket-error-syain

【2024年卒】新卒採用エントリー開始しました！

特設ページはこちら：https://rightcode.co.jp/recruit/entry-2024

※募集は終了致しました。次回の募集までもうしばらくお待ちください

インターン募集！未経験ok、チャレンジ精神ある方求む

メディア運営：https://rightcode.co.jp/recruit/intern-media

社長と一杯飲みながらお話しませんか？（転職者向け）

特設ページはこちら： https://rightcode.co.jp/gohan-sake-president-talk

もっとワクワクしたいあなたへ

現在、ライトコードでは「WEBエンジニア」「スマホアプリエンジニア」「ゲームエンジニア」、「デザイナー」「WEBディレクター」「エンジニアリングマネージャー」「営業」などを積極採用中です！

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です。

• もっと大きなことに挑戦したい！
• エンジニアとしてもっと成長したい！
• モダンな技術に触れたい！

現状に満足していない方は、まずは、エンジニアとしても第一線を走り続ける弊社代表と気軽にお話してみませんか？

ネット上では、ちょっとユルそうな会社に感じると思いますが（笑）、
実は技術力に定評があり、沢山の実績を残している会社ということをお伝えしたいと思っております。

• ライトコードの魅力を知っていただきたい！
• 社風や文化なども知っていただきたい！
• 技術に対して熱意のある方に入社していただきたい！

一度、【Wantedly内の弊社ページ】や【コーポレートサイト】をのぞいてみてください。

【コーポレートサイト】https://rightcode.co.jp/

【採用募集】https://rightcode.co.jp/recruit（こちらからの応募がスムーズ）

【wantedlyぺージ】https://www.wantedly.com/companies/rightcode