Live Coding Workshop to Setup Rollbar Error Monitoring

Thank you very much, and good day, everybody from wherever you're joining today. So this will be a live coding workshop. So I've added a couple of links for you today to follow. There's a GitHub repo, The Dev Factory, that's my GitHub. In there is the Vue TS demo, which is really what we're going to be ending up with. So that's the end product. But you can have that open to follow along. The second link is also in the repository. It is the PDF of the actual workshop, step by step, that we'll be running through. Now, this is really a beginner's step. It's more about setting up Rollbar, but we'll be using a Vue TypeScript application. So really beginner level, we just want to get the application up and running and get Rollbar installed as well. But feel free to use that PDF to go ahead and view the steps. The last link is at rollbar.com forward slash error push slash promo. When we get to the step to register your Rollbar account, please use that hyperlink. The reason for that is it does get you a $250 credit to your account for one year. So you can go ahead and use either Rollbar free account, or if you want to use a paid account, or even want to get this for your company, that gets you a nice little discount as well to get going on this product. So hopefully that helps get you started for the session.

Now, so what are we going to do today? So the first thing is we'll be running through a couple of steps. The step zero is we'll be creating a view TypeScript project. So that will be our first step. Then we'll be creating that Rollbar account with that hyperlink I gave you, the error push slash promo. Then we'll be integrating this application, so your application with Rollbar. Then we'll be sending a handled and unhandled error to Rollbar. And then at the end, we'll be looking at some ways to customize your payload and how you can instrument Rollbar in different ways for your application to get more relevant and more additional data into the system as well.

All right. So that will be what we'll be doing today. All right. So if you have the PDF open, I can put that to the side. For most of you, hopefully you're on a Mac or Windows machine, so it might be slightly different. I'm doing it on a Mac today. If you're doing it on a Windows machine, I do have a Windows machine next to me as well, so we can go ahead and run that as well. So if you do have a PDF open, you can go to the first step.

So what we're going to do first is we're going to go ahead and create a brand new Vue project. So for those of you it's npm create vue-at-latest. So if you start this command in your terminal window or command line on Windows, we'll go ahead and start the process to create our first project over here. Now what we'll get when we do this is we've got to give our project a name. Now, you can pick any name you really want. I'm going to go ahead and do the vue-ts-rollbar-demo. So a Vue TypeScript rollbar demo application. Next, do you want to do JavaScript or TypeScript? Now we're going to do TypeScript today, rollbar does work perfectly well with JavaScript. In fact, we're going to use the rollbar JavaScript SDK, in fact, to instrument this application. But again, for this example, today, we'll be using TypeScript. We're going to add JSX support as well. And yes, we want a single page application. Just say yes to all of these items. We won't be using all of them. But again, if you want to add some testing, you can as well. I'm just going to go ahead and do all of this. And you should end up with a screen like this.

Now what should have happened in the background over here, if we go to my computer, is we should have a brand new application created. If we go into my specific application over here, you see the Vue TS rollbar demo. Hopefully everybody has been able to go ahead and use that command line to go ahead and create that. And we'll just go up again. It is npm create vue at latest. I'm using the latest version of Vue over here. And of course, we're going to use Vite for TypeScript. So hopefully, you've got this up and running. Now, very important is the directory or folders we're working on, you need to read and write permission to them. So make sure you got your permissions all good there. I'm just going to go ahead and go into this specific folder right there. So there, we should have everything we want. Beautiful. All right. So if you're having a problem, let me know. But hopefully, everybody got over this one. This is pretty easy. The only thing that might be a problem is if you don't have some of the libraries installed.

So I'll give everybody a second. And let's just have a look at the Discord channel. If anybody's having a problem at the moment, do let me know. Let's see. All good so far. I see some cameras on, some not. Hopefully, everybody is doing perfectly all right. Beautiful.

All right. So we'll be going on to the next step. So go ahead and run npm install once you are in your new projects directory. So npm install. We're going to go ahead and make sure everything is installed. That needs to be installed. Now, this should go pretty quickly, so it shouldn't take too long. Beautiful. All running. And again, depending on your computer and your connection, this shouldn't take too long to go ahead and run. Okay, beautiful.

