https://github.com/aws-samples/cloudwatch-rum-demo
Amazon Cloudwatch RUM demo
https://github.com/aws-samples/cloudwatch-rum-demo
Last synced: 2 months ago
JSON representation
Amazon Cloudwatch RUM demo
- Host: GitHub
- URL: https://github.com/aws-samples/cloudwatch-rum-demo
- Owner: aws-samples
- License: apache-2.0
- Created: 2023-03-30T16:55:50.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-07T16:32:17.000Z (about 2 years ago)
- Last Synced: 2024-08-02T09:27:38.822Z (10 months ago)
- Language: CSS
- Homepage:
- Size: 896 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Amazon Cloudwatch RUM
Cloudwatch RUM is a Real User Monitoring, released at re:Invent 2021. It's a tool that allows customers to get analytics from the client’s web browser on what the consumers interact with their website, the experience of those interactions, and if they are seeing any errors specifically and where. It is fairly easy to setup and supports a number of frameworks.
*This demo is meant to help you spin up a quick site that has Cloudwatch RUM configured and ready. Just walk through the README and add the Cloudwatch RUM snippet to your code and start collecting interactions right away.*
1. If you have your own stack, you have access to your HTML/JS and just want to deploy Cloudwatch RUM then go [here](https://github.com/waday71/Cloudwatch-RUM-Demo/blob/main/RUMsolo.md).
2. If you need a sample stack (example site) to use for a demo then keep reading below.
## Deploy:
1. Save the [Cloudwatch-RUM-Demo/CloudFormation_template.yaml](https://github.com/waday71/Cloudwatch-RUM-Demo/blob/main/CloudFormation_template.yaml) to your system and load the existing template into your CloudFormation console.
### *Requirements:*
Deploys a Website on EC2 Autoscaling groups with a simple html/css front-end in 2 separate AZ's in a VPC. If you have a custom AMI you can replace the AMI ID with yours or update the docker container with your code in the User data section (see below).
In this CloudFormation template you will need:
- [ ] 2 Public Subnets
- [ ] VPC
- [ ] 1 domain - *If one is not available you can point it to Cloudfront domain and later point the Origin to ALB deployed through this template* (CloudWatch RUM will not accept ALB URL).
- [ ] Docker Hub account (free) that you can pull and push containers too.
2. Pull the docker image with the sample html site.
```
docker pull waday71/cwrumdemo
```
3. Do a docker build and docker push to your docker hub account.
```
docker build --platform=linux/x86_64 -t /cwrumdemo .
docker push /cwrumdemo
```
Replace string 'waday71/cwdemo' with 'your docker account/cwdemo' in the userdata section (lines 163/164).
4. Go to CloudFormation in the AWS console
You will assign these to parameters that are called out in CloudFormation parameters.
Confirm the stack and resources have deployed under Cloudformation Stack Events.
5. Go to Cloudwatch in the AWS Console. Under "Application Monitoring" Search on the left for RUM.
Identify the application monitor and click the "View JavaScript".
Click JavaScript Snippet on left column.
6. Copy the "snippet" and paste into the of your HTML or JS, depending on the framework you are using.
You can choose between frameworks like HTML, Javascript, or Typescript.
(HTML Example):
7. You need place snippet script in each webpage to call the cwr.js to be executed on the client browser.
8. Once the snippet has been saved to your application, you can do the following commands to deploy to Docker Hub for deploying changes:
*Note - If building on an Apple Mx device use the -platform=linux/x86_64 option*
```
docker build --platform=linux/x86_64 -t /cwrumdemo .
docker push /cwrumdemo
```
*Use your own Docker Hub account and push changes*
## Verify
Then add ALB you will find in "Outputs" of your CloudFormation template as the origin in Cloudfront domain you previously created.
8. Click on various links and pages.
Then by clicking around on the sample web site it will start sending events to CloudWatch RUM. It will start collecting user interactions that will be collected in the Cloudwatch RUM Application Monitor Overview dashboard as seen below.
9. See in the Developer tools the client sending events to the "dataplane"
*On the Client Side*
Here you see in the developer tools, the client has been downloaded and its attempting to establish a connection with the dataplane.
## CloudWatch RUM Features
### User Journey
[ Metrics gathered by Cloudwatch RUM](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/CloudWatch-RUM-metrics.html)
[Example Cloudwatch Dashboard](https://github.com/waday71/Cloudwatch-RUM-Demo/blob/main/CloudwatchRUM-dashboard.json) Extending and collecting Cloudwatch RUM beyond the 30 days
[ Sending Custom Events to CloudWatch RUM](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/CloudWatch-RUM-custom-events.html)