Add error container for API response failures

Given the following example:

commerce.checkout.capture().error(error => this.handleError);

The error object looks like this (in the console):

error
Error: Request failed with status code 422
    at createError (bundle.js:1968)
    at settle (bundle.js:2214)
    at XMLHttpRequest.handleLoad (bundle.js:1481)

The network response is this:

{"error":{"type":"not_valid","message":"Requested quantity not available"},"status_code":422}

In order to get that message, you must use error.response.data.error.message (via Axios). This is a pretty verbose way to get the message from our response, which is a standardised structure from the API.

Perhaps we should wrap these errors in our own container class with easier access to the response data?

cc @chec/engineering

[ScopeyNZ]

I was thinking the code would look like this:

class OurError extends Error {
  constructor(originalError) {
    this.originalError = originalError;
    
    // Extract information from the error response
    super(message);
    this.status_code = 422;
    // Whatever other properties you want to set here...
  }
}

[...].catch(error => {
  throw new OurError(error);
})

End goal is that we have a nicer API for errors from our API, but you can still access the original error if need be.

[ScopeyNZ]

I like the idea of doing a little error handling ourselves. I’m thinking we can create our own error class and make the errors thrown match something like this:

{
  "type": "not_valid",
  "status_code": 422,
  "message": "Requested quantity not available"
  "http_message": "Request failed with status code 422",
}

Should be pretty easy to implement.