Error inside createRouteAction not triggering ErrorBoundary

[dallastjames]

In the documentation, it's mentioned that if you don't explicitly handle an error on a route action then the error should bubble up to the nearest ErrorBoundary:

Given the following two components:

export function FormSection() {
  return (
    <ErrorBoundary fallback={() => <h2>Oh no! Error!</h2>}>
      <TinyForm />
    </ErrorBoundary>
  );
}

export function TinyForm() {
  const [formState, { Form }] = createRouteAction(async (data: FormData) => {
    throw new Error("Something went wrong!");
  });

  return (
    <Form>
      <label for="username">Username:</label>
      <input type="text" name="username" />
      <input type="submit" value="submit" disabled={formState.pending} />
    </Form>
  );
}

I would expect that the error being thrown in the route action bubbles up to the ErrorBoundary above, but it is not. The error is just swallowed by the routeAction. I can still manually handle errors using the recommended approach:

<Show when={formState.error}>
  <p>Oh no, there was an error: {formState.error.message}</p>
</Show>

But ideally, I'd like to ensure that these hit the Error boundaries as expected so that I can ensure I'm catching unhandled errors inside of Sentry.

A sample app with a reproduction lives here