BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News JavaScript Error Recorder Lets Users Report Bugs in Browser

JavaScript Error Recorder Lets Users Report Bugs in Browser

Bookmarks

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
Style

BT