So we've run that. You should end up with something looking a bit like this. So it takes about 30-odd seconds or so. So that's the first thing we need to run. Now, once you've done this, we're going to go ahead and run npm run-format. And again, we're just following the steps provided by this specific Vue project. And then finally, if that worked for you, go ahead and run npm run-dev. And what should... Oops, and if I can do that right, npm run-dev. Our application should be starting up. And if we open up a browser over here, we should have our brand new application functioning. So you should end up with an application that looks a bit like this. So I'm just going to have it open to the side here. So hopefully everybody is having their application running. It is all working. And if you have a problem, let me know. Again, if you have any problems, make sure you've got read-write permission to the directory where this was created. That will be important. And if you run it, it should open up on potentially a different port. Mine is 5173 on my computer. It will be different for Windows, and it might be different for your computer, depending on what you're doing. So for those of you following along on the PDF in the repository, we're really completing step 0, 0.8 in fact is where we are right now. You'll see a little green checkmark next to it, which is where you should be. So what we want to go ahead and do now is, I'm going to go ahead and open up my editor. In this case, I'm going to open up Visual Studio Code. So we'll go ahead and open up that folder. Mine's located under projects, Vue TS Robot Demo, and we can go ahead and open that right up. Now, if you want to quit your project, just press ''Q'' there and you can go ahead and that'll stop the web server from running. As you can go ahead and just press the ''Q'' on your keyboard. Now, what is very important next before we go on over here, is the set of things we'll be doing next. So I want to give everybody a quick moment if you need a coffee break or you need to do something else.

If you need to catch up, you can go ahead and do that. What I'll do is I'll bring up the next set of steps we'll be doing shortly. Everybody make sure you've got a fresh cup of coffee as we're getting this open and then we'll go to the next one over here.

Everybody should have your Vue TypeScript project created, that's step 0. Hopefully you have a fresh cup of coffee and we're ready to go. The next step, what we want to do is that URL we had open. For those of you, go to rollbar.com forward slash error push dash promo. Make sure you open that URL and you should get to the screen and at the top where it has the blue line, it should say you get a US$250 credit there. Go ahead, make sure you see that one. Now, if you already have a Rollbar account, that's okay. You can use your existing Rollbar account. If you want to create a new one, we recommend creating a new one. So, for this one, what I recommend is go ahead and sign up for a brand new account. I'm actually going to do the same over here. Go ahead and sign up for a brand new account over here. So, make sure you have a username and password that follows the standards. And if you hit the finish button, that'll create a brand new Rollbar account for you and your screen should end up looking like this. So, if you're following the PDF, it's step 1.1 is where you should end up. So, if anybody has a problem, if you're running into a specific issue, let me know. Pop it in the chat or feel free to pop it in the Discord channel as well. Okay.

But what have we done right now? So, we have an empty view project in TypeScript, we have a brand new Rollbar account created, and our first project is ready and waiting to be configured. So, we're in a really good spot right now. So, things are trending exactly where we want them to. So, I'm gonna move that browser out of the way there for a bit. Okay. Let's just make sure where we want to go. Alright. So, let's go ahead and follow the next set of steps over here. So, for everybody, hopefully you're into your Rollbar account, it should take me a couple of seconds to go ahead and do that.

So, first of all, what is Rollbar? It's an error monitoring platform. So, we're going to use Rollbar, an instrumented Intel application using one of the SDKs and it'll give us handled and unhandled exceptions. That's fundamentally what we'll be doing today as a basic. So, go ahead and press the next button. So, if you are working in a team, if you're working as a single developer, if you're working with customers, you would often find that when you make code or deliver something, you have to use other tools. Those could be things like JIRA for your bug tracking or issue tracking. So, if you have that, go ahead and select the JIRA integration. If you use something like GitHub, if you use GitLab, go ahead and select those in the list. If you use Slack as a communication channel, if you use something else, you can go ahead and select that. The idea here is we can fit in Rollbar to all the other apps you use. So, for example, we can integrate with JIRA. So, if a brand new error pops up, we'll create a JIRA ticket and if you fix it, it's automatically fixed in either system. If you start to deploy applications, not only can you have it in GitHub as a deploy, but you can also tell Rollbar that there was a brand new deploy. So, when a new error happens, we'll say, hey, it's probably related to this specific deployment you've done. And then, if you use something like Slack or Microsoft Teams, we can pop in messages in your Slack channel. Say, hey, we found a brand new error and here's the stack trace and you can start to work on those. Again, you don't have to select this for this workshop today, but we want to explain and make sure you know about these. So, next is our SDKs. Now, Rollbar works on various types of applications, so both backend, frontend, and mobile applications. So, if you were just using, for example, a Node application, you could pick Node, Ruby, React, PHP, .NET, Java, whatever it was, you can go ahead and select that.

