Zenn
📝

Vue3+Vite+Storyook7環境でStorycap実行時に頻繁にタイムアウトとなり不安定なため暫定対処

2023/12/23に公開
Storybook
Vue 3
Vite
#
storycap7
tech

背景

表題の通りですがStorycapを実行した際、ストーリー一覧を取得するタイミングでタイムアウトとなりキャプチャを取得できないことが多々発生していました。
verboseをtrueにして何度か実行するとうまく動き出すといった状況で、どうも一覧取得に時間がかかっているだけのようなものの、取得できる前にタイムアウトと判断されてしまっていました。
とりあえずの対処で今のところ動いていそうなのでその情報の共有です。

環境

  • Vue 3.3.9
  • Storybook 7.6.3
  • Storycap 3.2.0
  • Vite 5.0.4
  • キャプチャー対象のストーリー：1200くらい

Storycapはsimpleモードで実行（Storybook7だとmanagedが動かないため）
serverCmdで起動させるサーバーはビルドしたStorybookではなく、「storybook dev --ci」を指定しています。
あらためてを使用して確認したら、serverCmdにビルド済みのStorybookファイルを指定してhttp-serverを使用して起動したサーバーで問題なく動作していました。
（--serverCmd npx http-server ./storybook-staticみたいな感じで）
なお「storybook dev」で起動したサーバーにStorycapでアタッチしようとすると、Storybook側で新たな依存が見つかるたびにリロードされることで接続が切れてStorycapが失敗してしまっていました。
うまく動いていたように見えたのは、事前にStorybookを起動したうえで、一通りの依存が解決されきった状態でStorycapを実行していたからのようでした。

対応内容

2024/3/12 更新
「node_modules/storycrawler/lib/browser/stories-browser.js」の49行目あたりを以下のように変更。

-await this.page.evaluate(() => {
+await this.page.evaluate(async () => {
    const { __STORYBOOK_CLIENT_API__: api } = window;
-    api.storyStore && api.storyStore.cacheAllCSFFiles();
+    api.storyStore && (await api.storyStore.cacheAllCSFFiles?.());
});

cacheAllCSFFilesの呼び出しが非同期となっているため、ここも明示的に待ってあげることでStorybook7の環境でもストーリー一覧の取得が安定するようになりました。
（Storybook8だと更に追加処理が必要そうな感じです。まだStorybook7のままなので確認していません）

以下旧内容
「node_modules/storycrawler/lib/browser/stories-browser.js」の「MAX_CONFIGURE_WAIT_COUNT」の値を変更＋setTimeoutでリトライかけている箇所のタイマーの時間を16msから1000msに変更しました。
今は合計で5分ほど待機するようにしています。

Discussion