SolidJS•6mo ago

Felte Form server error handling

Hello. I'm having trouble displaying errors from the server with a Felte form. According to the docs "You can add an onError function to the createForm configuration that will be called if the onSubmit function throws an error." I've added the onError function but I'm not getting the errors from the onSubmit function. My form looks like this:

  const { form, errors } = createForm({
    onSubmit: async (values, { event }) => {
      try {
        const formData = new FormData(event.target)

        const response = await fetch('/api/login', {
          method: 'POST',
          body: formData,
        })

        const data = await response.json()
        return data
      } catch (error) {
        console.warn('Fetch call failed')
        console.error(error)
        // You might want to handle the error or return some indication of failure
        throw error
      }
    },
    onSuccess(response, context) {
      // Do something with the returned value from `onSubmit`.
    },
    onError(err, context) {
      // Do something with the error thrown from `onSubmit`.
      console.log('test err: ', err)
    },
  })

  const { form, errors } = createForm({
    onSubmit: async (values, { event }) => {
      try {
        const formData = new FormData(event.target)

        const response = await fetch('/api/login', {
          method: 'POST',
          body: formData,
        })

        const data = await response.json()
        return data
      } catch (error) {
        console.warn('Fetch call failed')
        console.error(error)
        // You might want to handle the error or return some indication of failure
        throw error
      }
    },
    onSuccess(response, context) {
      // Do something with the returned value from `onSubmit`.
    },
    onError(err, context) {
      // Do something with the error thrown from `onSubmit`.
      console.log('test err: ', err)
    },
  })

And the error handling part of my server looks like this:

 const errors = { username: '', password: '' }

  if (typeof name !== 'string' || name.length < 3) {
    errors.username += 'Please enter a three character or longer username.'
  }
  if (typeof password !== 'string' || password.length < 5) {
    errors.password += 'Password must be at least five characters.'
  }

  const hasErrors = Object.values(errors).some((msg) => msg)

  if (hasErrors) {
    console.debug(errors)

    return new Response(
      JSON.stringify({
        message: 'Login Failed',
        errors: errors,
      }),
      {
        status: 400,
      },
    )
  }

 const errors = { username: '', password: '' }

  if (typeof name !== 'string' || name.length < 3) {
    errors.username += 'Please enter a three character or longer username.'
  }
  if (typeof password !== 'string' || password.length < 5) {
    errors.password += 'Password must be at least five characters.'
  }

  const hasErrors = Object.values(errors).some((msg) => msg)

  if (hasErrors) {
    console.debug(errors)

    return new Response(
      JSON.stringify({
        message: 'Login Failed',
        errors: errors,
      }),
      {
        status: 400,
      },
    )
  }

I get the 400 status code back (see screenshot). But no console.log from the onError function

10 Replies

Grahf•6mo ago

This is the form element. errors I'm tyring to display are commented out. Left out the client side checks because I'm trying to make sure server side checks work too and they aren't 😦

      <form use:form>
        <label>
          Username
          <input type='text' name='username' />
        </label>
        <Show when={errors().username}>
          <p>{errors().username}</p>
        </Show>
        <label>
          Password
          <input type='password' name='password' />
        </label>
        {/* <Show when={response()?.errors.password}> */}
        {/*   <p>{response().errors.password}</p> */}
        {/* </Show> */}
        <button>Submit</button>
        {/* <Suspense>{response() && <p>{response().message}</p>}</Suspense> */}
      </form>
      <pre>
        {/* Prettify the errors and display them in HTML */}
        {JSON.stringify(errors(), null, 2)}
      </pre>

      <form use:form>
        <label>
          Username
          <input type='text' name='username' />
        </label>
        <Show when={errors().username}>
          <p>{errors().username}</p>
        </Show>
        <label>
          Password
          <input type='password' name='password' />
        </label>
        {/* <Show when={response()?.errors.password}> */}
        {/*   <p>{response().errors.password}</p> */}
        {/* </Show> */}
        <button>Submit</button>
        {/* <Suspense>{response() && <p>{response().message}</p>}</Suspense> */}
      </form>
      <pre>
        {/* Prettify the errors and display them in HTML */}
        {JSON.stringify(errors(), null, 2)}
      </pre>

and I'm trying different things in that code to displau the errors I am making progress

lxsmnsyc•6mo ago

Curious but I have to task, does createForm support async callbacks?

Grahf•6mo ago

I saw an example of someone using it but I'm not sure. I gave up on Felte and did a regular form based off this example which uses solidJS (https://docs.astro.build/en/recipes/build-forms-api/) and it works fine. I feel like Felte should be used by more experienced people until they add more to their docs

lxsmnsyc•6mo ago

Okay I get it now You're expecting 400 responses to throw

Grahf•6mo ago

Yes the 400. Because I didn't put in a username or password

lxsmnsyc•6mo ago

It doesn't behave that way because technically speaking, 400 responses is a "successful" response. You might want to do

if (!response.ok) {
  throw await response.json();
}

if (!response.ok) {
  throw await response.json();
}

The only way a fetch call will throw an error is if it cannot connect to the server. Otherwise, a successful response will not throw, regardless of the status code

Grahf•6mo ago

This would go in the try block on client side I think? didn't realize a 400 wouldn't trigger the onError function of Felte forms. I was hoping I could get the errors from the server and display them on the page.....maybe that is pointless if there's client side validation

lxsmnsyc•6mo ago

I mean if you have

async onSubmit() {
  const response = await fetch(...);
  return response.json();
}

async onSubmit() {
  const response = await fetch(...);
  return response.json();
}

then Felte would see it as a successful response however if you have

async onSubmit() {
  const response = await fetch(...);
  if (!response.ok) {
    throw await response.json();
  }
  return response.json();
}

async onSubmit() {
  const response = await fetch(...);
  if (!response.ok) {
    throw await response.json();
  }
  return response.json();
}

then that fits what you want This is not a Felte behavior, just a fetch concept A common misconception specially from people who used axios in the past

Grahf•6mo ago

I see. Maybe I'll go back to Felte and try it. Thanks

Grahf•6mo ago

It's kind of weird that questions from a discord wind up on a website: https://www.answeroverflow.com/m/1182743517047562300

Felte Form server error handling - SolidJS

Gaming

Programming

Felte Form server error handling