Error handling

Do not let validation errors beat you, know how to handle them!

On this page, you can find useful instructions on handling validation or any other error returned from the API while using Laravel Precognition.

Validation

If you want to validate a field value or maybe a set of fields, you can use the following method of the form instance:

form.validate('name')

By default, it will send a request to your API, and if a validation error is returned (Code 422), error content will be propagated automatically into the form. You can access it by calling

form.errors.name

However, there might be a situation when you need more granular control on the validation workflow. In the following example, we can handle different events and react according to our business logic:

form.validate('name', {
  onSuccess: (response: FetchResponse<unknown>) => {
    // validation is ok
  },
  onError: (error: Error | FetchResponse<unknown>) => {
    // error returned (non-validation related, e.g. 404 or 500)
  },
  onValidationError: (response: FetchResponse<unknown>) => {
    // validation error (422 code)
  },
})

Keep in mind, onValidationError callback does not prevent form errors from population, but allows you to hook into this event.

Submission

Once you have validated all form fields, it is time to submit form data without Precognition validation. The most straightforward approach is to use a method like this:

const submit = () => form
  .submit()
  .then((response: FetchResponse<unknown>) => console.log('Form submitted', response))
  .catch((error: FetchResponse<unknown>) => console.error('Form error', error))

In this case, we submit the form and execute then only if the API returns an OK HTTP code. Callback catch will be triggered only if validation failed or any other HTTP error occurred (404, 500, etc).

You can implement your custom error handler and extract all necessary details from the error object like this

const submit = () => form
  .submit()
  .then((response: FetchResponse<unknown>) => {
    console.log('Form submitted', response)
  })
  .catch((error: FetchResponse<unknown>) => {
    if (error.status === 403) {
      console.error('Access denied')
    }
    
    // your logic goes here
  })

If you prefer async-await syntax over callbacks, here is how you can implement error handling

async function submit() {
  try {
    const response = await form.submit()
    // Form submitted successfully
  }
  catch (e) {
    const response = e as FetchResponse<unknown>
    console.error('Form error', response.status)
  }
}

Now you know how to catch all problems before they catch you in production! 🎉