Logging JavaScript errors in an Apache Cordova or PhoneGap App

Apache Cordova apps are simply JavaScript applications embedded in a WebView and published to an Apple iOS or Google Android application.

Because they are just JavaScript, it is very easy to implement ErrLog.IO

Application Structure

At Kutamo, we typically use Adobe PhoneGap to construct and build our Cordova applications. The file structure for these is almost identical to other implementations of Cordova.

Apache Cordova File Structure

The index.html file is the basis for the application, and ErrLog.IO is inserted in the file as it would for any traditional web site.

<!DOCTYPE html>
<html>
    <head>
        
    </head>
    <body>

        <script type="text/javascript" src="cordova.js"></script>

        <!-- ErrLog.IO -->
        <script async src="https://relay.errlog.io/js/v1?apikey=[Your-api-key]"></script>
    </body>
</html>

Application Security Policy - Content-Security-Policy

Cordova applications use a meta-tag called Content-Security-Policyto define security policies for the application itself, and specifically what domains and resources the application is able to access.

Content-Security-Policy support is a native browser capability that allows you to control exactly what content your app can access and at a very granular level. In fact, when using the CSP, you can generally keep the access origin to "*" as you'll be able to more tightly control security using the policy.

A Content-Security-Policy is applied at a page level through a few different mechanisms, but for Cordova apps you typically use a meta tag.

To enable your Cordova application to communicate with ErrLog.IO, you just need to add our URL to the script-src component of the meta tag.

Example:

<meta http-equiv="Content-Security-Policy" 
    content="...your security policies... 
    script-src 'self' 'unsafe-inline' 'unsafe-eval' https://relay.errlog.io/ ">

Microsoft have a comprehensive guide on the policy tags here


 

Discuss this article