Suspense and resources: Errors

Errors

A rejected resource throws its error when it is read, so an ErrorBoundary above the reader catches it.

For agentsUpdated 2026-10-20

A rejected resource throws its error when it is read, so an ErrorBoundary above the reader catches it. Put it outside the Suspense:

src/failing.tsxtsx

import { useResource } from "@shadow-js/core";
import { ErrorBoundary, Suspense } from "@shadow-js/web";

function Name() {
  const name = useResource(async (): Promise<string> => {
    throw new Error("503");
  });
  return <b>{name()}</b>;
}

export function Page() {
  return (
    <ErrorBoundary fallback={(error, reset) => <button type="button" onClick={reset}>retry {String(error)}</button>}>
      <Suspense fallback={<i>loading</i>}>
        <Name />
      </Suspense>
    </ErrorBoundary>
  );
}

If the resource was created inside the boundary's children, reset recreates it and fetches again. An error that nobody reads is not reported; inspect data.error or data.state if you display failures inline. See Error handling.