Skip to content

Commit

Permalink
Merge branch 'main' into unique-cred-cookie
Browse files Browse the repository at this point in the history
  • Loading branch information
limhjgrace authored Jul 1, 2024
2 parents 83e0e7b + 648b18e commit bb1dc90
Show file tree
Hide file tree
Showing 15 changed files with 372 additions and 405 deletions.
4 changes: 2 additions & 2 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@ dist
coverage
src/events
package-lock.json
docs/
.vscode
.vscode
tests_output/
10 changes: 9 additions & 1 deletion .prettierrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,13 @@
"tabWidth": 4,
"semi": true,
"singleQuote": true,
"endOfLine": "lf"
"endOfLine": "lf",
"overrides": [
{
"files": "*.md",
"options": {
"proseWrap": "never"
}
}
]
}
4 changes: 1 addition & 3 deletions CODE_OF_CONDUCT.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
## Code of Conduct

This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct).
For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact
opensource-codeofconduct@amazon.com with any additional questions or comments.
This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct). For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact opensource-codeofconduct@amazon.com with any additional questions or comments.
16 changes: 5 additions & 11 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,14 @@
# Contributing Guidelines

Thank you for your interest in contributing to our project. Whether it's a bug report, new feature, correction, or additional
documentation, we greatly value feedback and contributions from our community.
Thank you for your interest in contributing to our project. Whether it's a bug report, new feature, correction, or additional documentation, we greatly value feedback and contributions from our community.

Please read through this document before submitting any issues or pull requests to ensure we have all the necessary
information to effectively respond to your bug report or contribution.
Please read through this document before submitting any issues or pull requests to ensure we have all the necessary information to effectively respond to your bug report or contribution.

## Reporting Bugs/Feature Requests

We welcome you to use the GitHub issue tracker to report bugs or suggest features.

When filing an issue, please check existing open, or recently closed, issues to make sure somebody else hasn't already
reported the issue. Please try to include as much information as you can. Details like these are incredibly useful:
When filing an issue, please check existing open, or recently closed, issues to make sure somebody else hasn't already reported the issue. Please try to include as much information as you can. Details like these are incredibly useful:

- A reproducible test case or series of steps
- The version of our code being used
Expand All @@ -35,18 +32,15 @@ To send us a pull request, please:
5. Send us a pull request, answering any default questions in the pull request interface.
6. Pay attention to any automated CI failures reported in the pull request, and stay involved in the conversation.

