Throw in Streaming loader()

[Gn3po4g]

As the remix docs say:

When a Response is thrown, it will be automatically unwrapped into an ErrorResponse instance with state/statusText/data fields
https://remix.run/docs/en/main/route/error-boundary

Like below:

export async function loader() {
  throw json('error')
}

But whart if i return a defer?

export async function loader() {
  const promise = new Promise().then(p=>{throw json('error')})
  return defer({promise})
}

it will cause server error and print Uncaught (in promise) Error:

[Gn3po4g]

I can only move them to clientLoader() now.

[sergiodxa]

This is not an issue with Remix but with how HTTP works. When you send an HTTP response, you send something like this:

HTTP/1.1 200 OK
Content-Type: application/json

{"hello": "world"}

Notice that the response starts with the version and the status code, then the headers and finally after a blank line, the body.

The body of a request can be streamed, which means the server can send the first part of the response and then send the body as it's being generated, this is what Remix is doing when you use defer to send a promise, it's sending something like this:

HTTP/1.1 200 OK
Content-Type: application/json

// here it waits until the promise is resolved
{"hello": "world"}

The problem comes when you do throw json('error'), since you're throwing a new response instance (that's what json returns) Remix is trying to send a new response with a new status code, headers and body. But because HTTP doesn't allow that it fails.

What you need to do instead is to return data, and handle the error client side using the <Await errorElement> prop.

export async function loader() {
  let promise = doSomethingAsync().then(() => {
    throw new Error("error");
  });

  return defer({ promise });
}

export default function Component() {
  let { promise } = useLoaderData<typeof loader>();
  return (
    <Suspense fallback={<LoadingFallback />}>
      <Await resolve={promise} errorElement={<ErrorFallback />}>
        {(data) => <DataComponent data={data} />}
      </Await>
    </Suspense>
  );
}

And inside ErrorFallback you can use the useAsyncError hook to get the error.

[Gn3po4g]

Great! By the way, what is the type of useAsyncError() if throw json()? It is not converted to ErrorResponse by remix.

[sergiodxa]

useAsyncError will not work with throw json(), you need to throw an error and let the promise reject.

[Gn3po4g]

ok. so i should just throw an object right?

[kentntwari]

I tried your solution above and it doesn't seem to work. I am actively trying to test my error scenarios and for some reason it just doesn't render the errorElement prop of . Whenever I throw an error, it resolves to an unhandled rejection error instead. I also added this bit of code in my entry.server.tsx file as referenced in this thread #9178 to avoid my server to crash but still I can't seem to force the UI to revert to when an error is encountered. @sergiodxa , it would be super helpful and awesome if you could dive a bit deeper on how to solve this. I don't know whether this is a bug with defer or lack of skill on my part.

[sergiodxa]

I wrote an example here with two deferred promises, one resolving correctly and another being rejected, both with their own Suspense and Await, the first renders the resolved value and the second one the errorElement in the Await component.

Here's the link https://stackblitz.com/edit/remix-run-remix-qerjjc?file=app%2Froutes%2F_index.tsx

The only file I changed from the basic template is the app/routes/_index.tsx, and only to add a loader and update the UI.