Capture error from laravel controller with Axios

Question

¿How i can capture errors from methos of controller in Laravel with Axios? The problem is the following, when the data passes through the validator of the myProfile method in the UserController in laravel and is correct, a json response is generated in the method and then Axios takes them and displays the toast Success message, but when i passes erroneous or empty data to the validor and this fails, Axios does not take the json with the error and shows me the empty toast and generates an error 422 in the console.

myProfile in User controller

public function myProfile(Request $request)
{
    $valido = $this->validate($request, [
        'firstname' => 'required|min:3|max:15',
        'lastname' => 'min:2|max:15',
        'gender' => 'numeric',
        'description' => 'max:200',
    ]);

    if($valido){
        return response()->json([
            'status' => 'success',
            'msg' => 'Ok',
        ], 201);
    }
    else{
        return response()->json([
            'status' => 'error',
            'msg' => 'Error',
        ], 422);
    }

}

Profile.vue (Axios section)

updateUser(){
        const value = {
            'id': this.user.id,
            'firstname': this.user.firstname,
            'lastname': this.user.lastname,
            'gender': this.user.gender,
            'description': this.user.description,
        } 

        axios.put('/dashboard/profile', value)
            .then((response) => {
                let title = response.data.status;
                let body = response.data.msg;
                this.displayNotificationSuccess(title, body);
            })
            .catch((error) => {
                let title = error.response.data.status;
                let body = error.response.data.msg;
                this.displayNotificationError(title,body);
            })
    }

Screenshot when Axios capture json Success fron controller

Screenshot when Axios capture Success request

Screenshot when Axios not capture json error from controller

Error

Screenshot from console for json error no capture by axios

Error 422 in console

¿How i can solved that problem? I used Laravel 5.6, Vuejs 2 and Axios

Answer 1

If you wrap the validate() method call in a try/catch block, then you can catch the ValidationException thrown when the request is invalid. This will allow you to return your own response.

I've shown you an example of this below, and included the validation errors too, should you wish to output these on the front-end.

<?php

use Illuminate\Validation\ValidationException;

public function myProfile(Request $request)
{
    try {
        $this->validate($request, [
            'firstname'   => 'required|min:3|max:15',
            'lastname'    => 'min:2|max:15',
            'gender'      => 'numeric',
            'description' => 'max:200',
        ]);

        return response()->json([
            'status' => 'success',
            'msg'    => 'Okay',
        ], 201);
    }
    catch (ValidationException $exception) {
        return response()->json([
            'status' => 'error',
            'msg'    => 'Error',
            'errors' => $exception->errors(),
        ], 422);
    }
}