Skip to content

Commit 89b5f53

Browse files
authored
docs: Add JS module (npm) install instructions (#125)
1 parent f69c859 commit 89b5f53

File tree

6 files changed

+293
-129
lines changed

6 files changed

+293
-129
lines changed

README.md

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,42 @@ JavaScript library which performs real user monitoring (RUM) telemetry on web
55
applications. Data collected by the RUM web client includes page load timing,
66
JavaScript errors and HTTP requests.
77

8-
## Installing
8+
## Install as a JavaScript Module
99

10-
The latest stable version of the web client is hosted on a content delivery
11-
network (CDN) hosted by CloudWatch RUM. See the [CloudWatch RUM
12-
documentation](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/CloudWatch-RUM.html)
13-
for instructions on how to create an AppMonitor and generate a code snippet
14-
which will install the web client in your application.
10+
See [Installing as a JavaScript Module](docs/npm_installation.md).
1511

16-
## Documentation
12+
## Install as an Embedded Script
1713

18-
1. [Installing from CDN](docs/cdn_installation.md)
19-
1. [Executing Commands](docs/cdn_commands.md)
20-
1. [Using the Web Client with Angular](docs/cdn_angular.md)
21-
1. [Using the Web Client with React](docs/cdn_react.md)
22-
1. [Troubleshooting CDN Installations](docs/cdn_troubleshooting.md)
14+
See [Installing as an Embedded Script](docs/cdn_installation.md).
15+
16+
## Additional Documentation:
17+
18+
1. [Configuring the web client](docs/configuration.md)
19+
1. [Executing commands](docs/cdn_commands.md)
20+
1. [Using the web client with Angular](docs/cdn_angular.md)
21+
1. [Using the web client with React](docs/cdn_react.md)
22+
1. [Troubleshooting](docs/cdn_troubleshooting.md)
2323

2424
## Getting Help
2525

2626
Use the following community resources for getting help with the SDK. We use the GitHub issues for tracking bugs and feature requests.
2727

2828
- View the [CloudWatch RUM documentation](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/CloudWatch-RUM.html).
29+
- Ask a question in the [Amazon CloudWatch forum](https://forums.aws.amazon.com/forum.jspa?forumID=138)
2930
- Open a support ticket with [AWS Support](https://docs.aws.amazon.com/awssupport/latest/user/getting-started.html).
3031
- If you think you may have found a bug, open an [issue](https://github.com/aws-observability/aws-rum-web/issues/new).
3132

3233
## Opening Issues
3334

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

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

@@ -109,9 +111,9 @@ npm run integ:local:nightwatch
109111

110112
## Pre-commit Tasks
111113

112-
The RUM Web Client uses pre-commit tasks to lint and format its source code.
113-
Before submitting code, check that all linter and formatter warnings have been
114-
resolved.
114+
The CloudWatch RUM web client uses pre-commit tasks to lint and format its
115+
source code. Before submitting code, check that all linter and formatter
116+
warnings have been resolved.
115117

116118
Attempt to automatically repair linter warnings:
117119

docs/cdn_commands.md

Lines changed: 39 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
11
# Executing Commands
22

3-
Applications which install the web client using CDN must interact with the web client through its command queue. The command queue is a function which stores commands that will be executed asynchronously by the web client.
3+
Applications interact with the web client either through its command queue (embedded script install), or its API (JavaScript module install).
44

5-
## Commands
5+
**Embedded script command queue**
6+
7+
The command queue is accessed through a global variable (named `cwr` by default). The command queue is a function which stores commands that will be executed asynchronously by the web client. Commands may be sent to the web client using the command queue after the snippet has executed.
8+
9+
**JavaScript module API**
10+
11+
Commands may be sent to the web client using the API after the `AwsRum` class has been instantiated.
12+
13+
## Examples
614

7-
Commands may be sent to the web client after the snippet has executed. In the following example, the snippet has disabled automated page view recording and has not provided AWS credentials. Following the snippet, the application manually records a page view and forwards AWS credentials to the web client.
15+
In the following example, the snippet has disabled automated page view recording
16+
and has not provided AWS credentials. Following the snippet, the application
17+
manually records a page view and forwards AWS credentials to the web client.
18+
19+
**Embedded script example**
820
```html
921
<script>
1022
(function(n,i,v,r,s,c,u,x,z){...})(
@@ -23,14 +35,29 @@ Commands may be sent to the web client after the snippet has executed. In the fo
2335
</script>
2436
```
2537

38+
**JavaScript module example**
39+
```typescript
40+
const awsRum: AwsRum = new AwsRum(
41+
APPLICATION_ID,
42+
APPLICATION_VERSION,
43+
APPLICATION_REGION,
44+
{ disableAutoPageView: true }
45+
);
46+
awsRum.recordPageView(window.location.hash);
47+
const credentialProvider = new CustomCredentialProvider();
48+
if(awsCreds) awsRum.setAwsCredentials(credentialProvider);
49+
```
50+
51+
## Commands
52+
2653
| Command | Parameter Type | Example <div style="width:265px"></div> | Description |
2754
| --- | --- | --- | --- |
28-
| allowCookies | Boolean | `cwr('allowCookies', true);` | Enable the web client to set and read two cookies: a session cookie named `cwr_s` and a user cookie named `cwr_u`.<br/><br/>`cwr_s` stores session data including an anonymous session ID (uuid v4) created by the web client. This allows CloudWatch RUM to compute sessionized metrics like errors per session.<br/><br/>`cwr_u` stores an anonymous user ID (uuid v4) created by the web client. This allows CloudWatch RUM to count return visitors.<br/><br/>`true`: the web client will use cookies<br/>`false`: the web client will not use cookies
29-
| disable | None | `cwr('disable');` | Stop recording and dispatching RUM events.
30-
| dispatch | None | `cwr('dispatch');` | Flush RUM events from the cache and dispatch them to CloudWatch RUM using [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
31-
| dispatchBeacon | None | `cwr('dispatchBeacon');` | Flush RUM events from the cache and dispatch them to CloudWatch RUM using [`sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API).
32-
| enable | None | `cwr('enable');` | Start recording and dispatching RUM events.
33-
| recordPageView | String | `cwr('recordPageView', '/home');` | Record a page view event.<br/><br/>By default, the web client records page views when (1) the page first loads and (2) the browser's [history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) is called. The page ID is `window.location.pathname`.<br/><br/>In some cases, the web client's instrumentation will not record the desired page ID. In this case, the web client's page view automation must be disabled using the `disableAutoPageView` configuration, and the application must be instrumented to record page views using this command.
34-
| recordError | Error \|&nbsp;ErrorEvent \|&nbsp;String | `try {...} catch(e) { cwr('recordError', e); }` | Record a caught error.
35-
| registerDomEvents | Array | `cwr('registerDomEvents', [{ event: 'click', cssLocator: '[label="label1"]' }]);` | Register target DOM events to record. The target DOM events will be added to existing target DOM events. The parameter type is equivalent to the `events` property type of the [interaction telemetry configuration](https://github.com/aws-observability/aws-rum-web/blob/main/docs/cdn_installation.md#interaction).
36-
| setAwsCredentials | [Credentials](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Credentials.html) \|&nbsp;[CredentialProvider](https://www.npmjs.com/package/@aws-sdk/credential-providers) | `cwr('setAwsCredentials', cred);` | Forward AWS credentials to the web client. The web client requires AWS credentials with permission to call the `PutRumEvents` API. If you have not set `identityPoolId` and `guestRoleArn` in the web client configuration, you must forward AWS credentials to the web client using this command.
55+
| allowCookies | Boolean | `cwr('allowCookies', true);`<br/><br/>`awsRum.allowCookies(true)` | Enable the web client to set and read two cookies: a session cookie named `cwr_s` and a user cookie named `cwr_u`.<br/><br/>`cwr_s` stores session data including an anonymous session ID (uuid v4) created by the web client. This allows CloudWatch RUM to compute sessionized metrics like errors per session.<br/><br/>`cwr_u` stores an anonymous user ID (uuid v4) created by the web client. This allows CloudWatch RUM to count return visitors.<br/><br/>`true`: the web client will use cookies<br/>`false`: the web client will not use cookies
56+
| disable | None | `cwr('disable');`<br/><br/>`awsRum.disable();` | Stop recording and dispatching RUM events.
57+
| dispatch | None | `cwr('dispatch');`<br/><br/>`awsRum.dispatch();` | Flush RUM events from the cache and dispatch them to CloudWatch RUM using [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
58+
| dispatchBeacon | None | `cwr('dispatchBeacon');`<br/><br/>`awsRum.dispatchBeacon();` | Flush RUM events from the cache and dispatch them to CloudWatch RUM using [`sendBeacon`](https://developer.mozilla.org/en-US/docs/Web/API/Beacon_API).
59+
| enable | None | `cwr('enable');`<br/><br/>`awsRum.enable();` | Start recording and dispatching RUM events.
60+
| recordPageView | String | `cwr('recordPageView', '/home');`<br/><br/>`awsRum.recordPageView('/home');` | Record a page view event.<br/><br/>By default, the web client records page views when (1) the page first loads and (2) the browser's [history API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) is called. The page ID is `window.location.pathname`.<br/><br/>In some cases, the web client's instrumentation will not record the desired page ID. In this case, the web client's page view automation must be disabled using the `disableAutoPageView` configuration, and the application must be instrumented to record page views using this command.
61+
| recordError | Error \|&nbsp;ErrorEvent \|&nbsp;String | `try {...} catch(e) { cwr('recordError', e); }`<br/><br/>`try {...} catch(e) { awsRum.recordError(e); }` | Record a caught error.
62+
| registerDomEvents | Array | `cwr('registerDomEvents', [{ event: 'click', cssLocator: '[label="label1"]' }]);`<br/><br/>`awsRum.registerDomEvent([{ event: 'click', cssLocator: '[label="label1"]' }]);` | Register target DOM events to record. The target DOM events will be added to existing target DOM events. The parameter type is equivalent to the `events` property type of the [interaction telemetry configuration](https://github.com/aws-observability/aws-rum-web/blob/main/docs/cdn_installation.md#interaction).
63+
| setAwsCredentials | [Credentials](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Credentials.html) \|&nbsp;[CredentialProvider](https://www.npmjs.com/package/@aws-sdk/credential-providers) | `cwr('setAwsCredentials', cred);`<br/><br/>`awsRum.setAwsCredentials(cred);` | Forward AWS credentials to the web client. The web client requires AWS credentials with permission to call the `PutRumEvents` API. If you have not set `identityPoolId` and `guestRoleArn` in the web client configuration, you must forward AWS credentials to the web client using this command.

0 commit comments

Comments
 (0)