How to catch all the Laravel API errors with Axios and VueJS?

Question

Being more specific, how can I always have an answer from my Laravel API with VueJS running or not correctly? Since if there is an error in the Backend I have no answer in the Frontend.

This is what I do with Axios, VueJS and sweetalert2:

axios.get('/usuarios').then(function(response){
   if(response.data.estatus == 'si'){
      Swal.fire('OK',response.data.mensaje,'success')
   }else{
      Swal.fire('Error',response.data.mensaje,'error')   
   }
})

If an error arises in the controller I only get the error in console, how can I catch it and show it properly with Sweetalert2?

For example: Uncaught (in promise) Error: Request failed with status code 500

Answer 1

for catch all errors in laravel you need to edit App\Exceptions\Handler file like this

 public function render($request, Exception $exception)
{
    if ($exception){
        return response()->json([
            'status' => 'failed',
            'error' => $exception->getMessage()
        ]);
   }
    return parent::render($request, $exception); // return json with status => 'success' and 'message' => 'Done!'
}

then in your Vuejs project easily you can find out exceptions that have occurred in the backend side

axios.get('/usuarios').then(function(response){
   if(response.data.status == 'success'){
      Swal.fire('OK',response.data.message,'success') // or call another component
   }else{
      Swal.fire('Error',response.data.error,'error')   
   }
})