GitHub provides additional document on [forking a repository](https://help.github.com/articles/fork-a-repo/) and
[creating a pull request](https://help.github.com/articles/creating-a-pull-request/).
GitHub provides additional document on [forking a repository](https://help.github.com/articles/fork-a-repo/) and [creating a pull request](https://help.github.com/articles/creating-a-pull-request/).

## Finding contributions to work on

Looking at the existing issues is a great way to find something to contribute on. As our projects, by default, use the default GitHub issue labels (enhancement/bug/duplicate/help wanted/invalid/question/wontfix), looking at any 'help wanted' issues is a great place to start.

## Code of Conduct

This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct).
For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact
opensource-codeofconduct@amazon.com with any additional questions or comments.
This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct). For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact opensource-codeofconduct@amazon.com with any additional questions or comments.

## Security issue notifications

Expand Down
27 changes: 6 additions & 21 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
# Amazon CloudWatch RUM Web Client

This is the CloudWatch RUM web client source code repository. It hosts a
JavaScript library which performs real user monitoring (RUM) telemetry on web
applications. Data collected by the RUM web client includes page load timing,
JavaScript errors and HTTP requests.
This is the CloudWatch RUM web client source code repository. It hosts a JavaScript library which performs real user monitoring (RUM) telemetry on web applications. Data collected by the RUM web client includes page load timing, JavaScript errors and HTTP requests.

## Install as a JavaScript Module

Expand Down Expand Up @@ -32,17 +29,9 @@ Use the following community resources for getting help with the SDK. We use the

## Opening Issues

If you encounter a bug with the CloudWatch RUM web client, we want to hear about
it. Before opening a new issue, [search the existing
issues](https://github.com/aws-observability/aws-rum-web/issues?q=is%3Aissue) to
see if others are also experiencing the issue. Include the version of the
CloudWatch RUM web client, Node.js runtime, and other dependencies if
applicable. In addition, include the repro case when appropriate.
If you encounter a bug with the CloudWatch RUM web client, we want to hear about it. Before opening a new issue, [search the existing issues](https://github.com/aws-observability/aws-rum-web/issues?q=is%3Aissue) to see if others are also experiencing the issue. Include the version of the CloudWatch RUM web client, Node.js runtime, and other dependencies if applicable. In addition, include the repro case when appropriate.

The GitHub issues are intended for bug reports and feature requests. For help
and questions about using the CloudWatch RUM web client, use the resources
listed in the Getting Help section. Keeping the list of open issues lean helps
us respond in a timely manner.
The GitHub issues are intended for bug reports and feature requests. For help and questions about using the CloudWatch RUM web client, use the resources listed in the Getting Help section. Keeping the list of open issues lean helps us respond in a timely manner.

## Contributing

Expand Down Expand Up @@ -112,18 +101,15 @@ npm run integ -- chrome:headless
npm run integ -- chrome
```

Some features perform monkey patching which is incompatible with TestCafe. In
these cases, run Nightwatch as a separate browser integration test target:
Some features perform monkey patching which is incompatible with TestCafe. In these cases, run Nightwatch as a separate browser integration test target:

```
npm run integ:local:nightwatch
```

## Pre-commit Tasks

The CloudWatch RUM web client uses pre-commit tasks to lint and format its
source code. Before submitting code, check that all linter and formatter
warnings have been resolved.
The CloudWatch RUM web client uses pre-commit tasks to lint and format its source code. Before submitting code, check that all linter and formatter warnings have been resolved.

Attempt to automatically repair linter warnings:

Expand All @@ -139,8 +125,7 @@ npm run prettier:fix

## Security

See [CONTRIBUTING](CONTRIBUTING.md#security-issue-notifications) for more
information.
See [CONTRIBUTING](CONTRIBUTING.md#security-issue-notifications) for more information.

## License

Expand Down
105 changes: 65 additions & 40 deletions docs/cdn_angular.md
Original file line number Diff line number Diff line change
@@ -1,82 +1,107 @@
# Using the CloudWatch RUM Web Client with Angular 12
# Using the CloudWatch RUM Web Client with Angular 12

## Add the snippet to index.html

To install the web client in an Angular application, add the snippet inside the \<head\> tag of `index.html`.

```html
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<script>
(function(n,i,v,r,s,c,u,x,z){x=window.AwsRumClient={q:[],n:n,i:i,v:v,r:r,c:c,u:u};window[n]=function(c,p){x.q.push({c:c,p:p});};z=document.createElement('script');z.async=true;z.src=s;document.head.insertBefore(z,document.getElementsByTagName('script')[0]);})('cwr','00000000-0000-0000-0000-000000000000','1.0.0','us-west-2','https://client.rum.us-east-1.amazonaws.com/1.0.2/cwr.js',{sessionSampleRate:1,identityPoolId:'us-west-2:00000000-0000-0000-0000-000000000000',endpoint:'https://dataplane.rum.us-west-2.amazonaws.com',telemetries:['errors','http','performance'],allowCookies:true});
</script>
...
</head>
<body>
...
</body>
<head>
<script>
(function (n, i, v, r, s, c, u, x, z) {
x = window.AwsRumClient = {
q: [],
n: n,
i: i,
v: v,
r: r,
c: c,
u: u
};
window[n] = function (c, p) {
x.q.push({ c: c, p: p });
};
z = document.createElement('script');
z.async = true;
z.src = s;
document.head.insertBefore(
z,
document.getElementsByTagName('script')[0]
);
})(
'cwr',
'00000000-0000-0000-0000-000000000000',
'1.0.0',
'us-west-2',
'https://client.rum.us-east-1.amazonaws.com/1.0.2/cwr.js',
{
sessionSampleRate: 1,
identityPoolId:
'us-west-2:00000000-0000-0000-0000-000000000000',
endpoint: 'https://dataplane.rum.us-west-2.amazonaws.com',
telemetries: ['errors', 'http', 'performance'],
allowCookies: true
}
);
</script>
...
</head>
<body>
...
</body>
</html>
```

## Instrument Routing to Record Page Views

If your application contains arguments in the URL's path, you likely want to
record custom page IDs so that the arguments can be removed and the pages will
be properly aggregated in CloudWatch. For example, if we have two URLs
`https://amazonaws.com/user/123` and `https://amazonaws.com/user/456`, we likely
want to remove the user ID from the path so that the page ID is `/user` for both
URLs.
If your application contains arguments in the URL's path, you likely want to record custom page IDs so that the arguments can be removed and the pages will be properly aggregated in CloudWatch. For example, if we have two URLs `https://amazonaws.com/user/123` and `https://amazonaws.com/user/456`, we likely want to remove the user ID from the path so that the page ID is `/user` for both URLs.

For Angular applications, we can subscribe to the `NavigationEnd` event, and
record a custom page ID using the URL provided by the router:
For Angular applications, we can subscribe to the `NavigationEnd` event, and record a custom page ID using the URL provided by the router:

```typescript
import { Router, NavigationEnd } from '@angular/router';

declare function cwr(operation: string, payload: any): void;

export class MyComponent implements OnInit {

constructor(private router: Router) {}

ngOnInit(): void {
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
console.log('this.router.url');
cwr('recordPageView', this.router.url);
}
});
}

constructor(private router: Router) {}

ngOnInit(): void {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
console.log('this.router.url');
cwr('recordPageView', this.router.url);
}
});
}
}
```


## Instrument Error Handling to Record Errors

Angular intercepts uncaught JavaScript errors that originate within the
Angular application. Because Angular intercepts these errors, they will not be
recorded by the web client. This can be fixed by creating an error handler that
records uncaught errors using the web client's `recordError` command:
Angular intercepts uncaught JavaScript errors that originate within the Angular application. Because Angular intercepts these errors, they will not be recorded by the web client. This can be fixed by creating an error handler that records uncaught errors using the web client's `recordError` command:

### 1. Create an error handler

`src/app/cwr-error-handler.ts`

```typescript
import { ErrorHandler } from "@angular/core";
import { ErrorHandler } from '@angular/core';

declare function cwr(operation: string, payload: any): void;

export class RumErrorHandler implements ErrorHandler {
handleError(error: any) {
cwr('recordError', error);
}
handleError(error: any) {
cwr('recordError', error);
}
}
```

### 2. Install the error handler in the root module:

`src/app/app.module.ts`

```typescript
import { RumErrorHandler } from './cwr-error-handler';
@NgModule({
Expand Down
Loading

0 comments on commit bb1dc90

Please sign in to comment.