Lab giả lập remote lỗi

node build-catalog.mjs r19

node candidate.mjs r18 cfg-101
node candidate.mjs r19 cfg-102

export function createSlot({ name, root, spec, revision, report, deadlineMs = 2000 }) {
  let generation = 0;
  let state = 'idle';
  let handle;

  function showFailure() {
    const message = document.createElement('p');
    message.setAttribute('role', 'alert');
    message.textContent = name === 'catalog'
      ? 'Catalog tạm thời không khả dụng. Giỏ hàng vẫn có thể dùng nếu đã sẵn sàng.'
      : 'Chưa lấy được thông tin giỏ hàng. Không thể xác nhận thao tác thêm hàng.';
    root.replaceChildren(message);
  }

  function emit(phase, kind, started, actualRelease = null) {
    report({
      shell: 's18', remote: name, config: revision,
      selectedRelease: spec.release, actualRelease,
      phase, kind, state,
      durationMs: Math.round(performance.now() - started),
    });
  }

  return {
    async start(props) {
      if (state !== 'idle') throw new Error('SLOT_ALREADY_STARTED');
      const mine = ++generation;
      const started = performance.now();
      let timer;
      let phase = 'load';
      let actualRelease = null;
      state = root.dataset.state = 'loading';
      const loading = document.createElement('p');
      loading.setAttribute('role', 'status');
      loading.textContent = `Đang tải ${name}…`;
      root.replaceChildren(loading);

      try {
        const remote = await Promise.race([
          import(spec.entry),
          new Promise((_, reject) => {
            timer = setTimeout(() => {
              const error = new Error('REMOTE_DEADLINE');
              error.code = 'DEADLINE';
              reject(error);
            }, deadlineMs);
          }),
        ]);
        clearTimeout(timer);
        if (mine !== generation) return null;

        phase = 'contract';
        if (remote.release !== spec.release || remote.contractVersion !== 1 ||
            typeof remote.mount !== 'function') {
          throw new Error('REMOTE_CONTRACT_INVALID');
        }
        actualRelease = remote.release;
        phase = 'mount';
        handle = remote.mount(root, props);
        if (typeof handle?.unmount !== 'function' ||
            (name === 'cart' && typeof handle.add !== 'function')) {
          throw new Error('REMOTE_HANDLE_INVALID');
        }
        state = root.dataset.state = 'ready';
        emit('ready', null, started, actualRelease);
        return handle;
      } catch (error) {
        if (mine !== generation) return null;
        // Với handle hợp lệ đã trả về, cleanup trước khi thay DOM.
        try { handle?.unmount?.(); } catch { /* Fallback vẫn phải hiện. */ }
        handle = undefined;
        state = root.dataset.state = 'failed';
        const kind = error.code === 'DEADLINE' ? 'timeout' :
          phase === 'contract' ? 'contract' :
          phase === 'mount' ? 'mount' : 'load-or-evaluate';
        root.dataset.kind = kind;
        showFailure();
        emit(phase, kind, started, actualRelease);
        return null;
      } finally {
        clearTimeout(timer);
      }
    },
    dispose() {
      if (state === 'disposed') return;
      ++generation;
      try { handle?.unmount?.(); } catch { /* Cleanup best-effort trong lab. */ }
      handle = undefined;
      state = root.dataset.state = 'disposed';
      root.replaceChildren();
    },
  };
}

<!doctype html>
<html lang="vi">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Remote failure lab</title>
  </head>
  <body>
    <h1>Shop — shell s18</h1>
    <nav aria-label="Điều hướng shop">
      <a href="#catalog-region">Catalog</a>
      <a href="#cart-region">Giỏ hàng</a>
    </nav>
    <p id="status" role="status">Đang khởi động…</p>
    <p id="command-status" role="status"></p>
    <section id="cart-region" aria-label="Cart"><div id="cart"></div></section>
    <section id="catalog-region" aria-label="Catalog"><div id="catalog"></div></section>
    <script type="module" src="/shell/s18/main.mjs"></script>
  </body>
</html>

import { createSlot } from './remote-slot.mjs';

const status = document.querySelector('#status');
const commandStatus = document.querySelector('#command-status');
let snapshot;
let cart;
const slots = [];

