SlideShare a Scribd company logo
1 of 17
Download to read offline
BUG REPORTING TIME MACHINE FOR ANGULARJS 
Vienna AngularJS | 2014-11-04 | Josef Trauner –jt@usersnap.com
WhatisUsersnap? 
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

More Related Content

What's hot

SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...
SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...
SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...
Sébastien Levert
 
SharePoint Fest DC - SharePoint Framework, Angular and Azure Functions
SharePoint Fest DC - SharePoint Framework, Angular and Azure FunctionsSharePoint Fest DC - SharePoint Framework, Angular and Azure Functions
SharePoint Fest DC - SharePoint Framework, Angular and Azure Functions
Sébastien Levert
 
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...
Sébastien Levert
 
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
Sébastien Levert
 

What's hot (20)

Velocity building a performance lab for mobile apps in a day - final
Velocity   building a performance lab for mobile apps in a day - finalVelocity   building a performance lab for mobile apps in a day - final
Velocity building a performance lab for mobile apps in a day - final
 
TelerikNEXT What's new in UI for ASP.NET AJAX
TelerikNEXT What's new in UI for ASP.NET AJAXTelerikNEXT What's new in UI for ASP.NET AJAX
TelerikNEXT What's new in UI for ASP.NET AJAX
 
Putting the 'ctions' in Azure Fun-ctions
Putting the 'ctions' in Azure Fun-ctionsPutting the 'ctions' in Azure Fun-ctions
Putting the 'ctions' in Azure Fun-ctions
 
Serverless by examples and case studies
Serverless by examples and case studiesServerless by examples and case studies
Serverless by examples and case studies
 
Fast track to higher productivity with online Kanban boards
Fast track to higher productivity with online Kanban boardsFast track to higher productivity with online Kanban boards
Fast track to higher productivity with online Kanban boards
 
Going Serverless with AWS Lambda, Google Cloud Functions and more
Going Serverless with AWS Lambda, Google Cloud Functions and moreGoing Serverless with AWS Lambda, Google Cloud Functions and more
Going Serverless with AWS Lambda, Google Cloud Functions and more
 
SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...
SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...
SharePoint Saturday Vancouver - SharePoint Framework, Angular and Azure Funct...
 
Save time, save money: Move your selenium testing on cloud
Save time, save money: Move your selenium testing on cloudSave time, save money: Move your selenium testing on cloud
Save time, save money: Move your selenium testing on cloud
 
A Lap around ASP.NET 5 - VConf
A Lap around ASP.NET 5 - VConfA Lap around ASP.NET 5 - VConf
A Lap around ASP.NET 5 - VConf
 
SharePoint Fest DC - SharePoint Framework, Angular and Azure Functions
SharePoint Fest DC - SharePoint Framework, Angular and Azure FunctionsSharePoint Fest DC - SharePoint Framework, Angular and Azure Functions
SharePoint Fest DC - SharePoint Framework, Angular and Azure Functions
 
Pain Free Frontend Development
Pain Free Frontend DevelopmentPain Free Frontend Development
Pain Free Frontend Development
 
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...
SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...
 
Increase automation to rest
Increase automation to restIncrease automation to rest
Increase automation to rest
 
Selenium Based Visual Test Automation
Selenium Based Visual Test AutomationSelenium Based Visual Test Automation
Selenium Based Visual Test Automation
 
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
SharePoint Saturday Twin Cities - SharePoint Framework, Angular & Azure Funct...
 
Office space presentation
Office space presentationOffice space presentation
Office space presentation
 
BuildStatus - PiterJS #1
BuildStatus - PiterJS #1BuildStatus - PiterJS #1
BuildStatus - PiterJS #1
 
Hangout: Novidades do Xamarin
Hangout: Novidades do XamarinHangout: Novidades do Xamarin
Hangout: Novidades do Xamarin
 
Bhuvi ppt zerobug
Bhuvi ppt zerobugBhuvi ppt zerobug
Bhuvi ppt zerobug
 
Visual Automation Framework via Screenshot Comparison
Visual Automation Framework via Screenshot ComparisonVisual Automation Framework via Screenshot Comparison
Visual Automation Framework via Screenshot Comparison
 