For us today, we're going to go ahead and select view. So, you'll find the view.js one at the bottom somewhere. Go ahead and select that one. But if you have other projects, maybe backend, like Python projects or Go or anything like that, you can select the appropriate SDK and follow those steps.

Okay. So, make sure you select view.js there, which is the one we'll be using today. Okay. Now, the next piece is, before we go on and do anything else, just wait at the screen. Let's make sure everybody has their view project created, make sure everybody has their Rollbar account created, and you should be at this screen, which is where we're going to go ahead and actually start to connect Rollbar with your application. Okay. So, you can have that open on a different screen, which is exactly what I'll be doing over here, and I'm going to move this to the side.

Okay. So, we want to make sure that we are in our specific application path again, which is view.js.rollbar.demo for my instance. And now, what we'll be doing is we'll be following the steps on the screen over here. So, what we want to do first is we want to go npm install --save Rollbar. And what we're doing is we're adding Rollbar to this view project. And it should be pretty quick as well. And you should start to get this sort of message over here telling you that it was all okay. Everything was installed and you have zero issues. So, make sure you run that, which is really the first step to get going. Okay. So, that should be step 2.1.

Now, before we go on, I want to make sure we have this page open over here. So, we are going to create a number of files in this specific application. So, again, you need read and write permission to your folder, because we'll be creating new files. We'll be modifying some existing files to make sure all of this works. So, here's a list of what we'll be adding. So, the Rollbar.config.js file is added in the source or SRC directory or location. We'll be also adding the Rollbar.js file. We'll be registering our plugin, so modifying the main app file. And then we'll also be creating in the components directory or folder the RollbarTest.view file. And again, we'll be registering that in the main app file. And then we'll be adding a button, so modifying an existing file to add a little button that'll create an error for us as well. Okay. So, keep that in mind as we're doing everything. You will need to keep your Rollbar account open. So, make sure you do that. Okay. So, let's go ahead and go back to our application. Right. So, the first thing we need to do is I'm going to go into the source directory and there's a couple of files we'll need to add. So, what I typically like to do is I like to actually do these all in one go, so I have them ready to be modified. So, rollbar.config.js is our first file that we need to add. The next one we'll be adding in the source is the Rollbar.js. Can I ask about the extensions? Should it be JS or because we have installed TypeScript we should use TS for the config files? For these config files we're going to do JavaScript. You can actually use TypeScript. I did test it. It will work with TypeScript. It will give you some type errors in there. But you can actually use TypeScript.

You'll need to modify the code to be TypeScript compliant because it's actually going to ... Rollbar will actually give you a JavaScript example. You can actually modify them and they should work with TypeScript as well. I did get that working. So it's up to you. I would recommend JavaScript just so it follows the steps. But TypeScript will actually work and you can do that. We use TypeScript internally at Rollbar as well. So it will definitely work.

Okay, so we've got that. We've got our files created. Now under components we do need to create a brand new one as well. That's going to be the Rollbar test.view file. So we want to go ahead and create that. So we should have a rollbar.config.js or.typescript file, a rollbar.js or.typescript file, a rollbar.test.view file, and we should be in a really good spot right now because we have all of these empty files created.

Now if you have Rollbar open on that other screen, what you will notice is, as I mentioned before, it will give you the JavaScript values for these. So the rollbar.config, you can press the copy button over here and we can go ahead and copy that into this one over here. Now this is very important, what you are copying here is the configuration that will help tell Rollbar where to send the error data. So the access token is important. That's my access token, don't copy mine because then you'll send it to my Rollbar account, but you will get your own access token. It'll tell you the environment, which we'll be using as the dev environment. We are definitely using, for example, the code version 1.0 for JavaScript, but that's absolutely fine, you don't have to do anything more than that. If you want to modify this, you'll have to modify this file to be TypeScript compliant if you have a .ts file.

Okay, the rollbar.js is next, which I'm going to go ahead and copy. So hit the copy button for that. Again, bring it over and you can save it. Again, this file can actually be modified for TypeScript if you want to do that, feel free to go ahead and do that as well. Okay, so those are the first things we needed to do, rollbar.config.js file which is step Then 2.5 is our rollbar.js file. And next, we want to open up our main file, which in this case will be a main.typescript file. So this one over here, which is our main.typescript file.

