Enabling AWS RUM for your application - Amazon Web Services (AWS) Tutorial

- [Instructor] In this demo, we are going to install and configure AWS CloudWatch RUM with our client application. In the CloudWatch Management console, scroll down into Application and monitoring, and then click on RUM. In order to monitor our client app, we need to create a new app monitor. Click on the Add app monitor here, and let's go ahead and specify the details. First, let's go ahead and give the name. Let's name it demoapp. Next, we need to specify the application domain. This is the domain that the app monitor will accept requests from. If the domain doesn't match, then the request will fail. Since our application is going to be on localhost, we can just go ahead and specify localhost in here. Once you go to production, then you specify the correct URL. Now let's scroll down and configure data collection. In here, we are going to leave this as default, where we collect performance telemetry, JavaScript errors, and HTTP errors. Now let's go ahead and scroll down. In here, we can choose whether we want to allow cookies or not. This will depend on your use case. For our demo, we are going to leave it as default. We also can specify what percentage of our sessions we would like to collect and analyze. When you're just getting started, you can leave this as default, but as your app grows, you might want to decrease this number, as it might get expensive. Let's go ahead and scroll down to authorization. In here, you need to choose identity pool for your app monitor. You can choose to create a new one, or use an existing identity pool. For our demo, we are not going to get into Amazon Cognito, so we are going to create a new identity pool. Now let's scroll down and create our app monitor. Now that the app monitor has been created, we need to configure it with our app. I've already provided a simple application for you in the exercise files, and it's built using Vue.js and TypeScript. Let's go ahead and copy this command, and then open the exercise files. The application name is CloudwatchRum. In here, first, we need to install the package. Let's go ahead and paste in the script you copied, aws-rum-web, and let's go ahead and install this package. Now that the package has been installed, we need to configure it. All the configuration for RUM, I have set up in this file, registerRum.ts. So all you need to do is provide the configuration inside this function, and then this will be called in the right location, so you don't have to know anything about Vue.js. Let's switch back to our app monitor, and in here now, we need to copy this code. Let's go ahead and copy it, and paste it inside the function here. And now we are ready to go. Make sure you save the changes. One final thing we need to do is install the NPM packages. In the terminal here, do npm install, and once the packages have been installed, now you can do npm run serve. This will start application on localhost port 8080. Once the app is running, let's go ahead and navigate to localhost port 8080, and you should see something like this. This is a simple application that will simulate user interaction with our app. We are going to make some requests, and we're going to throw some errors, so we can simulate a real user interaction. The requests here are made against a JSON API placeholder, a public API where we can make a request to test our client applications. All you have to do in here is specify how many requests you want, and then start. This will run 100 requests in here, and then every three requests, one will fail, as well as it'll throw an error. Let's go ahead and start it, and right away, the Vue dev server will show something like this. This is fine. When we are in development, and we have uncaught runtime errors, it'll show something like this. If we close it, the application is still continuing to send requests. Now let's navigate back to our CloudWatch management console. Let's go ahead and say Done, and right away, we should come to this page. In here, we have an overview of our app monitor. If you don't see it in here, click List view, and then open the app monitor in here. If you don't see any data here, make sure you wait at least five minutes, and if you still don't see any data, then navigate to the app and open the network console. In here, you should find requests that are being made to the app monitor. If no data are being sent, then this request will fail. When the request fails, in the preview, you should find the reason why. Once you know the reason, it should be pretty straightforward to fix it. Now that we have configured our app, in our next video, we are going to look at the different data that is being collected.