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