Application Performance Monitoring with the Crittercism Cordova Plugin

By Mehfuz Hossain and Stephen Forte

As hybrid mobile apps scale to massive amounts of users and tremendous amount of data, developers need to monitor and trace the app’s performance. Crittercism is the world's first mobile application performance management (mAPM) solution, offering both error monitoring and service monitoring solutions. The Crittercism service monitors every aspect of mobile app performance, allowing Developers and IT Operations to deliver high performing, highly reliable, highly available mobile apps.

To enable the real-time app monitoring features that Crittercism provides in a hybrid app, you need to create your account and register the app you wish to monitor. In my case, it's the demo app that is used to log various events based on user actions.

Next step is to install the plugin in your hybrid mobile application. The easiest way to do so is via Telerik Plugins Marketplace. This will create the demo app under your Telerik account as you click the “Try Plugin in AppBuilder” button.

It is also required that you keep a note of the API_KEY from the settings page in Crittercism portal page that you will need to copy in the plugin variables list dialog (within Telerik AppBuilder), or set it using variable switch in the CLI (Command Line Interface) as you install the plugin.

Crittercism provides quite a number of operations to log various behavioral aspects of your app. It be could be an event due to a button click or an exception as the user tries to access specific parts of your app. Not only are all of these data are logged in real-time, but Crittercism also tells you the inside story about what could have possibly gone wrong.

In my case, the demo app looks like this:

This basically associates various user triggered events. In the plugin Crittercism is a window level variable which is available after the Cordova deviceready event.

To know if an user navigates to a specific page, I can leave a breadcrumb like shown above or can log crash bugs that is internally sent to Crittercism service using window.onerror event:

As I head over to the online portal, I get details that is essential for monitoring app health and tweak features based on real user engagement which is also known as A/B testing.

Moreover, I can further add notes for the team about a bug, drill down to stack trace or even create issues at github which makes it an awesome tool in tracking, monitoring and performing defects management under one umbrella.

In this post, I have shown steps to configure Crittercism in your hybrid mobile application and quickly gone through the features that could save hours of painful debugging and increase adoption of your app based on various metrics and metadata that you collect from the service.