[HELP] Catch 429 or other errors using useSanctumForm()

[dreftas]

I have a question, how I can catch 429 or other backend errors when using useSanctumForm() ?

const form = useSanctumForm("post", "email/verification-notification", {});

const submit = () => {
  try {
    form
      .submit()
      .then((response) => {
        console.log(response)
      })
      .catch((error) => {
        console.log(error);
      });
  } catch (e) {
    console.log(e);
    console.log(e.response);
  }
};

I could use useSanctumFetch here, but it is not about that, I think there could be other pages where I need to use useSanctumForm with actual form values being passed and there I can get 429 or something else.

Now to response of that code above:

Network tab shows "correct" response from backend, 429 Error with some message and other parameter (retry after seconds):

console.log(response) in .then() is not being called, because we got error.

console.log(error) in form.catch() is just plain text, no response codes or response parameters, etc.:

catch(e) part of try {} is not being called also.

Maybe I'm using this one somehow different than I should ? I just need to get that message and retry_after_seconds values from response if response status is 429.

[dreftas]

Eh, I figured it out while reading docs again. This kind of thing is mentioned in Nuxt sanctum authentication docs - error handling, there was just used login() function instead of useSanctumForm(). Another issue is that I have catched actual form.submit() so that catch(e) that goes after try { } is not being called, because it does not have unhandled errors.

In case someone has this situation too:

import { FetchError } from "ofetch";
const form = useSanctumForm("post", "email/verification-notification", {});

const submit = async () => {
  try {
    await form.submit().then((response) => {
      // logic when submit success
    });
  } catch (e) {
    if (e instanceof FetchError) {
      console.log(e.response); // response in case of error
    }
  }
};

And e.response returns all response data that you may need:

@hkp22 Maybe it would be helpful to add example in error handling docs when using useSanctumForm too, so if there were newbies like me, they won't be in this kind of situation like me :D

[hkp22]

@dreftas Thank you for your detailed explanation and for sharing your solution! It’s great that you found a way to access the response data from errors like 429 when using useSanctumForm().

You’re right; handling Promises and async/await can sometimes be confusing, especially when mixing .then()/.catch() with try...catch. Here’s a quick tip:

• If you’re using async/await, you can handle errors using try...catch directly—there’s no need for .then()/.catch() chaining.
• Alternatively, if you prefer .then()/.catch() for Promise handling, there’s no need to mix in try...catch.

For anyone looking to strengthen their understanding of these concepts, I recommend checking out my video on:

• Understanding Promises in JavaScript
• Mastering Async/Await in JavaScript.

If you’re interested in a comprehensive resource on modern JavaScript, my ebook JavaScript: From ES2015 to ES2023 is also available. It covers key features and concepts to enhance your skills.

Thank you again for the suggestion to add more examples on error handling with useSanctumForm() in the documentation—I’ll make sure to include it to help others avoid similar challenges. Happy coding!