Return 500 with API to get error in axios SPA

I build an API and now I want to do a delete method. I try to understand how I can return an response with a 500 for example. Here is what I mean:

return response()->json(['error' => 'Wrong post ID!', 'code' => 500], 500);

This returns an exception. The Problem is, that I want to consume it with axios. In axios I have this:

window.axios.delete('/api/posts/14').then((response) => {
  resolve(response);
}, (err) => {
  console.log(err);
  reject(err);
});

I want to get the error and the code from the array to output it in my SPA. But how can I output json? I dont want the exception as output. If I do ...

return response()->json(['error' => 'Wrong post ID!', 'code' => 500]);

... it works, but that means it is a success request.

tykus

5 years ago

Level 104

A 500 means a server error, so I would expect that something fatal happened on the server-side. A wrong post id is a user error, I would expect a 4xx status code in that case, e.g. 400 Bad Request, or 403 Forbidden

In any case 5xx or 4xx, axios will pass the error response to the rejection callback where you can handle it. If you use global interceptors, you can define a common error handling behaviour across all axios requests

Pixelairport

5 years ago

Level 12

I dont really understand what you mean, because i will get the right error from my api. But i ask myself if it would be a good idea to change app/Exceptions/Handler and add something like:

public function render($request, Throwable $e)
    {
        if($request->isJson()){

            if ($e instanceof ClientException) {
                $message = $e->getResponse()->getBody();
                $code = $e->getCode();

                return response()->json(['error' => $message, 'code' => $code], $code);
            }
        }

        return parent::render($request, $e); // TODO: Change the autogenerated stub
    }

It works for me. Or is that not a good idea?

tykus

5 years ago

Level 104

I want to get the error and the code from the array to output it in my SPA.

You can get the JSON from the err.response object in the reject callback.

window.axios.delete('/api/posts/14').then((response) => {
  resolve(response);
}, (err) => {
  let message = err.response.data.error

// do something with message
  reject(err);
});

1 like

Pixelairport

5 years ago

Level 12

That is a problem. err.response.data.error is undefined, because err.response.data is a message (string):

Client error: `POST http://myapp.test/api/st…b40010.info","code":"b40010.code" (truncated...)↵", exception: "GuzzleHttp\Exception\ClientException", file: "/home/vagrant/code/sites/streamtools/vendor/guzzlehttp/guzzle/src/Exception/RequestException.php

I will do some tests. If nothing works I think i will change the handler or maybe I get another idea. Thx for your help.

Pixelairport

5 years ago

Best Answer

Level 12

Ok. Found the problem. Everything works fine... It was just a problem with my API Gateway. I build a gateway, which consumes multiple apis and axios consumes only api gateway. When i call the orignal microservice api url I get the error. I will develope a workaround for this. But wanted to tell what the problem was.

Please or to participate in this conversation.