Similar to Bug Reporting Time Machine for AngularJS

European Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure FunctionsEuropean Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure Functions
Sébastien Levert
 
North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...
North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...
North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...
Sébastien Levert
 
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
Sébastien Levert
 

Similar to Bug Reporting Time Machine for AngularJS (20)

Angular Meetup 1 - Angular Basics and Workshop
Angular Meetup 1 - Angular Basics and WorkshopAngular Meetup 1 - Angular Basics and Workshop
Angular Meetup 1 - Angular Basics and Workshop
 
Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3Angular JS 2_0 BCS CTO_in_Res V3
Angular JS 2_0 BCS CTO_in_Res V3
 
Angular Universal
Angular UniversalAngular Universal
Angular Universal
 
Making Angular2 lean and Fast
Making Angular2 lean and FastMaking Angular2 lean and Fast
Making Angular2 lean and Fast
 
[143]Inside fuse deview 2016
[143]Inside fuse   deview 2016[143]Inside fuse   deview 2016
[143]Inside fuse deview 2016
 
European Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure FunctionsEuropean Collaboration Summit - SharePoint Framework Angular & Azure Functions
European Collaboration Summit - SharePoint Framework Angular & Azure Functions
 
North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...
North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...
North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...
 
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...
 
ITB2015 - Crash Course in Ionic + AngularJS
ITB2015 - Crash Course in Ionic + AngularJSITB2015 - Crash Course in Ionic + AngularJS
ITB2015 - Crash Course in Ionic + AngularJS
 
Debugging your Way through .NET with Visual Studio 2015
Debugging your Way through .NET with Visual Studio 2015Debugging your Way through .NET with Visual Studio 2015
Debugging your Way through .NET with Visual Studio 2015
 
Mvvm knockout vs angular
Mvvm knockout vs angularMvvm knockout vs angular
Mvvm knockout vs angular
 
Mobile Applications with Angular 4 and Ionic 3
Mobile Applications with Angular 4 and Ionic 3Mobile Applications with Angular 4 and Ionic 3
Mobile Applications with Angular 4 and Ionic 3
 
Measuring Performance / iOS Apps
Measuring Performance / iOS AppsMeasuring Performance / iOS Apps
Measuring Performance / iOS Apps
 
Getting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLIGetting Started with the Angular 2 CLI
Getting Started with the Angular 2 CLI
 
DCAST Meetup - Washington, DC Feb 2016
DCAST Meetup - Washington, DC Feb 2016DCAST Meetup - Washington, DC Feb 2016
DCAST Meetup - Washington, DC Feb 2016
 
Automated Exploratory Testing
Automated Exploratory TestingAutomated Exploratory Testing
Automated Exploratory Testing
 
Introduction aux progressive web apps
Introduction aux progressive web appsIntroduction aux progressive web apps
Introduction aux progressive web apps
 
Justin Ison
Justin IsonJustin Ison
Justin Ison
 
Angular2.0@Shanghai0319
Angular2.0@Shanghai0319Angular2.0@Shanghai0319
Angular2.0@Shanghai0319
 
Developing For Nokia Asha Devices
Developing For Nokia Asha DevicesDeveloping For Nokia Asha Devices
Developing For Nokia Asha Devices
 

More from Usersnap

141104 usersnap angular js_jt
141104 usersnap angular js_jt141104 usersnap angular js_jt
141104 usersnap angular js_jt
Usersnap
 
What is Usersnap
What is UsersnapWhat is Usersnap
What is Usersnap
Usersnap
 

More from Usersnap (17)

Why your voice of customer program should guide your product development
Why your voice of customer program should guide your product developmentWhy your voice of customer program should guide your product development
Why your voice of customer program should guide your product development
 
Docker as a Multitool: DevOps with Docker at Azure Bootcamp Linz 2017
Docker as a Multitool: DevOps with Docker at Azure Bootcamp Linz 2017Docker as a Multitool: DevOps with Docker at Azure Bootcamp Linz 2017
Docker as a Multitool: DevOps with Docker at Azure Bootcamp Linz 2017
 
