fix(signals): don't route an already-caught error past its Errored through a Loading (#2856)

In Errored > Loading > Errored > content, a sync error from the content
was routed past the inner Errored to the boundary above the Loading —
both when the content threw during the same flush the boundaries mounted
and when it threw reactively after a healthy commit. With no outer
boundary, the error escaped entirely and halted reactivity. This broke
the React-style Suspense > ErrorBoundary > content nesting that TanStack
Router mirrors.

The inner Errored consumed the ERROR dimension from the notification
mask when it caught and forwarded only the PENDING remainder up the
queue chain, but the Loading queue's notify-through remap keyed off the
node's raw status flags and resurrected the already-caught error past
its handler. The remap now fires only while the ERROR dimension is still
live in the mask.

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: brenelz

.changeset/loading-errored-composition-escape.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/signals": patch
+---
+
+Fixed an error-routing escape in `Errored > Loading > Errored > content` composition: a sync error thrown by the content was routed past the inner `Errored` to the boundary above the `Loading` — both when the content threw during the same flush the boundaries mounted (e.g. navigating to a route that renders already-errored) and when it threw reactively after a healthy commit. The inner `Errored` consumed the ERROR dimension from the notification mask when it caught, but the `Loading` queue's notify-through remap keyed off the node's raw status flags and resurrected the already-caught error past its handler. The remap now only fires while the ERROR dimension is still live in the mask. Errors surfaced through DOM insertion effects were unaffected. Restores the beta.15 (and Solid 1.x) contract that `Loading > Errored > content` reliably catches at the inner boundary.

packages/solid-signals/src/boundaries.ts

@@ -304,12 +304,18 @@ export class CollectionQueue extends Queue {
     // Notify-through: a real error inside a `Loading` is not this boundary's to
     // handle — remap it to ERROR and forward toward the `Errored` that catches it.
     // This must run before the initialized passthrough below so the error still
-    // reaches its catcher after this boundary has committed. The mirror case
-    // (pending inside an `Errored`) needs no explicit rule: the PENDING dimension
-    // survives `type &= ~collectionType` below and reaches the outer `Loading`
-    // natively, while a pending already caught by an inner `Loading` arrives here
-    // as a bare ERROR-dimension remainder and is correctly swallowed.
-    if (this._collectionType & STATUS_PENDING && flags & STATUS_ERROR) {
+    // reaches its catcher after this boundary has committed. Guarded on the ERROR
+    // dimension still being live in `type`: an `Errored` nested below this
+    // `Loading` consumes ERROR from the mask when it catches, and remapping off
+    // the node's raw `flags` alone would resurrect that consumed error and route
+    // it past the boundary that already handled it (the Loading > Errored >
+    // content composition escape).
+    // The mirror case (pending inside an `Errored`) needs no explicit rule: the
+    // PENDING dimension survives `type &= ~collectionType` below and reaches the
+    // outer `Loading` natively, while a pending already caught by an inner
+    // `Loading` arrives here as a bare ERROR-dimension remainder and is correctly
+    // swallowed.
+    if (this._collectionType & STATUS_PENDING && type & STATUS_ERROR && flags & STATUS_ERROR) {
       return super.notify(node, STATUS_ERROR, flags, error);
     }
 

packages/solid-signals/tests/createErrorBoundary.test.ts

@@ -828,6 +828,101 @@ it("does not loop when an async memo is read inside Loading > Errored (#2809)",
   expect(unwrap(bad)).toBe("caught: posts failed");
 });
 
+/**
+ * #2809 fallout — the `Errored > Loading > Errored > content` composition
+ * escape: a sync error from the content must be caught by the INNER `Errored`,
+ * the boundary between the `Loading` and the throwing content. When the inner
+ * boundary catches, it consumes the ERROR dimension from the notification mask
+ * and forwards only the PENDING remainder up the queue chain — but the
+ * `Loading` queue's notify-through remap keyed off the node's raw status flags
+ * instead of the mask, resurrecting the already-caught error and routing it to
+ * the OUTER boundary, whose fallback then replaced the whole subtree (and with
+ * no outer boundary, reactivity halted). This broke the React-style
+ * `Suspense > ErrorBoundary > content` nesting that TanStack Router mirrors.
+ * The remap now fires only while the ERROR dimension is still live in the mask.
+ */
+function mountNestedComposition(content: () => string) {
+  let rendered: unknown;
+  const dispose = createRoot(dispose => {
+    const outer = createErrorBoundary(
+      () =>
+        createLoadingBoundary(
+          () => createErrorBoundary(content, () => "inner caught")(),
+          () => "loading"
+        )(),
+      () => "outer caught"
+    );
+    createRenderEffect(
+      () => (rendered = outer()),
+      () => {}
+    );
+    return dispose;
+  });
+  return { rendered: () => rendered, dispose };
+}
+
+it("catches at the inner Errored when content throws in the mounting flush (Errored > Loading > Errored)", () => {
+  const { rendered, dispose } = mountNestedComposition(() => {
+    throw new Error("boom on mount");
+  });
+  flush();
+  expect(rendered()).toBe("inner caught");
+  dispose();
+});
+
+it("catches at the inner Errored when content throws reactively after a healthy commit (Errored > Loading > Errored)", () => {
+  const [$boom, setBoom] = createSignal(false);
+  const { rendered, dispose } = mountNestedComposition(() => {
+    if ($boom()) throw new Error("boom");
+    return "ok";
+  });
+  flush();
+  expect(rendered()).toBe("ok");
+
+  setBoom(true);
+  flush();
+  expect(rendered()).toBe("inner caught");
+  dispose();
+});
+
+it("catches an async rejection at the inner Errored (Errored > Loading > Errored)", async () => {
+  const rejected = Promise.reject(new Error("boom async"));
+  rejected.catch(() => {});
+
+  let rendered: unknown;
+  const dispose = createRoot(dispose => {
+    // The memo lives outside the boundary computes (component-body shape); a
+    // memo created inside the inner boundary's fn would be recreated on every
+    // re-run and refetch forever.
+    const data = createMemo(() => rejected);
+    const outer = createErrorBoundary(
+      () =>
+        createLoadingBoundary(
+          () =>
+            createErrorBoundary(
+              () => `value: ${data()}`,
+              () => "inner caught"
+            )(),
+          () => "loading"
+        )(),
+      () => "outer caught"
+    );
+    createRenderEffect(
+      () => (rendered = outer()),
+      () => {}
+    );
+    return dispose;
+  });
+  flush();
+  expect(rendered).toBe("loading");
+
+  await Promise.resolve();
+  await Promise.resolve();
+  flush();
+  expect(rendered).toBe("inner caught");
+  dispose();
+});
+
 /**
  * #2809 hydration interaction: with snapshot capture active (as during
  * `hydrate()`), boundary computeds must not become snapshot sources. The tree no