How to handle errors (exceptions) in a form action action(() => { ... })?

[reivilibre]

I'm using solid-router's action in a client-side rendered, single-page application, project. I am basing my knowledge off this docs page: https://docs.solidjs.com/solid-router/concepts/actions

I've taken an example from that page, then modified it to dress it up in a Router so that we can use it in the playground.

import { render } from "solid-js/web";
import { action, redirect, Router, Route } from "@solidjs/router";

const isAdmin = action(async (formData: FormData) => {
  await new Promise((resolve, reject) => setTimeout(resolve, 1000));

  console.log("before");
  throw new Error("unexpected");
  console.log("after");
});

export function MyComponent() {
  return (
    <form action={isAdmin} method="post">
      <label for="username">Username:</label>
      <input type="text" name="username" />
      <input type="submit" value="submit" />
    </form>
  );
}

render(() => <Router><Route path="*any" component={MyComponent} /></Router>, document.getElementById("app")!);

see: https://playground.solidjs.com/anonymous/7f376034-8464-4bfb-a9ad-7db94758eb41 (the Playground puts in red squiggles on the import but it actually works fine)

Other than not really having a proper way to handle the error, I'm finding that this swallows the exception (nothing appears in the browser console, execution just stops).

I have tried to follow #387 but, despite it sounding like a way to handle errors was introduced in 0.13.0, I can't figure it out.

Any pointers please? Thanks

[klequis]

I haven't done this with Solid as I work only with SolidStart apps but here are some tips from SolidStart that should be helpful:

• You can catch errors with: ErrorBoundary

• Don't forget to include Suspense

• There should be some tips in: Actions in SolidStart - How to leverage Single-Flight-Mutations

• Have you seen the examples here: https://github.com/solidjs/solid-start/tree/main/examples

• Strello maybe be helpful.

[reivilibre]

Thanks.

I forgot to mention but ErrorBoundarys do not catch the errors from actions either, at least not when used in <form action={...}>!

The SolidStart video, I didn't watch but I went to the repo, I'm not sure they are doing anything differently to me (https://github.com/madaxen86/solid-tutorials/blob/faad90922e6e3a90d909e9b398afb3721e6fb0c9/actions/src/routes/index.tsx#L73) so maybe this is something that just doesn't work without SolidStart (assuming the error handling does work in the example there).

Ditto for the other SolidStart examples, I guess by handling them on the server the error handling semantics completely change (I notice the actions all use "use server" which is a SolidStart concept)

[klequis]

Yep, that doesn't work. The recommendation is to return errors rather than throw them: Router>Actions.

[reivilibre]

Might be fair enough, but it seems a bit of a footgun if the exceptions aren't even logged.

I also think therefore the <form action={...}> form of using actions is therefore not ideal since it does not seem to provide a way to return errors