Monitor Your Ionic Application With Microsoft Application Insights
Application Insights tells you about your app's performance and usage. You can get data about how many users you have, which pages are most popular, how fast pages load, whether they throw exceptions, and more.
Application Insights is definitely a master piece of Azure application monitoring. You can track everything with almost no effort and you have a 100% control over the data sent.
Let's see how to use it within a Ionic application.
Ionic integration
Ionic is a mobile framework for developing native (and progressive) web apps using, among other things, Apache Cordova for native interactions, Angular for SPA development and optionaly Webpack for module bundling.
As for any production application, we must be able to monitor it well with the aim of detecting issues like unhandled exceptions, poor performances or custom errors. Because we use Ionic, we also use JavaScript (or Typescript) as the main application language, so we also must use a monitoring system which is JavaScript compliant.
Not really a big deal thanks to the Microsoft Application Insights SDK for JavaScript.
The details provided by the documentation to host the Application Insight JS SDK is not great, as some part are missing to be able to use it well with Ionic.
So here is what I have done to make it work with my Ionic application.
1 - SDK Installation
- Download the Application Insights SDK JS script here (ai.js).
- Copy it to your project to a location dedicated to third party scripts.
2 - (Optional) Webpack Shimming
If you use Webpack, you will face a little problem. Indeed, this SDK does not export any module but it exposes rather a global variable, so it cannot be used directly with Webpack.
Fortunately, Webpack comes with a concept to deal with this kind of problem: Shimming.
Shimming is what makes Webpack work with files whose module format is not supported or does not exist at all.
Here is how it works with Webpack 1 (see this link to see how to do it with Webpack v2):
let Microsoft = require('exports?Microsoft!RELATIVE_PATH_TO/ai.js');
Thus, we ask Webpack to export a global variable Microsoft defined into the file ai.js. It represents the root of the Application Insights JS SDK.
If you do not use Webpack, you can just link the file ai.js and use the global variable.
3 - Initialization
You can now connect your application to Application Insights.
You first need an existing Application Insights resource, here is how to create a new one and get its Instrumentation Key.
Then we have to initialize the SDK with this information (as described in the documentation):
var snippet = {
config: {
instrumentationKey: [INSTRUMENTATION_KEY]
}
};
var init = new Microsoft.ApplicationInsights.Initialization(snippet);
var appInsights = init.loadAppInsights();
4 - Track information
Everything is all right now to track any kind of information. Here is for instance how to track an exception:
try {
// ... some code raises an exception
} catch (ex) {
appInsights.trackException(ex);
}
and here is how to monitor your app usage (to be called on each page view):
appInsights.trackPageView();
Conclusion
Job done! You have now the right tool to monitor your Ionic application in the good way :)
It is important to note that this monitoring configuration process is also available for any other JS-based mobile framework (appcelerator, cordova, etc.).
If you want more information about the Application Insights JS SDK, please take a look at the FAQ
Hope your futur troubleshooting sessions will be easier ;)
