On this episode I discuss JavaScript error tracking with Todd Gardner. More specifically we talk about:

  • The JavaScript Error Object
  • The DOM Global Error Handler
  • How errors bubble
  • How errors bubble through callbacks
  • Example of wrapping callbacks

To subscribe to the podcast, please use the links below:

Click Here to Subscribe via iTunes
Click Here to Subscribe via RSS (non-iTunes feed)

Show Notes:


Code from Todd’s Traces of Errors talk


Full Transcript

Will be available soon.

The post JavaScript Error Tracking with Todd Gardner | Episode 12 appeared first on Funny Ant.

United States


00:00:00on this episode I discuss JavaScript air tracking with Todd Gardner welcome to the front end developer cast the podcast that helps developers be awesome at building ambitious web applications with your JavaScript ninja or you're just getting started on your hoes Craig mckeachie
00:00:28Hi everyone my interview today is with Todd Gardner about JavaScript error tracking more specifically we talked about the dumb Global air handler however is bubble the JavaScript object all kinds of good low-level air handling stuff in JavaScript so don't miss this one check it out tell us a little bit about yourself so I am a developer and founder I guess from the Minneapolis area I started a company called track Jazz along with a few of my co-founders and White Rock Jazz does is it say JavaScript error tracking service for modern web applications freelance consultant for a number of years and I built a number of of large single page applications for startups and and other Freelancers and Enterprise clients
00:01:28every project that would build I would always you know you looking for a better way to get feedback from when we actually would release are app how do we know if the customers is having a good experience when something bad happens how do we understand what happened and how to fix it inside builds simple air tracking tools several times starting at the basics of just attaching like in Ajax post to the window on air which is a terrible idea for a lot of reasons and I log it's whatever my login make it is a jack post I posted the server and I ever recorded the bad idea will the first is that you just don't get a lot of information that information you get on window on there is at worst you just get something like he is undefined Scripps Jazz line one which tells you nothing at all
00:02:28new browsers you actually get the air itself along with the stack Trace unfortunately JavaScript is not really strong at air tracking right air handling by itself and so the stack Trace that you get is not all that insightful because it only includes the things that happened since the last event happened so I can see that it does air happen in response to this click Handler but I don't know what bone that click Handler how many callbacks nested I am so out of context worse than that in fact something that I did to myself as if you just do something real simple of you know post all the messages that come to window on error I did not serviced a lot of my own equipment doing that where I'll release a bit of code that you know maybe is not the greatest and has a lot of errors in it and those areas were hit that air and point really really really fast if you have an application a good scale that you're trying to be more professional and one of many problems
00:03:27throttling and how do you handle that level of air intake clarifies a little bit so you saying the air object just unfolding that back a little bit that air object really isn't consistent across the browser so that that right there is probably worse than the pain of you I don't think I want to live through that pain and try to figure that out right by but it's still pretty terrible so in most languages like in in c-sharp or python or whatever the definition of error or exception is standard is like this is what the exception is this is what it looks like these are the fields on at this is the shape of what it looks like so you can tell a certainty like when you have an exception object you could parse it you could do analytics on it you can shove it into a report that's great but when the air object in JavaScript every browser has implemented in slightly different ways in the format of stacked race is different in even the latest versions of chrome fire
00:04:27Roxanne and Internet Explorer saying that blob of text that comes out as part is a stack Trace like a one browser might have different characters that the limit the values like the line numbers and so forth from another one next Senate they measure which line certain things happen in different ways when it comes to Anonymous functions and so you'll get fundamentally different data based on which browser the air came from and see one of the things that track fast does we have to normalize that we compare the air object itself versus One browser came from and tell and give you a more consistent view of a we think these two things are probably the same era but this came from this one came from I-10 in this one came from Safari six right thing when you talked about the subject line with call backs to the server I imagine you basically I'm imagining I think I've seen this before supper in the most recent versions of chrome where you use kind of maintain a stack Trace inside a chrome by
00:05:27checking that extra box but let's say you make an Ajax call to the server what I'm remembering is when they text call comes back basically the whole stack Trace before that is lost if you have like a buttcheek or Ajax call can you put some logic in the success call back if that logic fail for whatever reason the stack Trace that will contain your success call back and then some jQuery Google but it won't actually contain the code that initiated the Ajax call or anything before that which is kind of makes it hard to debug because what we use developers wood would expect from other languages is show me all of the things that are X coming back to like origination back to like when this this whole application that start in Chelmsford won't tell us that it only tells us back to the last asynchronous event now Chrome has been doing some amazing things and why you were listening to before is the latest version of Chrome Dev tools gives you this thing called your racing stack
00:06:28which arm you check this little box and basically it will give you at a time this this debug stack where you can look back across these asynchronous boundaries back in the time and see all the way back to origination not super cool but what what we've been working on the Trashy asses how do we get that information that deep stack Trace in production and not just in Chrome because it's not all that valuable I mean it's important to be able to debug that when you're developing it but I want to know I want to have that context when a real customer runs into the problem and so we actually launch to feature a few months ago but we bind time Stacks where will tell you some of that information is not quite as good as Chrome OS Chrome debugger tools yet because we have some limitations based on performance but will tell you it will give you a stack trace of Javier happened and it will give you the stack trace of how that function came to be bound is a call back original interesting that they can see how that would be helpful
00:07:28Speedo by the developers what's this podcast on your client site stack look like you have dependencies on you know any library that I said I could probably wouldn't tell the client but but no talk to me with that little bit on we don't take any dependencies you don't need to be using jQuery you don't need to be using anything with taking a lot of time to make sure that our library is very small and very cross-compatible my believe it is about 6 kg zipped to include in your page and really changes nothing at all the simplest way to install track Jesse's you just dropped her script on your page just like you would drop like Google analytics on your page and you don't have to change anything about what you're doing we wrap a lot of the base level browser API and can detect errors and other interest in contacts elements bubbling out of the browser and give you that that context are service light is a couple of different Technologies Warehouse on Microsoft Azure which is been absolutely amazing for us were part of the best there Bismarck program which is been really really cool our server side is
00:08:28renan mostly. Net are persistence is an elastic search elasticsearch is not a technology I just can't say enough good things about they have been amazing and been able to do so much great things to deep in elasticsearch but you can actually use it as a persistence back in his and I wasn't like it's not very traditional Enterprise shops will use elasticsearch is a projection of other data so they'll have a regular relational database or another no sequel store and no projected out into elastic search for periodic like searching indexing work we use it a little bit differently evolve into at one point we were storing our air data in your storage Stables which is a built-in no sequel kind of storage mechanism in Azure but we could report off of that we're kind of following the the known to mention patterns and we are saving to azure-storage-tables and then projecting into elasticsearch about
00:09:283 * 1. Oh version and they introduce the concept called back up where I can take my elasticsearch and I can push a copy of what's an elastic search right now. Into flat files elsewhere so we push that out into the Amazon S3 but that was the critical point for us we're like you know what we don't need to store this anywhere else we don't do anything with it you may as well just or all of our air date in elasticsearch real frequently so that we can recover from it let's just leave it there that's what we've been doing for at least the last year and it's been working really well for us so all error persistence is done in elasticsearch was great so what it what does it look like in terms of like a user interface like if I'm going to what is DFC me of some sort of dashboard you know what is can you describe what that looks like for someone who installed our script for the developer Focus thing and we had a little script that you put on on to your web application and then a JavaScript API we give you off of there where you can customize the kinds of errors that we give you
00:10:28are they that you want to collect and gather different kinds of specialty information so that's at the developer level the air date it comes back to our Central give you a dashboard UI that gives you some high-level reports about how you're doing how many errors are coming in how is that changing over time and what are the most relevant things we think you should focus on right now and then you can dig in on any particular Aaron give you a tremendous amount of context about it so an air that we capture will give you the air object itself and that deep stack Trace that I talk to you about before but the thing that I think make stretchy is really amazing is we give you this thing called the Telemetry timeline which is we capture all these other interesting events that are happening in your in your JavaScript application like for example we wrap up console law and track that is important context to tell me about how your application status change it we capture information but with the user's is in putting him in what these are clicking on and what kind of Ajax events are happening so that we can recreate a set of steps to set of events
00:11:27happened in your application such as hey your your application printed this console message in the user enters 16-character email address and then click the button and then the stage accident wood off and that's what triggered this error so we can give you that contacts to recreate the problem where you have Richard debugging tools that's very useful I'm trying to imagine though the client-side API it sounds like you just install script in and you're good to go except for some configuration basically some you able from the client to say these are the kind can you elaborate a little bit more on that as we don't want a whole lot of set of time with track Jazz so if you all up all you do is just take our script and put on your page we start capturing tons of great information right there there if you want to change what gets captured or capture more different information we give you this really rich API where will allow you to turn on or off different features of our tracking like if you don't want to capture the console for whatever reason you can turn that off
00:12:27if you only want to capture certain kinds of console messages you can continue that is awesome what I called our power tool it's a on error call back that we let you specify about to capture an air will send this back to you and said hey here's a pelo that I'm about to send it contains all of our information all of the Telemetry all of the chachere's information all of your other job is Rick libraries everything we know about the air and we let allow you to either to manipulate that payload you can add more contacts to your own values to it you could remove things that you don't think Irrelevant in or noise or you could say you know what I don't care about the third party plugins that I don't want to deal with it so I'm going to just reject all of them I will give you all of those capabilities to worry about
00:13:14great great kid I'm sure you've had to implement this at tons of different clients who are using all kinds of different piano Frameworks from angular 2 backbone to Amber and so forth I'd like to hear some War Stories were from from clients and realize that's interesting I'm at the very low-level into the browser and so it doesn't matter what framework you use you could be building just to Jake rap or backbone or Ember angular reactor a really anything and we'll work underneath of it just fine that said each of these Frameworks have made some implementation decisions about how they want to handle errors emanating from their Frameworks and so we have some extensions that you can build in like if you want to if you're building a backbone application on in our documentation we give you a snippet of code that you can add to add extra instrumentation to Backbone or capture errors out of anger by default that they're kind of ugly because angular
00:14:14disposes of the angular stack Trace is just part of the error message not as a separate stack Trace property which is kind of gross and so by using our adapter will automatically transform that into a better format for you it's okay using it one of these Frameworks you want to plug track Chase under it it will totally work without any configuration but we give you some pre setup snippets on how to do it as far as you understand that angular point you made there I didn't quite hear you saying it'll basically outputs you repeat that the next option is thrown as part of executing some piece of angular code angular itself will catch it and it will generate its own stack Trace based on the ioc container that is built in and see what things of executor so builds the stack Trace but by default the error that emanates outside of angular that stack Trace isn't populated in the air stack Trace property it's as popular as part of the error message
00:15:14Tracy's really really long error messages that many hundreds of characters long and kind of hard to reason about once you see them in the UI around the angular exception Handler which is part of their docs out how you can plug into this where we take it we reformat it and shove it into the truck has air handler so you can capture the point about some of the other Frameworks me the number of the different framework different successes and failures with each of them I'm actually really partial the backbone still and I know it's not the new hotness but I feel like backbone is really
00:15:56it's really simple and powerful and what you can do and it gives you a lot of opportunities to shoot yourself in the foot but if you want to build something and you don't want to follow like some larger architectural pattern you can use it to add a lot of organization to your co-pays I use Backbone in a lot of non single page application if I want to build some JavaScript I don't necessarily like the the jake brake you know call back organization model if I have a reasonable amount of jobs for texting on a non single-page-application I might still use backbone just to like keep my thoughts in order about how things are happening
00:16:31angular I found um I've been on a couple of big at your projects and I found it I am immensely productive and getting to the first release of an anchor app but I have found the maintenance is very very complex the any other versions change very frequently and there's a lot of breaking changes I found and so I go back to code that I wrote six months ago or a year ago it's very hard to wrap my mind around what I was doing and how they like extend it so I seen maintenance like ongoing maintenance getting to release two is kind of a problem with angular
00:17:07Amber I've only had one small experience with Ember I like the constraints that it puts on you and I think that would be very powerful for Consulting shops that needs produce a lot of single page application just don't want to use a pattern and just keep going I'm uncertain about the maintainability for me maintenance of applications is more important than the original development I think we over prioritize collectively as web developers how easy it is to get something out the door I think it's much more important to understand how easy it is it to maintain it and debug it personal opinion is I think the web is worse today than it was 3 years ago and I think JavaScript is take a lot of blame for that we built a lot of applications that use JavaScript totally unnecessarily to render pictures and content
00:17:53when we don't really need to I go to a website I'll click on the link and I'll take me to somebody's blogger or somebody's like a new site and the site is is basically just delivering me text but it's so many images are so many little pieces of Jabez Herbie conspired off that there's noticeable Jang cuz I'm trying to like scroll through it on my phone Nexus 5 so I can should be able to handle Bridal text on a page I feel like I scroll through it the phone is jerky as hell and I can't do it I'm like why are we why are we doing this to ourselves this is this is a terrible experience for delivering the basic content of the web sites in there I think there's two more people get to hear other other people's experiences you know that the more they can appreciate some of that you know pro and con balances in in in all these Frameworks in so I was like to hear him at least
00:18:51yo can you think of anything else you want to tell the listeners before we sign off I really appreciate you doing the interview today I've been enjoying it so try is a bootstrap startup myself and I have three co-founders Eric brandes Nick Pelton and Jordan Griffin and we've been working on this for depending on when you start measuring it for about 18 months and this has been an amazing experience for her for us all and I've learned a tremendous amount about software development the business of software development off of the whole thing we support a 30-day free trial so if you're building a web app I'd love for you to go out to track gs.com and and get us a try and if we can't fix a bug for you I'd love to know why if we can fix a bug for you I'd love to talk about it but so feel free to reach out to me if you're listening Todd at track jazz.com great thanks for thank you
00:19:51thanks for listening to the front end developer podcast please subscribe to the podcast by going to the iTunes Store on your phone or desktop then searching for front end for prss like going to Front End cast. Com we also find show notes the full transcript of each episode you can also sign up for my free angularjs backbone and Ember crash course all them solve the same problem so why not learn them together see you next time

Transcribed by algorithms. Report Errata
Disclaimer: The podcast and artwork embedded on this page are from Craig McKeachie, which is the property of its owner and not affiliated with or endorsed by Listen Notes, Inc.


Thank you for helping to keep the podcast database up to date.