function parseConfig(raw) {
  if (raw?.schemaVersion !== 1 || typeof raw.revision !== 'string' ||
      !raw.revision.trim()) throw new Error('CONFIG_SCHEMA_INVALID');
  const remotes = {};
  for (const name of ['catalog', 'cart']) {
    const spec = raw.remotes?.[name];
    if (!spec || !/^r[1-9]\d*$/.test(spec.release) ||
        spec.contractVersion !== 1 || typeof spec.entry !== 'string') {
      throw new Error(`CONFIG_REMOTE_INVALID:${name}`);
    }
    const url = new URL(spec.entry, location.origin);
    if (url.origin !== location.origin ||
        url.pathname !== `/${name}/${spec.release}/entry.mjs` ||
        url.search || url.hash || url.username || url.password) {
      throw new Error(`CONFIG_URL_INVALID:${name}`);
    }
    remotes[name] = Object.freeze({ ...spec, entry: url.href });
  }
  return Object.freeze({ revision: raw.revision, remotes: Object.freeze(remotes) });
}

function report(event) {
  // Console thay cho telemetry transport; không log query/token hay payload cart.
  console.info('remote-state ' + JSON.stringify(event));
}

function onAdd(item) {
  if (!cart) {
    commandStatus.textContent = 'Chưa xác nhận thêm hàng: giỏ chưa sẵn sàng.';
    return;
  }
  try {
    cart.add(item);
    commandStatus.textContent = 'Đã thêm hàng vào giỏ.';
  } catch {
    commandStatus.textContent = 'Không thêm được hàng vào giỏ.';
  }
}

async function bootstrap() {
  const preview = new URL(location.href).searchParams.get('preview');
  if (preview !== null && !['r18', 'r19'].includes(preview)) {
    throw new Error('PREVIEW_INVALID');
  }
  const path = preview ? `/runtime/preview-${preview}.json` : '/runtime/config.json';
  const response = await fetch(path, {
    cache: 'no-store', signal: AbortSignal.timeout(5000),
  });
  if (!response.ok) throw new Error(`CONFIG_HTTP_${response.status}`);
  snapshot = parseConfig(await response.json());
  status.textContent = `s18 | config ${snapshot.revision} | ` +
    `selected catalog ${snapshot.remotes.catalog.release} | ` +
    `selected cart ${snapshot.remotes.cart.release}`;

  const makeSlot = (name) => {
    const slot = createSlot({
      name, root: document.querySelector(`#${name}`),
      spec: snapshot.remotes[name], revision: snapshot.revision, report,
    });
    slots.push(slot);
    return slot;
  };
  const cartSlot = makeSlot('cart');
  const catalogSlot = makeSlot('catalog');
  // Cùng khởi động; không await catalog rồi mới yêu cầu cart.
  const cartTask = cartSlot.start().then((handle) => { cart = handle; });
  const catalogTask = catalogSlot.start({ onAdd });
  await Promise.all([cartTask, catalogTask]);
}

bootstrap().catch(() => {
  status.textContent = 'Không đọc được cấu hình hợp lệ. Shop chưa sẵn sàng.';
  status.setAttribute('role', 'alert');
  for (const slot of slots) slot.dispose();
  cart = null;
  console.error('bootstrap-failed', { config: snapshot?.revision ?? null });
});

node server.mjs

import assert from 'node:assert/strict';
import { chromium } from 'playwright';

const release = process.argv[2] ?? 'r19';
if (!['r18', 'r19'].includes(release)) throw new Error('RELEASE_INVALID');
const base = 'http://127.0.0.1:4173';
const entry = `${base}/catalog/${release}/entry.mjs`;
const browser = await chromium.launch();

async function textAt(page, selector, pattern) {
  await page.waitForFunction(({ selector, source }) => {
    return new RegExp(source).test(document.querySelector(selector)?.textContent ?? '');
  }, { selector, source: pattern.source });
}

async function stateAt(page, selector, state) {
  await page.waitForFunction(({ selector, state }) => {
    return document.querySelector(selector)?.dataset.state === state;
  }, { selector, state });
}

