141104 usersnap angular js_jt
TRANSCRIPT
BUG REPORTING TIME MACHINE FOR ANGULARJS
Vienna AngularJS | 2014-11-04 | Josef Trauner – [email protected]
What is Usersnap?Automatically attach a Screenshot to every bug report?
The solution
Directly In-App/In-Site Bug reporting where the bug occurs.
USERSNAP DASHBOARD
WRITTEN IN ANGULARJS
Usersnap Dashboard
• Why Angular?• old Codebase:
– Combination of jQuery– jQuery plugins– Grown code structure– „no“ Architecture– methods were simply added
Usersnap Dashboard
• UI was ugly:
Usersnap Dashboard
• What we are using:– angular-ui/ui-router– ngbp/ngbp (ng-boilerplate)– UI/CSS: Boostrap (less)– Some jQuery Plugins (wrapped into directives)
BUT THERE IS STILL SOMETHING MISSING
USERSNAP CONSOLE RECORDER
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
• Now you get super power• Record all console log/warn/error• XHR Requests
Same view as you have it in your browser
DEMO TIME
QUICK EXAMPLE HOW IT WORKS
Usersnap + Angular
• Example: Without Angular• Angular + Usersnap
– Out of the box: leads to wrong logging!– Use our AngularJS wrapper
• https://github.com/usersnap/public/
DEMO TIME 2
CONSOLE RECORDER + ANGULARJS
Summary/Limitations
• Benefits during development– Non Tech savy users can report bugs– Way easier to reproduce issues
• Limitations:– Usersnap will be loaded async
QUESTIONS
I TRY TO ANSWER EVERYTHING ;-)
