How to Log Better in Your Ionic App With ngx-logger

We have all used the good old console.log many times before, but when you are serious about building a big app especially in the enterprise context logging is more important than ever.

In this Quick Win we will use super simple yet powerful way to improve the logging inside our Ionic app with the nxg-logger package. With this package the logs in our app will look like in the image below in no time!

ionic-ngx-logger

Setup the App & Logger

To get started we create a blank new Ionic 4 app and install the package for our logger, so go ahead with:

Are you ready to start learning?

Join the Ionic Academy

Now the logger initialisation needs some information and we could directly insert them, but if you are already concerned about your app you might want to have that configuration in the appropriate place which is the environment.

Therefore, open the standard environment in src/environments/environment.ts and add the logging information block:

With this information we have now set the default logging level and also the level at which logs should be send to a server. For this I’ve added a server URL for remote logging, but more on that at the end of this Quick Win.

Keep in mind that you could now as well have a different logging configuration for your production environment and easily switch between those two by passing the --prod flag to your build!

The final step is to pass this information to the logger package, so open your app/app.module.ts and import and initialise the logger like this:

That’s all for the setup, now we can use it wherever we want!

Using the Log Levels

To test the different functionalities let’s add a bunch of buttons to the view inside app/home/home.page.html like this:

Alright, that should be enough.

Now we can implement the function for our buttons which basically calls the different functions on the logger package. These functions will have a different appearance inside the log of your console as you’ve seen in the beginning, so simply add the function like this to your app/home/home.page.ts:

Wherever you want to use the logger you can now inject the service through the constructor and use the unified interface across all your pages and services!

Remote Logging

As you’ve seen we also set a remote URL where logs should be send to:

Normally you would have your own server that accepts the logs, in this case I simply created a domain on Beeceptor and created a rule for the POST route like you can see in the image.

beeceptor-rules

We have also defined at which level the logs of our app should be used for the remote logging:

That means only error and above will be send, the rest is just a local standard log. You can create your own domain or use your existing API as the endpoint for the logger package and whenever you click the button for the error log (or whatever level you defined for the server) a log will be send that looks like this:

This is an awesome starting point for some great remote logging which is easy to add, but because our code is minified and we don’t have the sourcemaps at hand we can’t really track down those issues.

A service like Ionic Pro offers these kind of functions and even more, you can find out how to use remote logging inside the Ionic Pro course here!

You can also find a video version of this Quick Win below.

Tweet
Reddit
+1
Share
Email