S
SolidJS•12mo ago
Grahf

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
No description
10 Replies
Grahf
GrahfOP•12mo 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
lxsmnsyc•12mo ago
Curious but I have to task, does createForm support async callbacks?
Grahf
GrahfOP•12mo 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
lxsmnsyc•12mo ago
Okay I get it now You're expecting 400 responses to throw
Grahf
GrahfOP•12mo ago
Yes the 400. Because I didn't put in a username or password
lxsmnsyc
lxsmnsyc•12mo 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
GrahfOP•12mo 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
lxsmnsyc•12mo 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
GrahfOP•12mo ago
I see. Maybe I'll go back to Felte and try it. Thanks
Grahf
GrahfOP•12mo 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
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: `...
Want results from more Discord servers?
Add your server