recordo

Why?

Creating useful bug reports should be dead-simple.

Normal people don't open a debugging console when testing. They just "do stuff and then it breaks". This records the stuff they did and what they said/got from the server to help when filing bugs. It does everything except push the Report an Issue button for them.

Demo it in action here (note the little [[##]] in the bottom-right)

How?

1. Add ?collect=true to the end of any URL to start collecting a replay log.
2. (...do stuff until you find a bug...)
3. Click the Copy button in the bottom-right corner of the page to copy the log (plus your browser info) to your clipboard.
4. Create a ticket in your issue tracker and paste the log

Control Panel

When you hover over the [[23]] (number of messages recorded), the control panel opens up:

What are the buttons for?

• X Stop all the logging and instrumentation
• Clear clear the log (if you are starting a new test)
• Copy copy the log and ✨ Browser Info ✨ to the clipboard (and eventually the exact manifest/config of the server)

For Developer Folks

Something like the following will then be on your clipboard which you can paste into the ticket tracker of your choice (it also contains the request/response JSON with the server):

current_url: 'http://philschatz.com/gh-board/'
current_window: [800, 600],
browser: {os: "MacIntel", userAgent: "Mozilla/5.0..."},
log: [
  ["USER:CLICK", "div.collapse.navbar-collapse"]
  ["XHR:START", "GET", "/api/tasks/226"]
  ["XHR:LOAD",  "GET", "/api/tasks/226", 200, {"id":...}]   // <-- request query and POST body
  ["USER:CLICK", "button.async-button.continue[type='button']>span", "Continue"]
  ["HISTORY:URL", "/courses/3/tasks/226/steps/2/"]   // <-- user going to a different page
  ["XHR:START", "GET", "/api/steps/3653"]
  ["XHR:LOAD", "GET", "/api/steps/3653", 200, "<p>some HTML</p>"] // <-- response HTML
  ["USER:CLICK", "div.answer-letter"]
  ["HISTORY:POP", "/courses/3/tasks/226/steps/1/"]   // <-- clicked browser back button
  ["UNCAUGHT", "data is undefined", "index.js", 1000, 10]  // <-- uncaught JS errors
  ["HISTORY:UNLOAD"]    //  <-- Either refresh was clicked or the user went to another page
  ["WINDOW:SIZE", 800, 600]  //  <-- user resized the window
  ["CONSOLE:LOG", "Some message", 4, [1, true]]
]

Does it work on ??? browser/OS?

Since it's part of the webpage it will. You'll be creating bug reports on mobile devices in no time!

Install

1. npm install --save recordo
2. Add the Javascript file

• For simple sites:
  1. add <script src="node_modules/recordo/dist/recordo.js"></script>
  2. call window.__Recordo.initialize(); __Recordo.start()
• For browserify projects:
  • add require('recordo').initialize() to the code
  • if you do not want the code in production, wrap it in "production" !== process.env.NODE_ENV and pass that env variable in a way that Uglify can optimize it out

1. Add the CSS file

• For LessCSS: add @import (inline) '~recordo/recordo.css';

Development

1. run npm start
2. point your browser to http://localhost:8080

TODO:

• Log all console messages
• Log window resizes
• wrap window.Error because you shouldn't be constructing errors unless you're throwing them