Now we're going to do a couple of things potentially out of order here, but just to make it easier to run through. That's typically why I do them like this. So one of the things we do need to do is we need to start to add the rollbar plugin. So we'll import that, and we'll also be adding that view item as well, but we'll be modifying that in a second. So, step number 2.6 is what we'll be doing next. What we'll be doing is we'll actually be modifying some of these files. So the main.ts file is the first one we'll modify. So what we want to go do is, just under Veruda, we want to go ahead and bring in the rollbar plugin. So we want to bring that in from the root directory. The next thing we want to do is we want to import our rollbar test, which doesn't exist yet, but we'll go ahead and bring that in. That's going to be under the component we just created. So components slash rollbar test view. Mine actually picks it up, so that's great. So that's the first thing we want to bring in there. Then we actually do need to register this as well. So after the app was created, we want to register the rollbar error handler. So the way we do that is app.use, and we'll go ahead and do the rollbar plugin, like so. Then, obviously, we're creating the app over here. One of the things I do want to do is I want to go ahead and make sure that we actually register that component for rollbar test 1. So we'll go ahead and go app.component, and what we'll be doing is we'll be registering that one.

So we'll be doing rollbar test, and it should pick it up. There it does. Okay, so what this has done is it's just actually connected all the pieces of string, essentially. So we now have the rollbar plugin registered, so we can actually connect that rollbar.js file and load it into the application, and we can actually use it. The next thing is, we need that rollbar test component, which is what we'll be adding shortly, so we can actually go ahead and use this. So this step is pretty important. If you get to the later steps, like Step 3, and you are not seeing errors in rollbar, this is the first place I would recommend you go ahead and look.

Okay, make sure that you've got all of these. They are in the repo as well. Now the final bit of work we want to do is actually go ahead, and the rollbar test.view file, we want to go ahead and copy that over. So again, we'll go back to this rollbar onboarding, and we'll be simply copying that over and bringing it across. Now, what we want to do over here is we actually do want to make this TypeScript-compliant, so what I'm going to go ahead and do is say, hey, well, the language we want to use over here is TypeScript, so TS, and I'm just going to remove the things that make this a bit more JavaScript-y. That's all you have to do. So script, add a tag for language called TS for TypeScript, and just remove the semicolons, which make it a JavaScript file. So that is very, very important, rollbar test.view, since we've got a TypeScript project, this all needs to work as TypeScript. So what does this file actually do? what this file does is, it'll be the component that we'll be adding to our main form shortly. It'll add a button called triggerError. And when you press that button, it's going to call this method called triggerError, which will simulate an error to rollbar, right? So that's, again, very, very important.

Okay, so hopefully everybody's done that. So let's just recap what we've done. You've copied over from the rollbar onboarding screen, which is this screen over here. You've installed the package, so the rollbar package. You've copied rollbar-config.js into rollbar-config.js. You've done so for rollbar.js. If you modified those to TypeScript files, again, you need to modify the syntax there and make it compliant with TypeScript. If using VS Code, it'll actually give you a heads up of what needs to change to make those types save. Then, again, we want to modify the main app file to go ahead and start to register our files. Finally, that rollbar-test.vue component needs to be updated so we actually have it.

Now if we were to go ahead and run our application, if I go npm run dev over here, you might say, well, I don't have a button yet, and you'd be 100% correct. So we don't have a button yet. That's because there's one final step we need to go ahead and do, which is our app.vue file needs to be modified. So your app should still load, what we want to go ahead and make sure is the app.vue file, we need to go ahead and modify this file. So first thing is we want to go and import that component. So we have that one called rollbar-test and we'll be bringing that in from dash components dash rollbar-test. Okay, so we've got that and you can add it really anywhere you want. I'm going to go ahead and just add it over here, rollbar-test. So that is very important as well. So make sure on your main app files, app.vue in this case for me, I'm going to put it just above the you did it. Hello world message. I'm going to put the rollbar-test component and make sure you have imported that. Now if you refresh your browser, what I would expect to see is something like this, where you see the button called trigger error. So I'm just going to pause over here. If you have any problems, pop it in there. If you're having trouble running your app, let me know. But this is what you should end up with, the app like this. And for those of you that are ready and you want to see how it all works, you can hit the button that says trigger error. So you can go ahead and hit that button as many times as you want. What's going to happen in rollbars, if everything worked correctly when we set it up, this should go ahead and trigger an error inside of the rollbar application. Okay. And again, if you want to run it again, you can do so. That's certainly not a problem. Here we go. And you might need to recompile it and rollbar will be getting error into it quite shortly. Okay. So I'll wait here while everybody is setting this up, making sure everything is working. If you run into any problems, do let me know. Okay. So for many of you, you're hopefully getting a screen like this. So but give it a couple of moments for everybody to catch up, make sure you were able to press that button and you got a brand new item. So if I click on the items window over here, you can try our brand new UI if you want to do so. There you can see the rollbar testing rollbar integration, which should look like this. So that's simply the button we press, that's a component that was used. So again, this should be what you're seeing over here with some of the details captured from that item automatically. So the stack trace and all that sort of stuff. Now again, we just mock one over here. So it's not gonna have everything you always want. But we'll get to that shortly. OK, so I'm just gonna pause over here.

