Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Using Errorception with PhoneGap

DZone's Guide to

Using Errorception with PhoneGap

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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:

(function(_,e,rr,s){_errs=[s];var c=_.onerror;_.onerror=function(){var a=arguments;_errs.push(a);
c&&c.apply(this,a)};var b=function(){var c=e.createElement(rr),b=e.getElementsByTagName(rr)[0];
c.src="//beacon.errorception.com/"+s+".js";c.async=!0;b.parentNode.insertBefore(c,b)};
_.addEventListener?_.addEventListener("load",b,!1):_.attachEvent("onload",b)})
(window,document,"script","51b2cbdbbc99c00b1700025a");

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:

c=_.onerror;_.onerror=function(){var a=arguments;_errs.push(a);
c&&c.apply(this,a)};var b=function(){var
c=e.createElement(rr),b=e.getElementsByTagName(rr)[0];
c.src="http://beacon.errorception.com/"+s+".js";c.async=!0;b.parentNode.insertBefore(c,b)};
_.addEventListener?_.addEventListener("load",b,!1):_.attachEvent("onload",b)})
(window,document,"script","51b2cbdbbc99c00b1700025a");  

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.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}