Examples for the Usersnap Console Recorder

The Usersnap Console Recorder is a tool to record every front end error (XHR traces, JavaScript exceptions, ...) and send it together with an annotated screenshot to the developer of the site.

This page contains some examples to see the full power of this technique!

1. Setup

Sign up for Usersnap, create an example project and edit this file and copy your project API key.

Paste the key into the markup of this page (Fork this repository or download a ZIP archive).
Don't forget to enable the console recorder feature for this key.

  var APIKEY = '12345678-9012-3456-7890-1234567890123';

2. Open up the developer console of your browser

You can do this by pressing F12, Ctrl+Shift+J (or Cmd+Alt+J), or via the menu. You probably already know how to do this ;-)

3. Click on the buttons to raise different kind of console errors

Feel free to fire up the debugger to see what's happening here in detail.

Login - login with object logging and internal server error
cart cart parsing
clicky 1 - Accessing a property of an undefined object
clicky 2 - Calling a method of an undefined object
clicky 3 - Throwing an execption
clicky 4 - 404 on XHR
clicky 5 - Cross-Origin on XHR
clicky 6 - Parse Error

4. Click on the Usersnap Feedback button to send a report

Open the new report in the Usersnap Dashboard and see all console log messages!

5. Add it to all your web projects

... and spread the word if you like it:
Tweet