← Back to list
INS-834
preloaderのCDN失敗ハンドリングの実装
StatusDone
TeamInstansys
Assigneeyasuhisa.hiraga@instansys.co.jp
PriorityNo priority
Created2026/06/08 00:23
Completed2026/06/08 01:55
Archived2026/06/15 04:58
Description
preloaderのCDNからの素材取得に失敗した場合エラー出ずに永遠loadingが消えない問題がありそうなのでエラーハンドリングする
現状
┌──────────────────────────────────────────────┬──────────────────────────────────────────────────────────┬──────────────┐
│ 失敗の種類 │ 現状の挙動 │ error セット │
│ │ │ される? │
├──────────────────────────────────────────────┼──────────────────────────────────────────────────────────┼──────────────┤
│ 個別の画像/音声がCDN取得失敗(404・一時障害 │ 280-302行で try/catchして握りつぶし(warn+再試行用に登 │ │
│ ) │ 録解除)、ロードは続行 → isLoading=false │ されない │
│ │ で半壊画面(画像欠け) │ │
├──────────────────────────────────────────────┼──────────────────────────────────────────────────────────┼──────────────┤
│ 全体が45秒タイムアウト(重度の回線不良で多数 │ timeout reject → error セット │ される │
│ ハング) │ │ │
├──────────────────────────────────────────────┼──────────────────────────────────────────────────────────┼──────────────┤
│ データ取得(fetchAssets=TRPC)が失敗 │ throw → error セット │ される │
└──────────────────────────────────────────────┴──────────────────────────────────────────────────────────┴──────────────┘
45秒のタイムアウトがあった場合、現状だとエラーがユーザーに通知されずにアセット未取得のままページがっこうされる、またはローディングのままになるケースもありうるので、通知と再実行を行うハンドリングとUI実装をする。
- 永遠ローディングは絶対回避(最優先)
- 画像が一部欠けてもシーンは表示(部分失敗は許容)
- ネットワーク自体が繋がっていない時だけモーダルで通知
Comments (3)
yasuhisa.hiraga@instansys.co.jp2026/06/08 00:47
Battle.tsxはすでにハンドリングされてたので触らず。
yasuhisa.hiraga@instansys.co.jp2026/06/08 01:00
yasuhisa.hiraga@instansys.co.jp2026/06/08 01:18
┌────────────────────────────────┬────────────────────────────────────────────────────┐
│ ケース │ 結果 │
├────────────────────────────────┼────────────────────────────────────────────────────┤
│ 画像1枚が404 │ ✅ シーン表示(欠けるだけ・モーダル無し)— E2E確認 │
├────────────────────────────────┼────────────────────────────────────────────────────┤
│ 複数404 │ ✅ シーン表示(握りつぶし) │
├────────────────────────────────┼────────────────────────────────────────────────────┤
│ ネットワーク断(fetch reject) │ ✅ モーダル(再実行/ホームに戻る)— E2E確認 │
├────────────────────────────────┼────────────────────────────────────────────────────┤
│ 45秒ハング │ ✅ モーダル(永遠ローディング回避の保険) │
└────────────────────────────────┴────────────────────────────────────────────────────┘