BUG REPORTING TIME MACHINE FOR ANGULARJS

Vienna AngularJS | 2014-11-04 | Josef Trauner – jt@usersnap.com

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 ;-)

JOSEF TRAUNER

@josef_trauner

CO – Founder / Product

jt@usersnap.com

Image credits: photopin.com