If anybody has a problem, if you're running or need a question answered, do let me know. We're here to help and make sure you get everything answered. I'll give everybody a moment to grab a drink, cup of coffee, and then we'll hop on to the next set of items and see if there's any questions. No questions on this call. So I would assume everybody is looking pretty good. If they've got it registered, everybody's app is running, which is always great. Hi. That is a good start to our day. Yeah, so if you've got items like this, you might need to add a filter, which is your first project. And once you have that filter, you can hide the filters at the side, but you should see it in the list like this. Make sure you have the project selected. Don't worry about environments right now. You can say only want to view some errors, but you know, you can set up these filters. It'll remember your filters as well. You should see it in the list like this. Let me know if you don't, but you should definitely see it in your list like that. And again, if you have any problems, you can go ahead and look at that GitHub repo. You can pull it down if you want to as well. It should make your life a bit easier. But if we recap what we've done, we created a TypeScript view project, we've created a free Rollbar account. Hopefully you've utilized that nice little credit. Then we've integrated your application with Rollbar's SDK. And again, it will be different based on the languages you're using or frameworks you're using. Just follow the onboarding steps for each. And then what we've done is we've pressed a button and we've sent in an error. So before we go any further, you know, what are some of the most common exceptions or things we see here at Rollbar? Things like syntax errors are common exceptions. That's when you've got the wrong code in your syntax. Typically that won't even compile. So you're not seeing that in Rollbar. You'll see that in your IDE as you're compiling. When you actually have runtime errors, that's when something, you know, illegal operations happening during execution. So for example, if I'm doing something completely wrong, my application might crash or throw a handled or unhandled exception, depending on if I actually try to handle them. And that's typically the things your users would experience. Then there might be some logical errors where you're just not, you know, and we'll do one in a second over here, you might be dividing by zero or doing something like that. And then the others might be if you're interacting with APIs, you might get certain error codes back 500 or 400 from backend systems. And again, those things will actually flow into Rollbar as well. So what Rollbar is going to help you with is grabbing handled and unhandled exceptions. So when we get all those unhandled ones, that's typically when you don't try to catch them. So there's no try catch. You have your code and the application itself is going to try and say, hey, I don't know what to do with this error. It's unhandled. It might crash. It might just be handled with your framework as well. Again, typically if you have handled errors, that's typically we try to catch them and do something about them. We can also catch those and send them into Rollbar as well. So the advantage of this is you actually know what's happening in your application for production applications, not just in your dev environment, actually for production applications. And you can then take this data, and people can actually, your developers can see them before the users do, fix them, get those deploy fixes out back to the users as well. So if you haven't hit that button already, go ahead and click that button. And what should happen is you should get an error looking like this in Rollbar. When you click on it, you'll get the stack trace and some additional information for that as well.

So hopefully everybody has been able to do that as well and get your errors into Rollbar. So let's do a couple of things that are a bit harder. Let's just take this to a bit more of a next level over here. So if you've got your test view component open, what we could be doing is let's add another button over here. So I'm going to go ahead and add another button and we'll do add. Click we'll do trigger error two. Okay, so we need to go and I'm just going to be lazy and copy this over. So what I want to do now is let's do a divide by zero. So to give you an example of what this could look like. So we could use something like this. Let's do. Okay, so then let's go ahead and divide this. Now, for those of you, you might go. This is definitely gone a throw an error and you absolutely right. All right, so if you go ahead and say this, and you go back to your application and reloaded you should have a trigger to. Now if you press that, you will see in your console, obviously, some error will be logged as well. So if you hit that Yep, it says, Hey, there was some sort of problem. So again, an error will be logged. If we go to roll by over here, and we can hit the refresh button, you will get that error. That is an example of something where you coded it and it didn't really work as you want it. So, you know, Robo will pick up any of those types of errors as well. If you had to try catch around it, you can pick what you want to do with that error. But then you can sort of see that robot picked up the division by zero and actually picked up all the sort of properties in and around this. So all the things you typically might want to know to help you solve this error. So for example, what browser is being used, what language is being used. It could be things around the types of applications, the URL, the endpoint the user is accessing. It could also include telemetry events. So what forms were they working on or fields were they working on? What things were completed, what things were selected. So we'll give you all the telemetry data for this as well.

