SvelteKitで稀にchunkファイルがNot foundエラーになる問題に遭遇した

発端

クライアントでページ A を表示したまま放置して、サーバに新しいバージョンをデプロイした後、放置していたクライアントでページ B へ遷移した際、下記のようなエラーが発生しました。

Not found: /_app/immutable/chunks/HogeComponent.2b502a68.js

原因

調査した結果、クライアント使用中に新しいバージョンをビルドしたことでチャンクファイルが存在しなくなってしまったことが原因のようでした。元々 SvelteKit にはスクリプトのバージョン確認機能が搭載されているみたいなのですが、ページのプリロードなどを使用していると先読みしたスクリプトでエラーが発生するケースも有るようです。

参考：GitHub Not found /_app/immutable/assets/xxx #9089

解決策

SvelteKit の公式ドキュメントにバージョン管理に関する記述がありました。

kit.version.name についてはデフォルトでビルド時のタイムスタンプが設定されるとのことなので、今回はポーリング処理だけ実装してみました。

最上位の+layout.svelte へ公式ドキュメントからポーリング処理をそのまま転記します。

<script>
    import { beforeNavigate } from '$app/navigation';
    import { updated } from '$app/stores';

    beforeNavigate(({ willUnload, to }) => {
        if ($updated && !willUnload && to?.url) {
            location.href = to.url.href;
        }
    });
</script>

次に svelte.config.js へポーリングインターバルの設定を追記します。
今回は 60 秒に設定しました。

export default {
  kit: {
    version: {
      pollInterval: 60000, // ms
    },
  },
};

結果

ページ B へ遷移した際にもエラーにならず、ユーザーが継続して利用できるようになりました。
※ポーリングのインターバルはコストに影響する場合もあるので適切な値に設定しましょう。

まとめ

SvelteKit も晴れてメジャーリリースを迎えましたが、まだまだ情報が少ないのが現状です。Vue.js, React,AngularJS など有名なフレームワークは大抵習得している筆者ですが、そのなかでも特に Svelte はストレスフリーに開発できるのでお気に入りです。
今後もっと情報が増えて Svelte 利用者が増えることを期待しています。おわり。

参考