 So like how many of the like how is how your assets are hosted like they are in the same domain as the So like how is it for is hosted on like the same domain or it's apart from the other domain like some CDN servers Okay, so there's a like the problem itself is like when you are when your code is hosted on Partly the CDN like something the domain or different protocol or different like sub domain So the problem is like when you try to catch exceptions The problem the browser doesn't allow to give doesn't give proper information of an exception and normally the exception catching in JavaScript works. There's a window dot on error listener Which is which give you all the information so with window on the only problem is like It's it's the as well as evolved like people are moving to minified code and Moving to CDNs to host their JavaScript and the static assets. So it's becoming the window dot on Like what the window that honor is like a waste like it's not good enough for Like knowing what's going wrong in the website on the JavaScript applications So the so here like the biggest problem is the digital security reasons browser doesn't Give you enough information. It gives you a script error if you some might might have like So like The three things are window on load on the game says line number the collect the column number and the file name So and there are message. So like If you are on if the if yours the code brakes is hosted on some other region the browser doesn't give the even the file name file name and it give the file name It doesn't give the error message and doesn't give the line number. So So the problem Let me So the problem is again the when you are working with hard or cross-origin scripts and the script that hosted on anything That's not the same as the current host or current origin. So In during that time you didn't get proper information. So how to get that information to your How to collect the proper information? So first So the first strategy you can use is are you the all the third-party scripts that all the cross-origin scripts You can fetch from your or you have hosted a proxy at your own server Or you copy paste that code in your own server and then fetch from your own same origin So you can easily get collect information This is a hack not a good way to do things and it probably doesn't work with third-party plugins or third-party scripts because sometimes these plugins also load much more code and It's it might not be good approaches for like you are you're trying to use jQuery from other domains Like Google hosting or other things. So this is a pretty tricky thing, but it might work for some people But it's not a good solution. So other good solution is wrap the whole if your code is your hosted on third-party CDN You have the right access to the code one thing you can do is wrap that code inside try catch the whole code inside try catch so when you're doing that the try catch thing is like Whenever anything breaks in that code so the the catch will the as it is wrapped inside the try catch thing It the catch loop will accept Handle the exception catch the exception even before the window error got it. So you have Location where you can extract information the exception catch by the try catch thing you can do anything you want with it It doesn't have to be the cross origin problem doesn't come there It's a one step before the window error got it so like you can extract all kind of information and use it to report to any way you want it to be and But the problem comes with this kind again is if you are working with jquery hosted on a CDN or some other Anything you don't have the right access to so this again the so here comes the third solution. So the third third solution is Try to wrap the objects like let's say you have a jquery object. We loaded it and now jquery has many APIs every API has every API I meant from a payment the function jquery dot Let's say CSS jquery dot any function. So what normally what happens is we have to interact We normally use these APIs API interfaces Make calls and get our data. So if you want to track exceptions in this files So mostly the interfaces lock install some try catching mechanism on the interfaces of these APIs So when you give a send a call to it if anything breaks you you can the interfaces having try catch installed in them You can easily get the whole you can catch the exception even cut off before the window or honor get it So that this is a simple thing. So for how to do that. So a simple try catch wrapper a simple so like The way we do it like this is an example. So let's say this is the human object It has some properties and some methods so and As you can see what there's this this is project or track human These are the this is the track API. I have implemented for my like for my product right now So this is nothing else it do it it follow all the functions and install all the APIs of that object It goes through all the APIs of that object and install a try catch on every function And so now with anything breaks someone call this API if anything breaks in that process it the catch that The oldest the all the exception is handle a catch at that place and reported immediately. So you don't have to like rewrite the code like this is a small line of code you add after your code You don't have to modify anything. It just had that just work like flawlessly with your existing code base without touching anything Is so in this way you can catch the exact problem You get the exact information like which line number even the stack trace you can all you can extract all all all sort of information That is available As same as your same origin browsers like same origin scripts. So this is this is the thing. I'm talking about this is this is all about like Tracking with the third-party scripts So even you see see the script error kind of a problem So you don't don't face if you are to use these three techniques like you will easily get away with the script error problem So that's all any questions like so it's useful stuff Yes So like the Like Most of the time it's adding a one more front-end like adding a more gateway kind of thing in front of every API So that anything before the API is called that gateway is called But when I see Like Yeah, exactly you can do that Yes, but when you are No, no, it's it's it works But when your users are using your code You like the debug it is not on and you how do you want to catch errors at that point of time? It's kind of a production environment. I'm talking about not the development environment. So actually I'm talking about the end interfaces most like Brady's even jQuery has 2030 interfaces something like that. So even as big like a very as jQuery doesn't have much interfaces like internal code You don't have to wrap only the Interfaces or even the system interfaces anything like the user is interacting with or the API is interacting with the like the DOM API is Or some browser API wrap those interfaces and you are good to go with most of the things Actually can Mostly the even handling part are done by some of the browser native Some people you set time out Intervals or even some other window ready. So you can easily wrap this functions Like it may not be a direct way using the crack a page that I mentioned But it's easy to wrap this functions or even someone using this API like even I did the wrapping around Setting the lens and time out with easy and most like you get most of the In that case you still need to know what obvious are being embedded by that So mostly if you're using the third party API right so they mostly have one or two global objects not more than that mostly All you have to do take an object browse through all the functions just a for loop through all the functions and install that Rapper on that all the functions that that are the immediate functions of that particular object So you don't have to know exactly what's going like is there? Simple follow through that and it's a one-time thing You're talking invasive right? It's a one-time thing it do install one time and that's done Like it's nothing happens after that only some exception broke out then then it will do something so it's it's a like a Small like it's not something memory intensive or something not not not not of that kind But it's useful enough to provide much more information that that's not This gives me a hint on Jastrp source maps if you have heard the source maps How is it different from the source map has nothing to do what I've just mentioned the source maps What exactly source map is all about if you have a minified code you can see that code That means I can we can be from the domain. Yes, exactly. Exactly. You can show us map is when you're developing right? You need a development environment that is where source maps coming I'm talking about specifically the production environment you code in code is in no one is going to open your console And no users are getting some other you clicks a button something breaks So how source map isn't help you there? So smash comes in the part like you get the exception you get the minified stack trace Now if you have you generating your source maps for your minified code You can use that source map to extract a renapped that whole Minified stack trace the original source files source maps comes later part not in the back scenario Yes, so the easy part there's a small hack like there's a you can Wrap everything the whole code inside the function and call that function inside right there that function is optimized So one function call is not not the whole code but just the yes, yes, just the part in text where it's written try cats that Yes, yes Thank you very much So last but not least He's going to introduce you guys to death mirror Okay