デプロイ直後に出る Application error は、なぜ再デプロイでは直らないのか

// check-chunks.mjs — デプロイ後に、HTML が呼ぶ JS が全部実在するかを確かめる
// 使い方: node check-chunks.mjs https://example.com/ https://example.com/en/
const urls = process.argv.slice(2);
if (urls.length === 0) {
  console.error('usage: node check-chunks.mjs <page-url> [...]');
  process.exit(2);
}
 
let failed = 0;
for (const page of urls) {
  const res = await fetch(page, { headers: { 'Cache-Control': 'no-cache' } });
  const html = await res.text();
  const found = new Set(
    [...html.matchAll(/(?:src|href)="([^"]*\/_next\/static\/[^"]+\.js[^"]*)"/g)].map((m) => new URL(m[1], page).href),
  );
  console.log(`${page} -> HTTP ${res.status}, x-cache=${res.headers.get('x-cache') ?? '-'}, chunks=${found.size}`);
  for (const chunk of found) {
    const r = await fetch(chunk);
    const type = r.headers.get('content-type') ?? '';
    await r.arrayBuffer();
    const ok = r.status === 200 && /javascript/.test(type);
    if (!ok) {
      failed += 1;
      console.log(`  NG ${r.status} ${type || '(no content-type)'} ${chunk}`);
    }
  }
}
console.log(failed === 0 ? 'OK: すべてのチャンクが JS として返りました' : `FAIL: ${failed} 件のチャンクが読めません`);
process.exit(failed === 0 ? 0 : 1);

http://127.0.0.1:36245/ -> HTTP 200, x-cache=-, chunks=3
  NG 404 text/html http://127.0.0.1:36245/_next/static/chunks/b.js
  NG 200 text/html http://127.0.0.1:36245/_next/static/chunks/c.js
FAIL: 2 件のチャンクが読めません

// version-guard.mjs — エッジキャッシュの HTML を、作ったビルドの版と照合してから返す
const EDGE = 'public, s-maxage=3600';
const BROWSER = 'public, max-age=0, must-revalidate';
 
export async function cachedRender(cache, request, render, deployVersion) {
  const hit = await cache.match(request);
  if (hit) {
    if (hit.headers.get('X-Deploy-Version') === deployVersion) {
      const html = await hit.text();
      return reply(html, hit.status, deployVersion, 'HIT');
    }
    await cache.delete(request); // 古いビルドで作った HTML は、再デプロイでは消えない。ここで捨てる
  }
  const fresh = await render(request);
  const html = await fresh.text();
  if (fresh.status === 200) {
    await cache.put(
      request,
      new Response(html, {
        status: 200,
        headers: { 'Content-Type': 'text/html; charset=utf-8', 'Cache-Control': EDGE, 'X-Deploy-Version': deployVersion },
      }),
    );
  }
  return reply(html, fresh.status, deployVersion, 'MISS');
}
 
function reply(html, status, version, cacheState) {
  return new Response(html, {
    status,
    headers: {
      'Content-Type': 'text/html; charset=utf-8',
      'Cache-Control': BROWSER, // ブラウザには残さない。エッジの寿命とは別に決める
      'X-Deploy-Version': version,
      'X-Cache': cacheState,
    },
  });
}

// reload-once.mjs — チャンク読み込み失敗のときだけ、1回だけ自動で再読み込みする判定
const PATTERN = /ChunkLoadError|Loading chunk [\w-]+ failed|Failed to fetch dynamically imported module|__name is not defined/;
 
export function isChunkLoadError(error) {
  const text = `${error?.name ?? ''} ${error?.message ?? ''}`;
  return PATTERN.test(text);
}
 
// storage は sessionStorage を渡す。直近 windowMs 以内に再読み込み済みなら false（ループ防止）
export function shouldReloadOnce(storage, key, now = Date.now(), windowMs = 60_000) {
  try {
    const last = Number(storage.getItem(key));
    if (last > 0 && now - last < windowMs) return false;
    storage.setItem(key, String(now));
    return true;
  } catch {
    return false; // storage が使えない環境では自動再読み込みしない（無限ループより、ボタン表示のほうが安全）
  }
}

'use client';
import { useEffect } from 'react';
import { isChunkLoadError, shouldReloadOnce } from './reload-once.mjs';
 
export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
  useEffect(() => {
    if (isChunkLoadError(error) && shouldReloadOnce(window.sessionStorage, 'chunk-reload-at')) {
      window.location.reload();
    }
  }, [error]);
 
  return (
    <html lang="ja">
      <body style={{ padding: 24, fontFamily: 'sans-serif' }}>
        <h1>読み込みに失敗しました</h1>
        <p>サイトが更新された直後は、画面が一時的に読めないことがあります。</p>
        <button onClick={() => window.location.reload()}>再読み込み</button>
      </body>
    </html>
  );
}