Track JavaScript errors in PhoneGap hybrid mobile apps

Vaishnavi -

Everybody hates errors – whether it’s in a PhoneGap app or another framework. Unfortunately, errors are something we can’t neglect. We must track and handle errors in-spite of the testing that our app would have gone through.

Atatus makes this easy by receiving every exception that your PhoneGap hybrid mobile app throws, and captures the timline of the actions that triggers the specific error, such as what was the input from the user and what the user clicked.

Let’s fix this!

  1. If you haven’t signed up Atatus yet, try out the free 14 day trial – no credit card required.
  2. Create a project for your PhoneGap hybrid mobile app in Atatus.
  3. Copy and Paste the provided Atatus script in head tag of the main HTML page.
<script src="https://dmc1acwvwny3.cloudfront.net/atatus.js"></script>
<script type="text/javascript"> atatus.config('YOUR_API_KEY').install(); </script>

We recommend you to place the script in the HEAD of the HTML document. You could also place the scripts in the footer or load asynchronously, but in the case of Atatus we want to load it in the HEAD synchronously so we can catch any potential onload or inline JavaScript errors.

Error Handling

By placing the above snippet in your HTML code, all errors will be sent off to atatus service for your perusal. Now you can start seeing your JS errors in Atatus.

Sending custom data

Atatus provides an option to pass custom data information along with the exception. You can technically pass any data you want as the custom data by replacing the atatus.notify call:

atatus.notify(exception, { name: "John Doe" });

Clean file path in error stacktrace

For many mobile applications being written in JavaScript within PhoneGap, you may find that error stacktraces contain file paths which are different across platforms and devices. These file paths are very hard to read. Atatus provides a way to make a very clean file paths in stacktraces. Using onBeforeErrorSend method, you can rewrite file’s URLs before the error is reported back to Atatus.

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 occuring on file path in PhoneGap Framework

file:///var/mobile/Applications/E2368016-CD36-4F87-98C7-E464EFA451EB/MyApp.app/www/js/app.js

It will be reported to Atatus as follows

/www/js/app.js

Ready to get Atatus?

Atatus makes error tracking easier on your live PhoneGap applications with little effort along with user interactions that lead to the error. Try out the free 14 day trial – no credit card required. If you have any questions, we’d love to hear from you.