async function run(name, setup, check) {
  const context = await browser.newContext({ serviceWorkers: 'block' });
  const page = await context.newPage();
  const errors = [];
  const events = [];
  page.on('pageerror', error => errors.push(error.message));
  page.on('console', message => {
    const value = message.text();
    if (value.startsWith('remote-state ')) {
      events.push(JSON.parse(value.slice('remote-state '.length)));
    }
  });
  try {
    await setup(page);
    await page.goto(`${base}/?preview=${release}`);
    await check(page, events);
    assert.deepEqual(errors, [], 'Unexpected pageerror/unhandled rejection');
    console.log(`PASS ${name}`);
  } finally {
    await context.close();
  }
}

const noFault = async () => {};
const assertCart = page => stateAt(page, '#cart', 'ready');
const assertCatalogFailed = page => stateAt(page, '#catalog', 'failed');
const catalogEvents = events => events.filter(event => event.remote === 'catalog');

try {
  await run('baseline', noFault, async page => {
    await assertCart(page);
    await stateAt(page, '#catalog', 'ready');
    await page.getByRole('button', { name: 'Thêm vào giỏ' }).click();
    await textAt(page, '#cart', /1 sản phẩm/);
    await page.getByRole('button', { name: 'Xem chi tiết' }).click();
    await textAt(page, '#catalog', new RegExp(`Chi tiết từ ${release}`));
  });

  await run('entry bị chặn', async page => {
    await page.route(entry, route => route.abort('failed'));
  }, async (page, events) => {
    await assertCatalogFailed(page);
    await assertCart(page);
    await page.getByRole('link', { name: 'Giỏ hàng', exact: true }).click();
    assert.equal(new URL(page.url()).hash, '#cart-region');
    assert.equal(catalogEvents(events).length, 1);
    assert.equal(catalogEvents(events)[0].kind, 'load-or-evaluate');
  });

  await run('entry resolve muộn', async page => {
    await page.route(entry, async route => {
      const response = await route.fetch();
      await new Promise(resolve => setTimeout(resolve, 2600));
      await route.fulfill({ response });
    });
  }, async (page, events) => {
    await assertCatalogFailed(page);
    await assertCart(page);
    // Chờ có chủ đích trong test late result, không phải readiness assertion.
    await page.waitForTimeout(3200);
    assert.equal(await page.locator('#catalog').getAttribute('data-state'), 'failed');
    assert.equal(await page.locator('#catalog button').count(), 0);
    assert.equal(catalogEvents(events).length, 1);
    assert.equal(catalogEvents(events)[0].kind, 'timeout');
  });

  await run('entry reject muộn', async page => {
    await page.route(entry, async route => {
      await new Promise(resolve => setTimeout(resolve, 2600));
      await route.abort('failed');
    });
  }, async (page, events) => {
    await assertCatalogFailed(page);
    await page.waitForTimeout(3200);
    assert.equal(catalogEvents(events).length, 1);
    assert.equal(catalogEvents(events)[0].kind, 'timeout');
  });

  await run('lazy details 404 giữ cart', async page => {
    await page.route(`${base}/catalog/${release}/details.mjs`, route => route.fulfill({
      status: 404, contentType: 'text/plain', body: 'Injected missing chunk',
    }));
  }, async page => {
    await assertCart(page);
    await stateAt(page, '#catalog', 'ready');
    await page.getByRole('button', { name: 'Thêm vào giỏ' }).click();
    await textAt(page, '#cart', /1 sản phẩm/);
    await page.getByRole('button', { name: 'Xem chi tiết' }).click();
    await textAt(page, '#catalog', /Không tải được chi tiết/);
    assert.equal(await page.locator('#catalog').getAttribute('data-state'), 'ready');
    await page.getByRole('button', { name: 'Thêm vào giỏ' }).click();
    await textAt(page, '#cart', /2 sản phẩm/);
  });

  await run('contract major mismatch không mount', async page => {
    await page.route(entry, route => route.fulfill({
      contentType: 'text/javascript',
      body: `export const release = '${release}';
        export const contractVersion = 2;
        export function mount() { throw new Error('MUST_NOT_MOUNT'); }`,
    }));
  }, async (page, events) => {
    await assertCatalogFailed(page);
    await assertCart(page);
    assert.equal(catalogEvents(events)[0].phase, 'contract');
    assert.equal(catalogEvents(events)[0].actualRelease, null);
    assert.equal(await page.locator('#catalog button').count(), 0);
  });

  await run('evaluation throw', async page => {
    await page.route(entry, route => route.fulfill({
      contentType: 'text/javascript', body: `throw new Error('INJECTED_EVALUATION');`,
    }));
  }, async (page, events) => {
    await assertCatalogFailed(page);
    await assertCart(page);
    assert.equal(catalogEvents(events)[0].phase, 'load');
    assert.equal(catalogEvents(events)[0].actualRelease, null);
  });

  await run('mount throw', async page => {
    await page.route(entry, route => route.fulfill({
      contentType: 'text/javascript',
      body: `export const release = '${release}';
        export const contractVersion = 1;
        export function mount() { throw new Error('INJECTED_MOUNT'); }`,
    }));
  }, async (page, events) => {
    await assertCatalogFailed(page);
    await assertCart(page);
    assert.equal(catalogEvents(events)[0].phase, 'mount');
    assert.equal(catalogEvents(events)[0].actualRelease, release);
  });

  await run('cart lỗi không báo thêm thành công', async page => {
    await page.route(`${base}/cart/r7/entry.mjs`, route => route.abort('failed'));
  }, async page => {
    await stateAt(page, '#cart', 'failed');
    await stateAt(page, '#catalog', 'ready');
    await page.getByRole('button', { name: 'Thêm vào giỏ' }).click();
    await textAt(page, '#command-status', /Chưa xác nhận thêm hàng/);
    assert(!/0 sản phẩm/.test(await page.locator('#cart').innerText()));
  });

  await run('dispose trước khi entry resolve', noFault, async (page, events) => {
    await assertCart(page);
    await stateAt(page, '#catalog', 'ready');
    // Slot riêng để test lifecycle, không dispose slot thật đang dùng.
    const result = await page.evaluate(async release => {
      const { createSlot } = await import('/shell/s18/remote-slot.mjs');
      const root = document.createElement('div');
      document.body.append(root);
      const records = [];
      const slot = createSlot({
        name: 'catalog', root, revision: 'lifecycle-fixture',
        spec: { release, entry: `/catalog/${release}/entry.mjs` },
        report: event => records.push(event),
      });
      const pending = slot.start({ onAdd() {} });
      slot.dispose(); // Ngay trước continuation của import, kể cả module đã cache.
      await pending;
      slot.dispose();
      const result = { state: root.dataset.state, children: root.childElementCount,
        records: records.length };
      root.remove();
      return result;
    }, release);
    assert.deepEqual(result, { state: 'disposed', children: 0, records: 0 });
  });
} finally {
  await browser.close();
}