Now, one of the things we typically see with users as well, is that you want to add some additional data to your payload. So for many of you, you might be familiar with tools that do performance tracking as well or do some other things in your application and let's go ahead and bring this up. But a lot of times you want to get start to get some additional information, not just the stack trace as well, which is really cool since you can get that from a production application in real time, send it to a Slack channel, get notified on PagerDuty or Jira or something like that, or just via normal email.

But one of the other things that we often see people wanting to do is to connect this with other parts or other tooling that they use. So you might have some session tracking or some session data, so you can send the session ID in the payload to Rollbar, if you're using some tracing tools, you can do the same for that. If you're using feature flagging tools like LaunchDarkly or any other feature flagging tool, you know, is this error happening under a certain feature flag or not? So that way you can see if experiments are very successful or not. So you can actually send in what feature flags are causing a specific error to happen more or less. Then you can also have some additional end user data, so things about your customers. So for example, is it a high value customer? Is it a specific customer that's having a problem that you can notify the customer success team or support teams when they're having a problem? So for example, in Rollbar, if you have a problem in Rollbar and you log a ticket with us, we can actually look in our Rollbar account and see what errors you ran into in the platform, if any, and help you solve those a lot, lot faster. And actually our support teams use the product as well. So again, it is a great way to go ahead and do that.

So one of the things we want to modify in our payload, so that's the rollbar.config.js file, is let's go ahead and send in some person data. So this is going to be identifying who ran into that problem. Now, we'll be hard coding that today, but in a real application, you can pick it up from, for example, the session details, and actually give you a bit of an example of how to do that as well. Okay. So we've got this one over here, we want to add a new payload item. So adding what we call people data to Rollbar. All right. So what we'll be doing over here, it's called person, it's what we actually call this object over here. Let's go ahead and bring that in a bit. Oops. Oops. Let's just do that. There we go. All right. So what I want to record from a person is, we have an object defined in the system. And again, this could be, I normally use James Bond over here since everybody knows Mr. Bond. Jay Bond. And his email. And again, email is optional. So if you're in a country where GDPR compliance or certain personal data is not allowed to be stored, you can encrypt this as well, or just store what you want from this user. It might be a unique user ID from the system as well. So those are things you can certainly store as well. Okay. So we'll go ahead and just make sure that is correct. There we go. Okay. So now if I save this and I go back to my application, and if we make sure that this is refreshed and we can hit this one over here, hit that button a couple of times, we'll be seeing all these errors flow and you can see it's roughly in real time with Rollbar. So really one to two seconds, I've got this data in Rollbar. And what's going to happen now is when we open up this error, and if you click on affected people, we will now have one which is Mr. Bond. So what's now happened in the payload to Rollbar, you will see a brand new person, James Bond is popped into his payload. So imagine you've got lots of different users that are running into problems. Again, you want to show how you can solve the problems very quickly. Again, this is a great way to do that. Now you might be asking how could I go and do this with dynamic data? So let's actually go ahead and look at another application that I know does this with dynamic payloads. So let's go look at the source code and you see how this one is doing it. So shared logging library over here. And so in this one, it's a different configuration a bit for roll bar.

Again, you can add some additional data over here when it comes to, for example, source maps, which we won't be covering today. But you will need to do source maps. But again, you can add additional data into the payload. And for this specific application, if I scroll way to the bottom over here, you can see over here I am modifying the payload over here and adding the person using some of the session data in this application. So that's an example of adding dynamic data to the payload when it is needed. So as soon as the error hits, I actually have this event listener, and then I modify the payload accordingly.

