[Bug]: UI Inconsistent when navigating away from a failed post action with optimistic UI

[JoshuaPhillips]

What version of Remix are you using?

v1

Steps to Reproduce

1. Create a component which posts some data from a form.
2. Add optimistic UI to that route so that the posted data is shown while the submission is in progress.
3. Throttle your network connection so that the response from the server is slow enough to continue.
4. Ensure that your server throws an error, or that the request in some way fails to update properly.
5. Submit the data, then navigate away from the route before the request completes.

Expected Behavior

The fact that the request failed should be clear to the end user, or the developer (depending on the implementation of the fix).

Actual Behavior

Not entirely sure, the route appears to alternate between the pre-optimistic UI version of the posting route / component, and the route that you've navigated to. @kentcdodds may be able to elaborate a bit more, as this was done on his livestream.

[kentcdodds]

Thanks for opening the issue @JoshuaPhillips!

I wouldn't call this one a bug (so I changed it to enhancement) because everything is working as designed. In any app in the world with or without optimistic UI the user can fire off the mutation and close their browser and they'll never know something went wrong. I'm not sure whether we can do anything about this in particular, but maybe the team will have an idea of how we could give you the right primitives to redirect the user back to the failed page (if those primitives don't exist). The UX I'm thinking is:

• User submits invalid form
• User navigates away before the action returns errors
• Action returns errors
• User is redirected from wherever they are to the form with the errors

I'm not sure whether Remix currently exposes the things you'd need to build this kind of user experience, so I'm going to assign this one to @ryanflorence to give it a look.

[bbassett]

With no context of the underlying implementation, I think it would be ideal to bubble up an error to the nearest loaded CatchBoundary or ErrorBoundary.

so in the example from the livestream, behavior would be:

• User: submits POST form to /jokes/new
• User: Navigates to /jokes/{other_joke_id}
• Remix: can't raise error in /routes/jokes/new.tsx CatchBoundary (or ErrorBoundary)
• Remix: keeps going up the chain of CatchBoundaries similar to if it was never defined, so it would go to /routes/jokes/index.tsx CatchBoundary, /routes/index.tsx, or /root.tsx`, depending on where user navigated to