Adding App Intelligence Tools: Apteligent for Windows 10 App Development

In an effort to expand their user base and brand, developers are deploying on more devices and more platforms every day. This can expose more issues in your apps and more complexity in resolving them. More platforms, more devices, more users, more issues. It comes with the territory.

Navigating this complexity is where Apteligent (formerly Crittercism) app intelligence tools can help save the day.

In this tutorial, we retrofit an existing UWP 10 app with Apteligent to show you how these tools can help deploy and maintain a compelling user experience on any device or platform. You can discover and debug crashes and handled exceptions, verify network performance and API issues, and monitor user flows with the Apteligent library and just a few lines of code.

This tutorial is based on HTML/Javascript, but if you’d like instructions for integrating with apps using other coding languages, check out the Apteligent documentation.

Project setup

First, you’ll need to add the Apteligent SDK to your project and initialize it. We don’t want to dynamically load the library, so we’ll grab the JavaScript and store it locally. The library can be found here, and we’ll put it in our app’s js/ directory as CritterLib.js.

Next, reference the JS file from index.html by placing the following code in the of the HTML.

Finally, we want the SDK to be initialized once the app is loaded. WinJS has a callback we can utilize, so add the following code within the closure in the js/main.js file:

    WinJS.Application.onready = function() {
        Crittercism.init({
            appId: 'appId', // Example: 47cc67093475061e3d95369d
            appVersion: '1.0' // Developer-provided application version
        });
    };

Fill in the appId with your own account key, which you can get for free by signing up and creating an app https://app.crittercism.com/signup.

Note: It’s important to fill in a proper appID here, otherwise your app will crash on startup.

Now your app is set up with the Apteligent library, which provides a great deal of functionality right out of the box.

Error monitoring

At its core, Apteligent is a premier error monitoring tool for mobile apps. Uncaught exceptions are monitored and logged automatically, and it provides you with detailed information on the state of the device when the event took place. Stack traces, operating system version, device model, network status, and other attributes are automatically logged in order to help you determine the cause of the issue. This is all provided by the Apteligent SDK without changing any code.

If you want to see how this works, add the following snippet somewhere in the main.js file where it will be executed:

JSON.parse(“this isnt valid json”);

It will raise an uncaught exception, and the error will be discovered by Apteligent and available in your Apteligent dashboard in real-time.

It’s up to you to avoid these errors, and sometimes try/catch blocks are used to catch an exception. In this case, even though it’s handled in the code (keeping the app from failing entirely), your user’s experience may suffer. Apteligent provides handled exceptions for this very reason. It can be implemented as shown here:

	try {
	  JSON.parse('this isnt valid json');
	} catch(e) {
	  Crittercism.logHandledException(e);
	}

By adding a single line of code to your caught exceptions, you can better understand non-fatal issues within your app to ensure a great user experience.

Monitor user flows

It’s helpful to see a stack trace and other device information, but sometimes you need more information to properly replicate or debug an issue. The ability to understand exactly what the user was doing in the moments leading up to the issue can help immensely when trying to resolve it.

Bits  of code that look like this can be added to the app:

Crittercism.leaveBreadcrumb("User added a location: " + location.name);

These breadcrumbs are displayed in chronological order within the Apteligent portal within the crash report and are customizable for your app’s needs. You can add as many breadcrumbs as you wish—the more you add, the better insight you’ll have into the context of the issue.

Completing the support cycle

Apteligent isn’t just a tool for developers. There are also features created specifically to help out support and management teams.

Imagine a scenario where a user attempts to pay for goods within the app but an error occurs and they lose their purchase. If the user contacts support, they can look up their user flows to see exactly what went wrong. This can be done with Apteligent by adding metadata to each installation.

In our app, we are associating a username with a particular install as shown:

Crittercism.setUsername("user1234");

The username can be any identifier useful to your team and can be set and overwritten at any time. We set this data on the app’s startup in main.js:WinJS.Application.onready

If you’re looking to store more flexible data, you can attach a JSON object that can be accessed from within the Apteligent portal. For example, if we want to be able to see locations that the user is viewing, which we can do with the following method call:

// Set metadata using a JSON object
Crittercism.setMetadata({
   locations : locationArray
	});

This metadata is write-only, i.e. it’s not usable for syncing preferences or any 2-way data communication. However, it is a quick and easy way to understand more context about your users as you work to debug their issues.

Wrapping up

Enabling Apteligent in your published Windows app can give you added confidence that your app is performing as it should on every device. When issues arise, as they always do, you’ll have a better understanding of why they happened and how to resolve them.