NextFaze
Published in

NextFaze

Production Error Handling in Ionic

How to deal with errors in production and keep your users on side

Photo by Kris Mikael Krister on Unsplash

Nobody likes apps that crash or stop working properly. Handling and recovering from errors is obviously an important task for any developer; we should not assume that everything will run smoothly.

In this post we’re talking about what to do on top of your regular error handling — the last resort.

Ionic and Unhandled Errors

Ionic’s production error handling is, well, lacking. An unhandled exception or promise rejection in your JS code leaves your application in an undefined state. It may still look ok, but your users will experience very strange behaviour and errors that simply don’t make sense.

Implement an ErrorHandler

The best way to implement last-resort error handling in Ionic and Angular is to implement your own ErrorHandler class.

Angular will automatically call handleError whenever an exception is thrown.

Hooking up the custom error handler to Angular simply requires providing it at boot time. You probably want to keep Ionic’s default error handler in development, and switch the error handler in for production.

What should we do?

The exact requirements will depend on your application, but a good starting point is to pop up an alert to the user, apologising, and asking them to reload the app. We also pop up the Ionic splash screen while the app is reloading.

Reloading the app is drastic, but remember this is a last resort, on top of our regular error handling.

Log to a 3rd party service

Handling the error is only the first step in the process. What we really want is to fix the error. There’s no need to wait for your user to complain — we can log the error to a 3rd party service. You’ll get a much nicer error report, with a stack trace and logs, making finding and fixing the error much easier.

For this example we’re going to log to Rollbar*, but there are lots of other services available. You could even write your own.

Angular Rollbar

For this example we’ll use angular-rollbar to simplify the process. First up we’ll add the module to our project:

Next up we’ll set up the RollbarService to be injected into our ErrorHandler and and log the error.

Now our error will be logged for future debugging, and we’ve presented an error to the user. They probably still aren’t happy about the error, but at least you’re honest with them.

Conclusion

We can now catch unhandled errors in production, log them to a 3rd party service, and notify the user that something’s gone wrong. The app will restart and will never be left in an undefined state. This is a last resort, and should compliment proper, fine grained error handling, but is an absolute must for production apps.

*I have no vested interest or relationship with Rollbar, but we do use their service from time to time.

Originally published at www.nextfaze.com.

Smart developers for smart ideas

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Michael Marner

Michael Marner

CTO @ CareApp. Augmented Reality PhD. Community radio volunteer

More from Medium

What is the difference between React and Angular?

Angular Best Practices — 2022

Angular

Angular & Google Analytics — The Complete Guide

Optimizing lodash size using Typescript compiler plugin

Lodash and Typescript logo pun