This document discusses Usersnap, a bug reporting tool for AngularJS applications. It allows users to automatically attach screenshots to bug reports directly from within the app. The tool includes a console recorder that records console logs, errors, and XHR requests to provide developers with necessary context to reproduce and fix reported issues. It works by wrapping Angular to properly log events. The recorder provides a time machine-like view of the console at the time of the bug.

1. BUG REPORTING TIME MACHINE FOR ANGULARJS
Vienna AngularJS | 2014-11-04 | Josef Trauner –jt@usersnap.com

2. WhatisUsersnap?
Automatically attach a Screenshot to every bug report?

3. The solution
Directly In-App/In-Site Bug reporting where the bug occurs.

4. USERSNAP DASHBOARD
WRITTEN IN ANGULARJS

5. Usersnap Dashboard
•Why Angular?
•old Codebase:
–Combination of jQuery
–jQuery plugins
–Grown code structure
–„no“ Architecture
–methods were simply added

6. Usersnap Dashboard
•UI was ugly:

7. Usersnap Dashboard
•What we are using:
–angular-ui/ui-router
–ngbp/ngbp (ng-boilerplate)
–UI/CSS: Boostrap (less)
–Some jQuery Plugins (wrapped into directives)

8. BUT THERE IS STILL SOMETHING MISSING
USERSNAP CONSOLE RECORDER

9. Console Recorder
•aka. Time Machine
•A screenshot is great + contains a lot of information
•Mostly happens in complex applications
•What happens if:
–Ajax call failed
–JavaScript errors happen
–User experiences only a wrong UI

10. •Now you get super power
•Record all console log/warn/error
•XHR Requests

11. Same view as you have it in your browser

12. DEMO TIME
QUICK EXAMPLE HOW IT WORKS

13. Usersnap + Angular
•Example: Without Angular
•Angular + Usersnap
–Out of the box: leads to wrong logging!
–Use our AngularJS wrapper
•https://github.com/usersnap/public/

14. DEMO TIME 2
CONSOLE RECORDER + ANGULARJS

15. Summary/Limitations
•Benefits during development
–Non Tech savy users can report bugs
–Way easier to reproduce issues
•Limitations:
–Usersnap will be loaded async

16. QUESTIONS
I TRY TO ANSWER EVERYTHING ;-)

17. JOSEF TRAUNER
@josef_trauner
CO –Founder / Product
jt@usersnap.com
Image credits: photopin.com