Over a million developers have joined DZone.

Using Errorception with PhoneGap

DZone's Guide to

Using Errorception with PhoneGap

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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];

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

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.

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}