OK, so again, this is a great way for you to add dynamic data into the application. And what that'll do is it'll help you understand who's getting the most problems at a specific time. So another good example is I can open up my project and click on Mr. Bond and see all the problems that Mr. Bond ran into. So for example, if you have high-value customers in your customer base or for your company, you want to click on them and see all the problems they ran into before maybe a contract renewal or something like that to make sure that you've addressed all the issues and actually fixed their problems as well. OK, so I hope that makes sense, how you can actually use some of that people data as well. And again, for both of these, we've added it now. So it's going to be in all the new payloads. And there you can see it. The other nice thing is you can sort of see mine says 60 percent over here, 100 percent. That tells you for all the errors in this application, how many what's the percentage that came from Mr. Bond. So all of my errors pretty much are coming from Mr. Bond, 60 percent of them, at least some didn't have any users on them. But that then again tells you, is it a common problem or is it specific to a user that might be doing something wrong? OK, so that's the first option we want to do is adding people data. The next one we want to do over here is adding what I call custom data to the payload. So why is this useful? So a good example again is we've got our people data. We also want to do some trace data or we want to know something that is different in my application. So I want to maybe have feature flag sent into rollback. I want to send in some additional tokens or something that you find useful to help you debug an error. And this is a great way to be doing this as well. So in the PDF at step 4.2 is adding custom data metadata to our payload. So let's go ahead and actually do that as well. So here we've got items like that. I could go custom. And there you go. So now we've added a custom object like this. And a good example would be. So for example, I could say trace underscore ID and this could be whatever you want. So there's no restrictions to this. I'm just going to go with something like that. And I could also add, for example, feature underscore flag. And again, this could be a an array of objects. So I'm going to do, for example, feature. Feature one, and I could do another one called feature two. We can go ahead and save that. And if we go back to our application, and again, in this payload can be anything. So again, feel free to put in whatever you want. Whatever makes sense to help you debug errors a lot faster. Go ahead, reload your application, hit that button a couple of times. Let's get those errors into roll bar. Again, should be roughly a couple of seconds. There we go.

And if we scroll down now, you will not only see the user data, we'll also see this custom payload. You can see feature one, feature two. We can also see trace ID. So this is very, very useful in these applications, right? So imagine you've got lots, lots of applications that you're monitoring. There's backend, there's frontend, all the things you typically want to monitor. So let's get into more of a practical example of how that would look.

So I've got another roll bar count open over here that we want to look at. So here we go, we've got some more data in this one. So there you can see, for example, I actually track slow queries in my backend over here. So in my metadata, I want to maybe log the actual query that's happening, which I do over here. It ran for 1.3 seconds. I want to know the subscription ID. I want to send in some additional data like the sign up subscription ID. I want to go do any of those other things I want in the payload. So with roll bar, you can actually go ahead and do those as well. You can push warnings, messages, all those sorts of things into the system. And again, I'm adding my app service, so I'm adding additional data to the payload over here. You can see which function it was, did it succeed or not, what was my user ID? So this is the UUID for this application. And again, all these things make it a lot easier for me to know how many people were affected, how many IP addresses were affected. This is back-end, so it's all just going to be one IP address. But again, we can go ahead and find a front-end one like we have over here. Well, clipboard, and this one should have a lot more data in it as well. There you can see, so the number of people affected over time, if I press that, I can see all the people affected and how many times they ran into this problem. And again, this is a great way to get all these problems. This is a JavaScript clipboard that's giving me a problem. So this is the page, so I set it in a one page application. I can actually set my context as well. And again, I will get, for example, the full telemetry for this application as well. Okay, again, it makes it super useful when working with these types of applications.

So you might be asking yourselves, what other custom apps data can I send into Rollbar? So what we recommend doing is, again, if you wanna work with any of the SDKs we've got, there you can sort of see the browser JS ones or the browser related ones. A couple of things like the trace ID can be sent in over here as I've mentioned. There's some additional things you can send in as well with all of these applications. So again, feel free to play around with all the different options you've got for the various SDKs. And again, we give you some really good examples of how to do them, how to rate limit on the client side, you can rate limit on the server side. There's a ton of settings that you can add to your payload at any point in time. Safelist, block list, you can also scrub personal data like date of birth, credit cards, Social Security, if you're in America. All these sorts of things you can actually go ahead and set up in the Rollbar configuration. What I'll do is I'm going to add this to the chat today, here I'll also add it to the Discord channel. So if you want to look at those, you can go ahead and spend some time to look at all the different configuration options in there. Okay, so we'll pause over here, does anybody have any questions, did anybody run into a different problem that they couldn't get across, couldn't get working, looks pretty good so far. Okay, let's get back to this application over here, oops, there we go. All right.

