BT

JavaScript Error Recorder Lets Users Report Bugs in Browser

| by James Chesters Follow 2 Followers on Aug 19, 2014. Estimated reading time: 2 minutes |

Bogomil Shopov and Robert Nyman have announced the Usersnap Console Recorder, a suite that allows for visual annotated communication (via screenshots) for web projects.

Because end users are less technical and less experienced with bug trackers, Usersnap aims to make reporting easier by giving users the ability to report bugs visually, directly in the browser. The console does this by recording JavaScript errors, giving the person in charge of fixing bugs any information required, including console.log information, and meta information. 

In the article JavaScript Error- and XHR Log Recording With Every Bug Report, Shopov says:

Every error / log contains a NTP synced timestamp, a full stack including JavaScript source files and line numbers and formatting like the developer console you already know from Firebug.

Every debug log issued by console.log, console.info, console.warn or console.error gets properly formatted (including recursive object/array formatting and browsing).

Shopov continues with an example:

A fixed element should be aligned by another element by using the top property during scrolling. However, due to a markup rework, the element #inexistent no longer exists. This leads to offset() returning null and the property top can no longer be accessed:

function clicky() { 
   console.info("Accessing a property of an undefined object");
   console.log("calculating scroll top %d", $('#inexistent').offset().top); 
};

The Usersnap Console Recorder's JavaScript log appears as below:

Usersnap Console Recorder

The reaction from the JavaScript community to the console has, in places, been mixed. On Reddit, in the discussion Usersnap - the holy grail of bug reporting, user workaholicanonymous was enthusiastic, saying:

I was literally just thinking about developing something that does this earlier this morning. Seriously - thank you.

Elsewhere on Reddit, in the discussion Superpowers for Web Developers. A good Friday read! some users were a little unclear on what advantages Usersnap's console offered. User X1R0n commented:

You can also achieve this with Google Analytics: http://davidwalsh.name/track-errors-google-analytics. For free.

Gregor Dorfbauer, co-founder of Usersnap, replied in disagreement, saying:

That's really not comparable. The Google Analytics solution just collects random JavaScript errors and XHRs of jQuery.

You can't see the whole session of the user and don't even think of "seeing in the past" like you would open the developer console on the browser of your user. Together with a full screenshot of the browser, it's really easy to reproduce and fix the issue.

Others had concerns about the privacy implications. User codepsycho said

I wouldn't use it myself; I work on projects surrounded by NDAs (so the fact that Usersnap stores all screenshots isn't ideal)

Shopov told InfoQ in response:

We do store the screenshots on our servers, but they are well protected. We send them also via secure channels to integration partners such as Trello, Kanbanize, Basecamp and even to a custom service, if the client requires it. We can assure you that nobody but the client will see the screenshots and data.

The client can also request to delete all screens at any time: we respect our clients’ and visitors privacy.

Usersnap have an open relationship with the open source community, and provide free licenses for open source projects. Shopov says the Usersnap team would also love to get feedback from InfoQ users on how Usersnap can make their life easier and their work more effective, while having fun.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss
BT