What is Usersnap? An Introduction to bug tracking.
What is Usersnap? An Introduction to bug tracking.What is Usersnap? An Introduction to bug tracking.
What is Usersnap? An Introduction to bug tracking.
 
Tools Berlin Power Workshop: Wie visuelle Kommunikation Kundenservice & Bug T...
Tools Berlin Power Workshop: Wie visuelle Kommunikation Kundenservice & Bug T...Tools Berlin Power Workshop: Wie visuelle Kommunikation Kundenservice & Bug T...
Tools Berlin Power Workshop: Wie visuelle Kommunikation Kundenservice & Bug T...
 
Kundenservice 1x1 für Start-ups - Convo Coworking - Tag der offenen Türe
Kundenservice 1x1 für Start-ups - Convo Coworking - Tag der offenen TüreKundenservice 1x1 für Start-ups - Convo Coworking - Tag der offenen Türe
Kundenservice 1x1 für Start-ups - Convo Coworking - Tag der offenen Türe
 
Wie effizientes Bug Tracking Ihre Conversion-Rates verbessert
Wie effizientes Bug Tracking Ihre Conversion-Rates verbessertWie effizientes Bug Tracking Ihre Conversion-Rates verbessert
Wie effizientes Bug Tracking Ihre Conversion-Rates verbessert
 
5 Types of USER ACCEPTANCE TESTING (UAT)
5 Types of USER ACCEPTANCE TESTING (UAT)5 Types of USER ACCEPTANCE TESTING (UAT)
5 Types of USER ACCEPTANCE TESTING (UAT)
 
Fundamentals On Building A Reliable Cloud Infrastructure For Your SaaS Business
Fundamentals On Building A Reliable Cloud Infrastructure For Your SaaS BusinessFundamentals On Building A Reliable Cloud Infrastructure For Your SaaS Business
Fundamentals On Building A Reliable Cloud Infrastructure For Your SaaS Business
 
Mobile First: How To Approach Mobile Testing!
Mobile First: How To Approach Mobile Testing!Mobile First: How To Approach Mobile Testing!
Mobile First: How To Approach Mobile Testing!
 
5 Essential Tips For Improving Your Website Mockups & Prototypes!
5 Essential Tips For Improving Your Website Mockups & Prototypes!5 Essential Tips For Improving Your Website Mockups & Prototypes!
5 Essential Tips For Improving Your Website Mockups & Prototypes!
 
A Best Of 100+ Marketing Experiments at Usersnap - Startup Marketing Get-Toge...
A Best Of 100+ Marketing Experiments at Usersnap - Startup Marketing Get-Toge...A Best Of 100+ Marketing Experiments at Usersnap - Startup Marketing Get-Toge...
A Best Of 100+ Marketing Experiments at Usersnap - Startup Marketing Get-Toge...
 
20+ fantastic web development newsletters for developers & designers
20+ fantastic web development newsletters for developers & designers20+ fantastic web development newsletters for developers & designers
20+ fantastic web development newsletters for developers & designers
 
23 Amazing Lessons Learned From Interviewing The World's Top Developers!
23 Amazing Lessons Learned From Interviewing The World's Top Developers!23 Amazing Lessons Learned From Interviewing The World's Top Developers!
23 Amazing Lessons Learned From Interviewing The World's Top Developers!
 
An Overview of User Acceptance Testing (UAT)
An Overview of User Acceptance Testing (UAT)An Overview of User Acceptance Testing (UAT)
An Overview of User Acceptance Testing (UAT)
 
141104 usersnap angular js_jt
141104 usersnap angular js_jt141104 usersnap angular js_jt
141104 usersnap angular js_jt
 
Usersnap and the javascript magic behind the scenes - ViennaJS
Usersnap and the javascript magic behind the scenes - ViennaJSUsersnap and the javascript magic behind the scenes - ViennaJS
Usersnap and the javascript magic behind the scenes - ViennaJS
 
What is Usersnap
What is UsersnapWhat is Usersnap
What is Usersnap
 

Recently uploaded

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 

Bug Reporting Time Machine for AngularJS