Full Stack JavaScript Strategies

Chapter 18. Frontend Error Handling

You’ve already implemented much of the functionality that is common to all frontend apps. Up to this point, you have created an infrastructure that should allow the app to be expanded to accommodate any new features that the Product team can throw at you. Now you can dive into more of the details on the frontend that make the app more user-friendly.

I’ve briefly mentioned errors in other chapters of the book, but we’ll finally take a closer look here. Error handling was left out before so that you could focus on best practices for the other parts of the frontend. In practice, though, error handling should be included in the requirements for your tasks. You have to deal with all the errors that could potentially happen to the user. Error handling needs to be thorough so that you don’t leak any sensitive information to users or malicious parties who are trying to attack your app and so that the app keeps a consistent UX.

In this chapter, I’ll cover:

• Error components

• User validation errors

• API errors

These are all standard errors that will eventually come up, so I’ll go over common ways to handle them. You’ll need to work with the Product and Design teams to define and create useful error states that will lead the user down the path they need to take. As you and the team build the app, take note of any edge cases you run into during development, which could bring up things no one had considered before.

Error Boundary Approaches

Error boundaries ...