Twitter: raymondcamden


Address: Lafayette, LA, USA

Using Errorception with PhoneGap

06-13-2013 6,596 views Mobile, Development 20 Comments

I thought I had blogged about Errorception before, but unless my search engine skills are failing me I must not have ever gotten around to it. Errorception is a service that aggregates and reports on client-side errors on your web site. By placing a simple embed in your HTML code, all errors will be sent off to their service for your perusal. When I first tested this service, I remember thinking, glibly, that I hope I'd get enough data points to make it worthwhile to demonstrate. I mean, my blog runs well, I never see any errors myself, so I just kinda assumed everything was good. Heh.

I logged in to the Errorception portal after a week and discovered that there were a huge amount of errors reported. Obviously my blog "worked", and most of these bugs were not preventing people from using my site, but I really had no idea what was going on and Errorception provided a wealth of data. Here are some screen shots from those reports. (Note that the screenshots are from last year.)

First - the general list of issues:

Then a drill down:

And yet another drill down:

Errorception is not a free service, but the pricing model seems rather fair to me and as I said - I can bet you've got more issues than you think you do.

So what about PhoneGap? When I tried to use the Errorception code snippet with PhoneGap, I noted that the error reporting didn't work. I got in contact with the Errorception team and Rakesh Pai was able to figure out the issue.

Here is the original snippet:

Rakesh noticed this:

It turns out, the problem you faced is indeed trivial, fortunately. The tracking snippet Errorception gives you is protocol-relative, so as to make it work on HTTP and HTTPS. However, on phonegap, the protocol for the 'index.html' page is file://, and so the tracking snippet fails to load (404).

The fix is simple: it's to modify the snippet to load the beacon from a hard-coded http/https protocol

Here is his modified snippet:

That worked! I fired up both my iOS simulator and my Android simulator and as soon as I forced my error they showed up immediately in the console.

Notice that the error is reported differently in iOS versus Android.

20 Comments

  • Tim Meade #
    Commented on 06-13-2013 at 7:17 AM
    Nice post, I've not heard of them. We are testing with airbrake.io which appears to be similar. Have you compared the two?
  • Tim Meade #
    Commented on 06-13-2013 at 7:22 AM
    Looks to be a good pair actually. Airbrake for CF errors and Errorception for JS. Very complimentary! Setting it up today.
  • Commented on 06-13-2013 at 8:27 AM
    Nope, I have yet to use airbrake.io.
  • Commented on 06-13-2013 at 8:36 AM
    Very cool. I used Hoth for error tracking on my phonegap application. Its free and 100% cfml. Here is the javascript code to log errors to Hoth:
    https://github.com/aarongreenlee/Hoth/tree/Bleedin...
  • Commented on 06-13-2013 at 9:11 AM
    I knew about Hoth, but didn't know it supported client-side code. Cool.
  • Commented on 06-19-2013 at 10:09 AM
    i dont know how is communicate to you. thats why i choose this way,,   

    im new to jquery mobile phonegap. i have developed the simple app with get the server response through the getJSON in Eclipse. My app get the response only in below 3.2 versions. not above 3.2 versions.But the app is run, only JSON response will not trigger.

    i hope you will help me. Thank you in advance..........!
  • Commented on 06-19-2013 at 10:32 AM
    Have you done any debugging? For example, are you sure you are still even triggering the ajax call?
  • Commented on 06-19-2013 at 12:14 PM
    yeah, its work properly and i got the response from the server in below 3.2 versions. still it doesn't get the proper response from server in 3.2 above versions.in that the failure function alert message displayed.
  • Commented on 06-19-2013 at 12:15 PM
    So what's the failure message?
  • Commented on 06-19-2013 at 12:40 PM
    i mean fail handler alert. This is my json method.
    $.getJSON('url', function(result) {
    .........coding..........
    })
    .fail(function() {
           alert( "Error in send request" ); });


    my logcat message is: I/Choreographer(775): Skipped 42 frames! The application may be doing too much work on its main thread.
  • Commented on 06-19-2013 at 2:52 PM
    Try adding 'e' as an argument to fail and alerting it.
  • xavier #
    Commented on 07-04-2013 at 12:43 AM
    Not able to access the network in my phonegap app. i tried on iPhone and iPad. Only the device ready alerts fires. Any idea what is going on? config.xml has <feature name="http://api.phonegap.com/1.0/network"; /> and <access origin="*" />

    Here is my index.html:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">   
          <meta http-equiv="Content-type" content="text/html; charset=utf-8">
          <title>Network testing</title>
          
          <script src="phonegap.js"></script>

    <script>
             document.addEventListener("deviceready", onDeviceReady, false);
             
             function onDeviceReady() {
                alert("device is ready");
                navigator.network.isReachable("phonegap.com", reachableCallback, {});
             }
          
             // Check network status
             function reachableCallback(reachability) {
                alert("checking Connection");
                // There is no consistency on the format of reachability
                var networkState = reachability.code || reachability;
                var states = {};
                states[NetworkStatus.NOT_REACHABLE] = 'No network connection';
                states[NetworkStatus.REACHABLE_VIA_CARRIER_DATA_NETWORK] = 'Carrier data connection';
                states[NetworkStatus.REACHABLE_VIA_WIFI_NETWORK] = 'WiFi connection';
                alert('Connection type: ' + states[networkState]);
             }
          </script>
       </head>

    <body>
    <div>
             <p>Expecting alerts with the network connection status</p>
          </div>
    </body>
    </html>
  • Commented on 07-04-2013 at 9:58 AM
    According to the docs, this is not supported:

    navigator.network.isReachable
  • xavier #
    Commented on 07-04-2013 at 10:50 AM
    The code was from the docs (http://docs.phonegap.com/en/0.9.6/phonegap_network...). i just used that to show an example so someone else can try. The app does not connect to anything on the internet including jQuery CDN. i am able to browse to our data service on our server with Safari on the same phone. The iPhone is using beta IOS 7 but tried on other devices also (iPad, Android phone) with the same results. Any settings in the app that i am missing?
  • Commented on 07-04-2013 at 11:13 AM
    That is a very old version of PhoneGap. You need to be using the latest version. Also, PhoneGap isn't officially supported on iOS 7 yet.
  • Neil Pugh #
    Commented on 07-25-2013 at 4:42 AM
    There's a couple of errors on this page Ray

    - The "View Raw" links in the code snippets go to Page Not Found.
    - The modified snippet code example is missing part of the opening line of code.
  • Neil Pugh #
    Commented on 07-25-2013 at 5:20 AM
    It works nicely in my web browser when I hardcoded the protocol to "http". It doesn't play ball though on my devices. I whitelisted the domain and I am running PhoneGap 2.9 and I tested on Android 2.2 and Android 4.1. I get an ErrorCeption error message when running in Android 2.2:
    http://errorception.com/projects/56eff822db2bef205...: Line 1 : Posted 0 errors to errorception.com

    I get no message at from Android 4.1

    What version of PhoneGap and Android did you test with Ray?
  • Neil Pugh #
    Commented on 07-25-2013 at 5:27 AM
    I should also add that I placed the javascript include as the first js file pulled in, even before phonegap etc...
  • Commented on 07-25-2013 at 6:20 AM
    "View Raw" - looks to be a bug w/ Gists. I'll try to raise it with Github. I modified the second snippet to be complete, thanks.

    As for your error - well I tested with iOS only, but the dev I worked w/ at Errorception he tested it on a couple of platforms. I'll ping him.
  • Neil Pugh #
    Commented on 07-30-2013 at 4:11 AM
    Hey, thank Ray :)

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty