Deferred values seem broken in single fetch

[lifeiscontent]

Reproduction

https://stackblitz.com/edit/remix-run-remix-obxpgddh?file=app%2Froutes%2F_index.tsx

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @remix-run/dev: * => 2.15.3 
    @remix-run/node: * => 2.15.3 
    @remix-run/react: * => 2.15.3 
    @remix-run/serve: * => 2.15.3 
    vite: ^5.1.0 => 5.4.14

Used Package Manager

npm

Expected Behavior

expect to be able to use the value from useAsyncError

Actual Behavior

never consistently returns the error value.

[brookslybrand]

You have to throw an error. In this example a string is thrown, not an error

[lifeiscontent]

@brookslybrand I also tried a Response, and that doesn't work either

[lifeiscontent]

@brookslybrand the docs also say value which means it doesn't need to be an error. https://api.reactrouter.com/v7/functions/react_router.useAsyncError.html

[lifeiscontent]

here's a similar repro of this working without single fetch:

https://stackblitz.com/edit/remix-run-remix-msywtrm6?file=app%2Froutes%2F_index.tsx,vite.config.ts (just turn on single fetch to see it behave inconsistently)

1 caveat which personally makes this API a little rough to use is not being able to have it already consume error responses or primitive values

[brookslybrand]

This seems to be a duplicate issue of react-router #12676

I'm not sure whether it was intended or not to throw arbitrary non-error values from deferred promises before single fetch.

As for sending a Response, I don't know if that's a great value to return, since the response for the data/document has already been sent. This is further data that's streaming in

[seanify-24]

@lifeiscontent the error is in line 49: JSON.stringify(error). This returns an empty object because stringify() only includes directly enumerable properties, and the common properties of an Error are not enumerable.

Change that line to JSON.stringify(String(error)) or write a function to serialize an error object to pass in. You're just passing data to stringify that it doesn't know what to do with.

[lifeiscontent]

@seanify-24 if I do that, I see: "Error: An unknown error occurred" instead of "goodbye"

[seanify-24]

Perhaps I'm confused as to what the problem is then.

If you follow @brookslybrand 's suggestion to throw an Error object instead of a string, it seem to behave correctly. Here's what I changed:

const greet = async () => {
  if (Math.random() >= 0.5) {
    throw new Error('goodbye');
  }
  return 'hello';
};

...

// cannot see goodbye
function ErrorComponent() {
  const error = useAsyncError();
  console.log('ErrorComponent', error);
  console.dir(error);
  return <p key="error">{error.message}</p>;
}

Results in goodbye being printed at random intervals

[lifeiscontent]

Perhaps I'm confused as to what the problem is then.

If you follow @brookslybrand 's suggestion to throw an Error object instead of a string, it seem to behave correctly. Here's what I changed:

const greet = async () => {
  if (Math.random() >= 0.5) {
    throw new Error('goodbye');
  }
  return 'hello';
};

...

// cannot see goodbye
function ErrorComponent() {
  const error = useAsyncError();
  console.log('ErrorComponent', error);
  console.dir(error);
  return <p key="error">{error.message}</p>;
}

Results in goodbye being printed at random intervals

The issue is the docs say useAsyncError returns a "value" which to me means ANYTHING. E.g. if I don't want to return an error, but rather some other value that I want to have access to, it should work. also, when it comes to error boundaries the error that is returned is capable of grabbing the "data" of the loader in the error state, and the inconsistency here is not great because you have to write extra code to more or less, solve the same problem, (async IO)