node fault-tests.mjs r19
node fault-tests.mjs r18

{
  "shell": "s18",
  "remote": "catalog",
  "config": "cfg-102",
  "selectedRelease": "r19",
  "actualRelease": null,
  "phase": "load",
  "kind": "timeout",
  "state": "failed",
  "durationMs": 2001
}

node candidate.mjs r19 cfg-103
node fault-tests.mjs r19
node promote.mjs cfg-103
curl -fsS http://127.0.0.1:4173/runtime/config.json

find public/index.html public/shell public/cart -type f -exec sha256sum {} + | sort > evidence/resilience-before.sha256
cp public/runtime/config.json evidence/incident-config.json

node candidate.mjs r18 cfg-104
node fault-tests.mjs r18
node promote.mjs cfg-104

find public/index.html public/shell public/cart -type f -exec sha256sum {} + | sort > evidence/resilience-after.sha256
diff -u evidence/resilience-before.sha256 evidence/resilience-after.sha256
cp public/runtime/config.json evidence/recovered-config.json

react: {
  singleton: true,
  strictVersion: true,
  requiredVersion: '^99.0.0', // Fault fixture: cố ý không khớp React 19 của lab.
  import: false,            // Catalog không cung cấp local fallback React.
},

npm run dev:catalog

react: {
  singleton: true,
  strictVersion: true,
  requiredVersion: dependencies.react,
},