is not a function を1つずつ直すと、貼り直し1往復でエラーが1個しか進まない

webMethod が届くようになった直後、画面に出たのはこれだった。

想定外のエラーで中断しました。
[詳細] getSummary: (0 , _dateUtils.parseDate) is not a function

前の症状とは意味が違う。今度は関数が呼ばれていて、その中で落ちている。サイト上の日付ユーティリティ（この記事では public/dateUtils.js と呼ぶ）が parseDate を export していない、と読める。

ここで dateUtils.js を貼り直して公開すれば、たしかにこのエラーは消える。そして次の名前で同じエラーが出る。手で貼り付けて反映する運用では、この1往復に数分かかる。エラーが1個進むたびに数分を払う形になっていて、しかも残りが何個あるのかが分からない。

同じ症状になる原因が2つある

この一行からは、少なくとも2つの状態が区別できない。

A なら dateUtils.js を貼ればよい。B で dateUtils.js を貼っても何も変わらない。先に constants.js を貼る必要がある。画面のエラー1行では、どちらなのか決められない。

大量の import を typeof でまとめて見る

そこで、症状が出るまで待つのをやめた。バックエンドの2ファイルが import している名前を全部、typeof で調べて、届いていないものをまとめて返す。

function missingDependencies() {
  const groups = [
    ['public/dateUtils.js', { formatJpDate, formatDeadline, getTodayYmd, addDaysYmd, parseDate }],
    ['public/constants.js', { COLLECTIONS, toRefId, formatAddress, MAIL_KIND, … }],
    ['backend/dataAccess.js', { dbFind, dbInsert, dbUpdate, elevated, createReadBudget, … }],
  ];

  const missing = [];
  for (const [module, bag] of groups) {
    for (const name of Object.keys(bag)) {
      if (typeof bag[name] === 'undefined') {
        missing.push({ module, name });
      }
    }
  }
  return missing;
}

オブジェクトに束ねてキーを回すだけなので、名前を列挙する手間以外には何もない。dataAccess.js 自身の import も同じ仕組みで報告させて、こちらの結果に混ぜる。あちらの依存が死んでいると、こちらからは「注文が0件」に見えるだけで理由が分からないからである。

画面に出るのはこうなった。

サイト上のファイルが古いため集計できません。下のファイルを貼り直してください。
[詳細] 届いていない import があります。
・public/dateUtils.js: formatJpDate, formatDeadline, getTodayYmd, addDaysYmd, parseDate
public/dateUtils.js を貼り直してください（constants は届いています）。
貼り直す順: public/constants.js → public/dateUtils.js → backend/dataAccess.js → backend/summaryOps.js

この出方で A と B が割れる。

あるモジュールの名前が全部欠けているなら、そのファイル自身が古いのではなく、そのファイルが import している先が壊れていて評価されていない可能性が高い。全滅かどうかが、貼り直す先を決める材料になる。

検査を呼ぶ場所を間違えない

この検査は、公開関数の入口で1回だけ呼ぶ。typeof を見るだけなので費用はほとんど無い。

やってはいけないのは、モジュールの評価時に呼ぶことである。評価時に import した値へ触れば、それ自体が同じ落とし穴になる。依存が古いときに、依存が古いことを報告する仕組みごと読み込みに失敗する、という形にしかならない。診断は、診断される状態でも動く場所に置く。

フロントエンド側でも同じことをする

バックエンドが自分の依存を調べられるのは、バックエンドが読み込まれている場合に限る。読み込みそのものが失敗していれば、フロントエンドから見えるのは空のクライアントプロキシだけになる。そこで、ページ側でも到着を確かめた。

const BACKEND = { getSummary, exportCsv, markCompleted,
                  sendReminders, sendNotices };
const missingBackendNames = BACKEND_NAMES.filter((n) => typeof BACKEND[n] !== 'function');

届かなかった名前と届いた名前の両方を出す。5つは同じモジュールなので、届き方で貼り直す先が割れる。

呼び出しは全部この検査を通す入口に集約して、未到着なら投げずに { ok: false, notice, detail } を返す。集計、CSV、完了処理、通知の4系統が、同じ形で機能を落として応答する。案内はモジュールの読み込み時と画面の初期表示の両方で出した。日付を選ぶ前に気付けるようにするためである。

ボタンは無効化しなかった。押しても無反応にすると、原因が利用者にも開発者にも見えなくなる。押せば理由が出る状態のほうが、まだ扱いやすい。