I have a question and because we have this single file robot config, is there a way to, for example, config what type of data should be sent somewhere on the component? Like for example, if I have in shop or any e-commerce page buy button, I would like to send other different information about someone who's buying and different information about, for example, guest who is watching our product. When he, for example, visits a page or clicks view more, I don't want the whole data from the client, the whole data from the guest, right? Oh absolutely, yeah. So, you can definitely, that's a great question. So, you can do it in the payload natively, but you can obviously, since you're over here, as a good example over here, let's do something like this. We don't want to get that error anymore. So, whenever you want to send something today to roll bar, if you go rollbar.info, if you send anything like that, you can customize what you want to send. So in here, you can decide what you want to put into that payload. So you'll see the properties for this one is basically an open payload.

The other thing you can do is in your rollbar config, there is a transform function. So, let me actually go get your transform function so I can actually show you how that works. I actually personally use the transform function a lot. That's actually how I modify my payload. So to your question, I actually do exactly what you spoke about cause that is sometimes important. You know, you want to send different data depending on who the individual is, right? What they're doing. So, if we go back to my example over here, so I actually do something like this.

So I just got to copy out the transform function over here. It'll be something like this. Yep, so what you can do is when you're in the transform function, you can add stuff to the payload. But the actual payload, this object you can modify as you want. So you can say, look, if it's a guest or something else then do something different with this payload. And again, you'll know if there's somebody's logged on or not cause you'll probably know that with your app. But in this, you know, I actually, for example if you use something like Hotjar you want to add the Hotjar session. So that in roll bar you get a hyperlink and you can click and open up Hotjar or Postdoc or some recording that actually did the video recording for you. So I actually do this with some of my applications as well. So I would highly recommend something for example like Postdoc or if you want to say, okay, this was a guest record how many things are in their cart, right? Did they add anything, remove anything? If it's a real user, you know, some other data which country or again, what's in their cart or all that sort of stuff. But this is a great way to do it. This way you can control it as people do it. As you get the data to roll bars you're going to have sort of a global function. We also have override functions. So again, anything from a transform function you can call your own function and do what you want, okay?

Okay, thanks. That's awesome questions. Yeah, and this is a great way to do it. So highly recommend that. The other nice thing is if you do that what will happen in roll bar is you will actually get, you know hype links on these items. Let's see if we have, one or two open here on my side. There we go. Yep, so you have a thing called service links over here. So if you want to add a service link any data in the payload can actually be used as well. So a good example would be if we go to service links, you could, for example, get that data from the payloads. Anything you send in like custom, feature flags or even the native data we pick up. And then you can connect it to things like data dog. You can connect it to any type of application like Splunk, Elastic, New Relic, Sumo, Honeycomb. We've got all these examples over here. But basically this is using the payload. You remember that custom dot whatever we sent in? You could actually read that and then integrate with any other tool you want. In fact, you can do a Google search. You can ask chat GPT if you want how to solve the error. So again, all these things can be done with whatever's in the payload. And we give you a lot of these examples out of the box as well. Then we also have a query language. So if you want to start to query your data that's now in Rollbar, you can write like what's a SQL query and you can run this against your data and it will come back with any of those. And we give you some of the example code of how to do that as well. Okay, so very, very useful if you ever want to start to do that as well.

Okay, I know we're running or getting to the end of our time today. So let's go ahead and recap what we've done and make sure everybody was able to get to where we want it to be. We'll bring that up. So today we created a Vue project using TypeScript. We added a brand new Rollbar account.

Hopefully everybody used that discount code. Then we integrated this application with the Rollbar SDK, the Vue.js SDK. We sent a handled and unhandled error. So the unhandled one is where we divided by zero and one, we actually threw an error but we didn't do a try-catch. You can do a try-catch. And then we finally added our custom payload which we did over here.

So again, we've done everything we wanted in the workshop. So again, thank you for joining me today. I hope you learned something. Hope you learned something new about Rollbar, what it is, how you can use it. There is the Vue.js example we used today. If you want to get back and create your own Vue.vite project. There's also the GitHub repo with this code example in there. So if you ever want to use it again or play around with it or modify it, go ahead and use that as well.

But again, thank you for spending the hour with me today. I hope it was something you learned something about Rollbar. If you have any questions, please pop them in the discord channel. I'll be hanging around a bit more. So if you have any other questions, feel free to stay around and feel free to ask those questions. If you have Rollbar specific questions on how you can use it, happy to help answer those as well. For everybody else, hope you have a good rest of your day and a great week going forward.