JavaScript 動態 import() 失敗怎麼重試？Chrome 155 Beta 的模組載入邊界

1
function wait(milliseconds) {
2
  return new Promise((resolve) => setTimeout(resolve, milliseconds));
3
}
4

5
async function importWithRetry(load, {
6
  attempts = 2,
7
  delayMs = 250,
8
  shouldRetry = () => false,
9
} = {}) {
10
  if (!Number.isInteger(attempts) || attempts < 1 || attempts > 3) {
11
    throw new RangeError('attempts must be an integer from 1 to 3');
12
  }
13
  if (!Number.isFinite(delayMs) || delayMs < 0 || delayMs > 30_000) {
14
    throw new RangeError('delayMs must be between 0 and 30000');
15
  }
16

17
  for (let attempt = 1; attempt <= attempts; attempt += 1) {
18
    try {
19
      return await load();
20
    } catch (error) {
21
      if (attempt === attempts || !shouldRetry(error, attempt)) throw error;
22
      await wait(delayMs);
23
    }
24
  }
25
}

1
function createFeatureLauncher(load, start) {
2
  let busy = false;
3
  let finished = null;
4

5
  return async function launch() {
6
    if (finished) return finished;
7
    if (busy) return { status: 'busy' };
8
    busy = true;
9
    try {
10
      let feature;
11
      try {
12
        feature = await load();
13
      } catch (error) {
14
        return { status: 'load-failed', error };
15
      }
16
      try {
17
        await start(feature);
18
        finished = { status: 'ready' };
19
      } catch (error) {
20
        finished = { status: 'start-failed', error };
21
      }
22
      return finished;
23
    } finally {
24
      busy = false;
25
    }
26
  };
27
}

1
const launch = createFeatureLauncher(
2
  () => importWithRetry(() => import('./feature.js'), {
3
    shouldRetry: () => true, // 使用者確認連線恢復後，容許一次額外嘗試。
4
  }),
5
  (feature) => feature.start(),
6
);
7
needsRetry.addEventListener('click', async () => {
8
  needsRetry.disabled = true;
9
  const result = await launch();
10
  try {
11
    if (result.status === 'load-failed' || result.status === 'start-failed') {
12
      showLoadError(result.error); // 產品自行提供可見錯誤與恢復步驟。
13
    }
14
  } finally {
15
    needsRetry.disabled = result.status !== 'load-failed';
16
  }
17
});

1
import assert from 'node:assert/strict';
2

3
let calls = 0;
4
const result = await importWithRetry(async () => {
5
  calls += 1;
6
  if (calls === 1) throw new Error('temporary');
7
  return 'loaded';
8
}, { delayMs: 0, shouldRetry: () => true });
9
assert.equal(result, 'loaded');
10
assert.equal(calls, 2);
11

12
calls = 0;
13
const failure = new Error('stop');
14
await assert.rejects(importWithRetry(async () => {
15
  calls += 1;
16
  throw failure;
17
}), (error) => error === failure);
18
assert.equal(calls, 1);
19
await assert.rejects(importWithRetry(async () => 'unused', {
20
  attempts: 0,
21
}), RangeError);
22
// 載入失敗後仍可再操作；pending 期間不會建立第二次工作。
23
let resolveLoad;
24
let loads = 0;
25
let starts = 0;
26
const launch = createFeatureLauncher(() => {
27
  loads += 1;
28
  if (loads === 1) throw new Error('offline');
29
  return new Promise((resolve) => { resolveLoad = resolve; });
30
}, async () => { starts += 1; });
31
assert.equal((await launch()).status, 'load-failed');
32
const pending = launch();
33
assert.equal((await launch()).status, 'busy');
34
assert.equal(loads, 2);
35
resolveLoad({});
36
assert.equal((await pending).status, 'ready');
37
assert.equal((await launch()).status, 'ready');
38
assert.equal(starts, 1);
39
assert.equal(loads, 2);
40

41
// start 的部分副作用不能靠重試載入修復。
42
let failedStarts = 0;
43
const broken = createFeatureLauncher(async () => ({}), async () => {
44
  failedStarts += 1;
45
  throw new Error('partial initialization');
46
});
47
assert.equal((await broken()).status, 'start-failed');
48
assert.equal((await broken()).status, 'start-failed');
49
assert.equal(failedStarts, 1);
50
console.log('retry and launcher checks passed');