demo · v146

Intercept and restore

Toggle a flaky data fetch and compare two strategies: classic intercept({ handler }) (URL only commits when the handler resolves) and the new intercept({ precommitHandler, handler }) shape (URL commits immediately; the slow handler runs after). Watch which strategy can roll the URL back when the post-commit handler throws.

Behind a flag: the precommit/post-commit split ships behind chrome://flags/#enable-experimental-web-platform-features in Chrome 146. The panes simulate the timing so the comparison is faithful without the flag.

Pick a destination, decide whether the data fetch should "succeed" or "throw mid-way", and switch the strategy. The address bar simulation shows when the URL becomes visible to the user — and what happens to it on error.

address bar → /dashboard

strategy

destination

data fetch behaviour

events

address bar trace

// 146 precommit/post-commit shape:
navigation.addEventListener("navigate", (e) => {
  e.intercept({
    async precommitHandler() {
      await ensureRouter(e.destination.url);   // fast — synchronous-ish
    },
    async handler() {
      await fetchAndRender(e.destination.url); // slow — happens after URL commits
    },
  });
});

// classic shape:
navigation.addEventListener("navigate", (e) => {
  e.intercept({
    handler: async () => {
      await ensureRouter(e.destination.url);
      await fetchAndRender(e.destination.url); // URL doesn't commit until both done
    },
  });
});

see also