SolidJS•6mo ago

Is there a way to grab a throwed error in "action" function

Hello i have a question. I'm going more in depth into solid. But is there actually a way to grab the error that has been throwed inside an "action" function? i have a function like this ( example ):

export const register = action(async (data: FormData) => {

    const username = data.get("username");
    const password = data.get("password");

    const repeatPassword = data.get("passwordRepeat");

    throw new Error("Not implemented yet");
});

export const register = action(async (data: FormData) => {

    const username = data.get("username");
    const password = data.get("password");

    const repeatPassword = data.get("passwordRepeat");

    throw new Error("Not implemented yet");
});

and this is the html / jsx implementation:

  <Card
      component="form"
      class="w-96"
      action={register}
      method="post"
  >
                {/** --> show some error here <-- **/}

                <input class="border w-full mb-3 rounded-md py-1.5" name="user" type="text" required/>
                <input class="border w-full mb-3 rounded-md py-1.5" name="password" type="password" required/>
                <input class="border w-full mb-3 rounded-md py-1.5" name="passwordRepeat" type="password"
                       required/>
                <Button class="w-full" component="button" type="submit">
                    Register
                </Button>
  </Card>

  <Card
      component="form"
      class="w-96"
      action={register}
      method="post"
  >
                {/** --> show some error here <-- **/}

                <input class="border w-full mb-3 rounded-md py-1.5" name="user" type="text" required/>
                <input class="border w-full mb-3 rounded-md py-1.5" name="password" type="password" required/>
                <input class="border w-full mb-3 rounded-md py-1.5" name="passwordRepeat" type="password"
                       required/>
                <Button class="w-full" component="button" type="submit">
                    Register
                </Button>
  </Card>

4 Replies

brenelz•6mo ago

I think the idea is to return errors and throw redirects Then use 'useSubmission' to get the value from the action

GigaThinker•6mo ago

How would it look like code wise? Like:

export const register = action(async (data: FormData) => {

    const username = data.get("username");
    const password = data.get("password");

    const repeatPassword = data.get("passwordRepeat");

    if(password !== repeatPassword) {
        throw redirect("/register?error=...");
    }
});

export const register = action(async (data: FormData) => {

    const username = data.get("username");
    const password = data.get("password");

    const repeatPassword = data.get("passwordRepeat");

    if(password !== repeatPassword) {
        throw redirect("/register?error=...");
    }
});

but how does the useSubmission now about the action?

   const action = useSubmission(register);

   const action = useSubmission(register);

where do i hook it up?

brenelz•6mo ago

I'm not exactly sure how it knows but it does Just return new Error(). And then get it from action.result or something

GigaThinker•6mo ago

that did the job, thanks 🙂

Gaming

Programming

Is there a way to grab a throwed error in "action" function