Catch & Handle Errors with React & the Appwrite Web SDK

The “happy path” of our application is pretty buttoned up. If all goes well, they’ll have a good time browsing and potentially create new events, but what happens when all goes wrong? We’re not doing any error handling or catching any exceptions, so they might be stuck with some ugly error or worse, the application might silently fai leaving them totally and utterly confused.

Appwrite exposes their AppwriteException error instance which provides all the information we need for the variety of errors that we may hit when working with Appwrite’s services including a user not being logged in, not having access, or if we accidentally defined the wrong ID somewhere. We can use this information to not necessarily dynamically show the exact details of what failed (though we can), but help explain from an application user’s perspective what went wrong and how they can fix it.

In our Error Handling lesson, we’ll improve our UX by first seeing how we can catch errors that occur when interacting with the Appwrite SDK. We’ll then determine if it is indeed an instance of AppwriteException or a generic error which will allow us to use that information to show specific messages to our users depending on the context of their interaction. We’ll also see some different examples of patterns we can take for how we use that information to show UI, so we have a more manageable way of handling errors throughout our app.

What You’ll Learn Inspect and use AppwriteExceptions to determine what error occurred Dynamically display UI based on errors received