Ionic Integration

Ionic makes it incredibly easy to build beautiful and interactive mobile apps using HTML5 and AngularJS. You need a powerful monitoring tool to diagnose and debug when things goes awry. Atatus integrates into Ionic with just a few lines of code.

Track exceptions in Ionic apps

If you are loading atatus script from our CDN, then you have to use full URL instead of protocol-relative URL.

<script src="https://dmc1acwvwny3.cloudfront.net/atatus.js"></script>
<script type="text/javascript"> atatus.config('YOUR_API_KEY').install(); </script>

Since Ionic frameworks built on AngularJS framework, you have to follow Angular integration documentation.

Clean file URL in error stacktrace

Many mobile applications being written in JavaScript within containers such as Apache Cordova, Ionic, PhoneGap etc.. So you may find that error stacktraces contain file paths which are different across platforms and devices. Using onBeforeErrorSend method, you can rewrite file's URLs before the error is reported back to Atatus.

This will make the stacktraces more easily readable.

atatus.onBeforeErrorSend(function (payload) {
    var backTraces = payload.backTraces;
    for(var i = 0 ; i < backTraces.length; i++) {
        var backTrace = backTraces[i];
        var filename = backTrace.f;
        var indexOfJsRoot = filename.indexOf("/www/");
        if (indexOfJsRoot !== -1) {
          backTrace.f = filename.substring(indexOfJsRoot);
        }
    }
    return true;
});

Lets say, an error occurring on file path in Ionic Framework

file:///private/var/mobile/Containers/Bundle/Application/D99DDCCC-9D37-4E12-96E5-093C771BA080/MyApp.app/www/js/app.js

It will be reported to Atatus as follows

/www/js/app.js
Using Source Maps

If you uploaded the source maps for JavaScript files, then you have to append corresponding domain name before the path. Lets say, you have uploaded a source map for a script file https://www.acme.com/www/js/app.min.js, then your code should look like

atatus.onBeforeErrorSend(function (payload) {
    var backTraces = payload.backTraces;
    for(var i = 0 ; i < backTraces.length; i++) {
        var backTrace = backTraces[i];
        var filename = backTrace.f;
        var indexOfJsRoot = filename.indexOf("/www/");
        if (indexOfJsRoot !== -1) {
          // Append a domain name in the file
          backTrace.f = 'https://www.acme.com' +  filename.substring(indexOfJsRoot);
        }
    }
    return true;
});

Lets say, an error occurring on file path in Ionic Framework

file:///private/var/mobile/Containers/Bundle/Application/D99DDCCC-9D37-4E12-96E5-093C771BA080/MyApp.app/www/js/app.js

It will be reported to Atatus as https://www.acme.com/www/js/app.min.js and the corresponding uploaded source map will be fetched and processed.

Document Sections