Mastering React Test-Driven Development

Handling server errors

The Git tag for this section is handle-server-errors.

The /customers endpoint may return a 422 Unprocessable Entity error if the customer data failed validation. That could happen if, for example, the phone number already exists within the system. If this happens, we want to withhold calling the onSave callback and instead display the errors to the user and give them the chance to correct them.

The body of the response will contain error data very similar to the data we've built for the validation framework. Here's an example of the JSON that would be received:

{  "errors": {      "phoneNumber": "Phone number already exists in the system"  }}

We'll update our code to display these errors in the same way our client errors appeared. ...