Skip to content

Commit 206d04b

Browse files
ishajosishajos
authored
feat: add w3c trace id format support (#655)
1 parent 4ba0076 commit 206d04b

28 files changed

+1625
-59
lines changed

‎.eslintignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
src/events/*
22
**/src/loader-npm-rum.ts
3-
**/src/loader-npm-rum-2.ts
3+
**/src/loader-npm-rum-2.ts
4+
**/src/loader-npm-rum-w3c-format-enabled.ts

‎.github/scripts/update_smoke_test.sh‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,25 @@ CDN+=${VERSION}
1515
awk '{sub(/\$MONITOR_ID/,MONITOR_ID);sub(/\$REGION/,REGION);sub(/\$CDN/,CDN);sub(/\$GUEST_ARN/,GUEST_ARN);sub(/\$IDENTITY_POOL/,IDENTITY_POOL);sub(/\$ENDPOINT/,ENDPOINT);}1' \
1616
MONITOR_ID="'$MONITOR_ID'" REGION="'$REGION'" CDN="'$CDN'" GUEST_ARN="'$GUEST_ARN'" IDENTITY_POOL="'$IDENTITY_POOL'" ENDPOINT="'$ENDPOINT'" smoke/smoke-test-application-CDN/smoke.html > processed_smoke.html
1717

18+
awk '{sub(/\$MONITOR_ID/,MONITOR_ID);sub(/\$REGION/,REGION);sub(/\$CDN/,CDN);sub(/\$GUEST_ARN/,GUEST_ARN);sub(/\$IDENTITY_POOL/,IDENTITY_POOL);sub(/\$ENDPOINT/,ENDPOINT);}1' \
19+
MONITOR_ID="'$MONITOR_ID'" REGION="'$REGION'" CDN="'$CDN'" GUEST_ARN="'$GUEST_ARN'" IDENTITY_POOL="'$IDENTITY_POOL'" ENDPOINT="'$ENDPOINT'" smoke/smoke-test-application-CDN/smoke_w3c_format_enabled.html > processed_smoke_w3c_format_enabled.html
20+
1821
# Module ES
1922
awk '{sub(/\$MONITOR_ID/,MONITOR_ID);sub(/\$REGION/,REGION);sub(/\$CDN/,CDN);sub(/\$GUEST_ARN/,GUEST_ARN);sub(/\$IDENTITY_POOL/,IDENTITY_POOL);sub(/\$ENDPOINT/,ENDPOINT);}1' \
2023
MONITOR_ID="'$MONITOR_ID'" REGION="'$REGION'" CDN="'$CDN'" GUEST_ARN="'$GUEST_ARN'" IDENTITY_POOL="'$IDENTITY_POOL'" ENDPOINT="'$ENDPOINT'" smoke/smoke-test-application-NPM-ES/src/loader-npm-rum.ts > smoke/smoke-test-application-NPM-ES/src/loader-npm-rum-tmp.ts
2124

2225
awk '{sub(/\$MONITOR_ID_2/,MONITOR_ID_2);sub(/\$REGION/,REGION);sub(/\$CDN/,CDN);sub(/\$GUEST_ARN_2/,GUEST_ARN_2);sub(/\$IDENTITY_POOL_2/,IDENTITY_POOL_2);sub(/\$ENDPOINT/,ENDPOINT);}1' \
2326
MONITOR_ID_2="'$MONITOR_ID_2'" REGION="'$REGION'" CDN="'$CDN'" GUEST_ARN_2="'$GUEST_ARN_2'" IDENTITY_POOL_2="'$IDENTITY_POOL_2'" ENDPOINT="'$ENDPOINT'" smoke/smoke-test-application-NPM-ES/src/loader-npm-rum-2.ts > smoke/smoke-test-application-NPM-ES/src/loader-npm-rum-tmp-2.ts
2427

28+
awk '{sub(/\$MONITOR_ID/,MONITOR_ID);sub(/\$REGION/,REGION);sub(/\$CDN/,CDN);sub(/\$GUEST_ARN/,GUEST_ARN);sub(/\$IDENTITY_POOL/,IDENTITY_POOL);sub(/\$ENDPOINT/,ENDPOINT);}1' \
29+
MONITOR_ID="'$MONITOR_ID'" REGION="'$REGION'" CDN="'$CDN'" GUEST_ARN="'$GUEST_ARN'" IDENTITY_POOL="'$IDENTITY_POOL'" ENDPOINT="'$ENDPOINT'" smoke/smoke-test-application-NPM-ES/src/loader-npm-rum-w3c-format-enabled.ts > smoke/smoke-test-application-NPM-ES/src/loader-npm-rum-w3c-format-enabled-tmp.ts
30+
2531
# Module CJS
2632
awk '{sub(/\$MONITOR_ID/,MONITOR_ID);sub(/\$REGION/,REGION);sub(/\$CDN/,CDN);sub(/\$GUEST_ARN/,GUEST_ARN);sub(/\$IDENTITY_POOL/,IDENTITY_POOL);sub(/\$ENDPOINT/,ENDPOINT);}1' \
2733
MONITOR_ID="'$MONITOR_ID'" REGION="'$REGION'" CDN="'$CDN'" GUEST_ARN="'$GUEST_ARN'" IDENTITY_POOL="'$IDENTITY_POOL'" ENDPOINT="'$ENDPOINT'" smoke/smoke-test-application-NPM-CJS/src/loader-npm-rum.ts > smoke/smoke-test-application-NPM-CJS/src/loader-npm-rum-tmp.ts
2834

2935
awk '{sub(/\$MONITOR_ID_2/,MONITOR_ID_2);sub(/\$REGION/,REGION);sub(/\$CDN/,CDN);sub(/\$GUEST_ARN_2/,GUEST_ARN_2);sub(/\$IDENTITY_POOL_2/,IDENTITY_POOL_2);sub(/\$ENDPOINT/,ENDPOINT);}1' \
3036
MONITOR_ID_2="'$MONITOR_ID_2'" REGION="'$REGION'" CDN="'$CDN'" GUEST_ARN_2="'$GUEST_ARN_2'" IDENTITY_POOL_2="'$IDENTITY_POOL_2'" ENDPOINT="'$ENDPOINT'" smoke/smoke-test-application-NPM-CJS/src/loader-npm-rum-2.ts > smoke/smoke-test-application-NPM-CJS/src/loader-npm-rum-tmp-2.ts
37+
38+
awk '{sub(/\$MONITOR_ID/,MONITOR_ID);sub(/\$REGION/,REGION);sub(/\$CDN/,CDN);sub(/\$GUEST_ARN/,GUEST_ARN);sub(/\$IDENTITY_POOL/,IDENTITY_POOL);sub(/\$ENDPOINT/,ENDPOINT);}1' \
39+
MONITOR_ID="'$MONITOR_ID'" REGION="'$REGION'" CDN="'$CDN'" GUEST_ARN="'$GUEST_ARN'" IDENTITY_POOL="'$IDENTITY_POOL'" ENDPOINT="'$ENDPOINT'" smoke/smoke-test-application-NPM-CJS/src/loader-npm-rum-w3c-format-enabled.ts > smoke/smoke-test-application-NPM-CJS/src/loader-npm-rum-w3c-format-enabled-tmp.ts

‎.github/scripts/upload_smoke_test.sh‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,18 @@ version=$(npm pkg get version | sed 's/"//g')
33

44
# CDN
55
aws s3api put-object --bucket $bucket --key "smoke-$version.html" --body processed_smoke.html --content-type "text/html"
6+
aws s3api put-object --bucket $bucket --key "smoke_w3c_format_enabled-$version.html" --body processed_smoke_w3c_format_enabled.html --content-type "text/html"
67

78
# NPM ES
89
aws s3api put-object --bucket $bucket --key "npm/es/$version/smoke.html" --body smoke/smoke-test-application-NPM-ES/app/smoke.html --content-type "text/html"
10+
aws s3api put-object --bucket $bucket --key "npm/es/$version/smoke_w3c_format_enabled.html" --body smoke/smoke-test-application-NPM-ES/app/smoke_w3c_format_enabled.html --content-type "text/html"
911
aws s3api put-object --bucket $bucket --key "npm/es/$version/loader_npm_rum_tmp.js" --body smoke/smoke-test-application-NPM-ES/build/dev/loader_npm_rum_tmp.js --content-type application/x-javascript
1012
aws s3api put-object --bucket $bucket --key "npm/es/$version/loader_npm_rum_tmp_2.js" --body smoke/smoke-test-application-NPM-ES/build/dev/loader_npm_rum_tmp_2.js --content-type application/x-javascript
13+
aws s3api put-object --bucket $bucket --key "npm/es/$version/loader_npm_rum_w3c_format_enabled_tmp.js" --body smoke/smoke-test-application-NPM-ES/build/dev/loader_npm_rum_w3c_format_enabled_tmp.js --content-type application/x-javascript
1114

1215
# NPM CJS
1316
aws s3api put-object --bucket $bucket --key "npm/cjs/$version/smoke.html" --body smoke/smoke-test-application-NPM-CJS/app/smoke.html --content-type "text/html"
17+
aws s3api put-object --bucket $bucket --key "npm/cjs/$version/smoke_w3c_format_enabled.html" --body smoke/smoke-test-application-NPM-CJS/app/smoke_w3c_format_enabled.html --content-type "text/html"
1418
aws s3api put-object --bucket $bucket --key "npm/cjs/$version/loader_npm_rum_tmp.js" --body smoke/smoke-test-application-NPM-CJS/build/dev/loader_npm_rum_tmp.js --content-type application/x-javascript
1519
aws s3api put-object --bucket $bucket --key "npm/cjs/$version/loader_npm_rum_tmp_2.js" --body smoke/smoke-test-application-NPM-CJS/build/dev/loader_npm_rum_tmp_2.js --content-type application/x-javascript
20+
aws s3api put-object --bucket $bucket --key "npm/cjs/$version/loader_npm_rum_w3c_format_enabled_tmp.js" --body smoke/smoke-test-application-NPM-CJS/build/dev/loader_npm_rum_w3c_format_enabled_tmp.js --content-type application/x-javascript

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,4 @@ tests_output
1818
logs
1919
.idea
2020
app/smoke_local.html
21+
app/smoke_w3c_format_enabled_local.html

‎app/http_enable_w3c_trace_format.html‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>RUM Integ Test</title>
5+
6+
<script>
7+
window.fetch = function (request, init) {
8+
document.getElementById('fetchRequestHeaders').innerText =
9+
init.headers['traceparent'];
10+
return Promise.resolve({
11+
status: 200,
12+
headers: new Headers({ 'Content-Length': 125 }),
13+
body: '{}'
14+
});
15+
};
16+
</script>
17+
18+
<script src="./loader_w3c_format_enabled.js"></script>
19+
<link
20+
rel="icon"
21+
type="image/png"
22+
href="https://awsmedia.s3.amazonaws.com/favicon.ico"
23+
/>
24+
25+
<script>
26+
// Common to all test pages
27+
function dispatch() {
28+
cwr('dispatch');
29+
}
30+
31+
function clearRequestResponse() {
32+
document.getElementById('request_url').innerText = '';
33+
document.getElementById('request_header').innerText = '';
34+
document.getElementById('request_body').innerText = '';
35+
36+
document.getElementById('response_status').innerText = '';
37+
document.getElementById('response_header').innerText = '';
38+
document.getElementById('response_body').innerText = '';
39+
}
40+
41+
// Specific to X-Ray Fetch plugin
42+
function sendFetchRequest() {
43+
fetch('https://aws.amazon.com');
44+
}
45+
46+
function sendDataPlaneRequest() {
47+
fetch(
48+
'https://dataplane.rum.us-west-2.amazonaws.com/appmonitors/abc123/'
49+
);
50+
}
51+
52+
function disable() {
53+
cwr('disable');
54+
}
55+
56+
function enable() {
57+
cwr('enable');
58+
}
59+
</script>
60+
61+
<style>
62+
table {
63+
border-collapse: collapse;
64+
margin-top: 10px;
65+
margin-bottom: 10px;
66+
}
67+
68+
td,
69+
th {
70+
border: 1px solid black;
71+
text-align: left;
72+
padding: 8px;
73+
}
74+
</style>
75+
</head>
76+
<body>
77+
<p id="welcome">This application is used for RUM integ testing.</p>
78+
<hr />
79+
<button id="sendFetchRequest" onclick="sendFetchRequest()">
80+
Send Fetch Request
81+
</button>
82+
<button id="sendDataPlaneRequest" onclick="sendDataPlaneRequest()">
83+
Send Data Plane Request
84+
</button>
85+
<button id="disable" onclick="disable()">Disable</button>
86+
<button id="enable" onclick="enable()">Enable</button>
87+
<hr />
88+
<button id="dispatch" onclick="dispatch()">Dispatch</button>
89+
<button id="clearRequestResponse" onclick="clearRequestResponse()">
90+
Clear
91+
</button>
92+
<hr />
93+
<span id="request"></span>
94+
<span id="response"></span>
95+
<table>
96+
<tr>
97+
<td>Request URL</td>
98+
<td id="request_url"></td>
99+
</tr>
100+
<tr>
101+
<td>Request Header</td>
102+
<td id="request_header"></td>
103+
</tr>
104+
<tr>
105+
<td>Request Body</td>
106+
<td id="request_body"></td>
107+
</tr>
108+
</table>
109+
<table>
110+
<tr>
111+
<td>Response Status Code</td>
112+
<td id="response_status"></td>
113+
</tr>
114+
<tr>
115+
<td>Response Header</td>
116+
<td id="response_header"></td>
117+
</tr>
118+
<tr>
119+
<td>Response Body</td>
120+
<td id="response_body"></td>
121+
</tr>
122+
</table>
123+
<table>
124+
<tr>
125+
<td>Mock Request Headers</td>
126+
<td id="fetchRequestHeaders"></td>
127+
</tr>
128+
</table>
129+
</body>
130+
</html>

‎app/smoke_w3c_format_enabled.html‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<!-- <meta
5+
http-equiv="Content-Security-Policy"
6+
content="default-src *; script-src client.rum.us-east-1.amazonaws.com 'nonce-smokeTest'; style-src 'nonce-smokeTest';"
7+
/> -->
8+
<title>RUM Smoke Test</title>
9+
<script>
10+
(function (n, i, v, r, s, c, x, z) {
11+
x = window.AwsRumClient = {
12+
q: [],
13+
n: n,
14+
i: i,
15+
v: v,
16+
r: r,
17+
c: c
18+
};
19+
window[n] = function (c, p) {
20+
x.q.push({ c: c, p: p });
21+
};
22+
z = document.createElement('script');
23+
z.async = true;
24+
z.src = s;
25+
document.head.insertBefore(
26+
z,
27+
document.getElementsByTagName('script')[0]
28+
);
29+
})('cwr', $MONITOR_ID, '1.0.0', $REGION, $CDN, {
30+
sessionSampleRate: 1,
31+
guestRoleArn: $GUEST_ARN,
32+
identityPoolId: $IDENTITY_POOL,
33+
endpoint: $ENDPOINT,
34+
telemetries: ['performance', 'errors', 'http', 'interaction'],
35+
allowCookies: true,
36+
enableXRay: true,
37+
useBeacon: false,
38+
releaseId: '2.1.7',
39+
enableW3CTraceId: true
40+
});
41+
</script>
42+
43+
<link
44+
rel="icon"
45+
type="image/png"
46+
href="https://awsmedia.s3.amazonaws.com/favicon.ico"
47+
/>
48+
49+
<script nonce="smokeTest">
50+
function httpStatFetch500() {
51+
fetch('https://httpstat.us/500');
52+
}
53+
54+
function httpStatFetch200() {
55+
fetch('https://httpstat.us/200');
56+
}
57+
58+
function httpStatXhr500() {
59+
let xhr = new XMLHttpRequest();
60+
xhr.open('GET', 'https://httpstat.us/500', true);
61+
xhr.addEventListener('load', function (e) {
62+
console.log(xhr.response);
63+
});
64+
xhr.send();
65+
}
66+
67+
function httpStatXhr200() {
68+
let xhr = new XMLHttpRequest();
69+
xhr.open('GET', 'https://httpstat.us/200', true);
70+
xhr.addEventListener('load', function (e) {
71+
console.log(xhr.response);
72+
});
73+
xhr.send();
74+
}
75+
</script>
76+
77+
<style nonce="smokeTest">
78+
table {
79+
border-collapse: collapse;
80+
margin-top: 10px;
81+
margin-bottom: 10px;
82+
}
83+
84+
td,
85+
th {
86+
border: 1px solid black;
87+
text-align: left;
88+
padding: 8px;
89+
}
90+
</style>
91+
</head>
92+
<body>
93+
<p id="welcome">This application is used for RUM smoke testing.</p>
94+
<hr />
95+
<button id="httpStatFetch200" onclick="httpStatFetch200()">
96+
httpstat fetch 200
97+
</button>
98+
<button id="httpStatFetch500" onclick="httpStatFetch500()">
99+
httpstat fetch 500
100+
</button>
101+
<button id="httpStatXhr200" onclick="httpStatXhr200()">
102+
httpstat xhr 200
103+
</button>
104+
<button id="httpStatXhr500" onclick="httpStatXhr500()">
105+
httpstat xhr 500
106+
</button>
107+
<hr />
108+
</body>
109+
</html>

‎docs/configuration.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ For example, the config object may look similar to the following:
2525
| disableAutoPageView | Boolean | `false` | When this field is `false`, the web client will automatically record page views.<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 the `recordPageView` command. |
2626
| enableRumClient | Boolean | `true` | When this field is `true`, the web client will record and dispatch RUM events. |
2727
| enableXRay | Boolean | `false` | When this field is `true` **and** the `http` telemetry is used, the web client will record X-Ray traces for HTTP requests.<br/><br/>See the [HTTP telemetry configuration](#http) for more information, including how to connect client-side and server-side traces. |
28+
| enableW3CTraceId | Boolean | `false` | When this field is `true` **and** the `enableXRay` field is `true` **and** the `http` telemetry is used, the web client will record X-Ray traces for HTTP requests in the W3C trace ID format.<br/><br/>Note that existing X-Ray headers will be ignored if this is enabled, and existing W3C headers will be ignored if this is disabled.<br/><br/>See the [W3C Trace Format Specification](https://www.w3.org/TR/trace-context/) for more information. |
2829
| endpoint | String | `'https://dataplane.rum.[region].amazonaws.com'`<br/><br/>`'https://[restapi_id].execute-api.[region].amazonaws.com/[stage_name]/'` | The URL of the CloudWatch RUM API where data will be sent.<br/><br/>You may include a path prefix like `/stage_name/` in the endpoint URL if there is a proxy between your web application and CloudWatch RUM. |
2930
| eventPluginsToLoad | [Plugin](examples.md#record-custom-events-using-a-plugin)[] | `[]` | The set of custom plugins to load. See [usage examples](examples.md#record-custom-events-using-a-plugin). |
3031
| guestRoleArn | String | `undefined` | The ARN of the AWS IAM role that will be assumed during anonymous authorization.<br/><br/>When `guestRoleArn` and `identityPoolId` are both set, the web client will use Cognito's [basic (classic) authflow](https://docs.aws.amazon.com/cognito/latest/developerguide/authentication-flow.html).<br/><br/>When only `identityPoolId` is set, the web client will use Cognito's [enhanced (simplified) authflow](https://docs.aws.amazon.com/cognito/latest/developerguide/authentication-flow.html) (recommended). |
@@ -134,7 +135,7 @@ telemetries: [
134135
| urlsToExclude | RegExp[] | `[]` | A list of HTTP request (`XMLHttpRequest` or `fetch`) URLs. These requests will not be recorded. |
135136
| stackTraceLength | Number | `1000 ` | The number of characters to record from a JavaScript error's stack trace (if available). |
136137
| recordAllRequests | boolean | `false` | By default, only HTTP failed requests (i.e., those with network errors or status codes which are not 2xx) are recorded. When this field is `true`, the http telemetry will record all requests, including those with successful 2xx status codes. <br/><br/>This field does **does not apply** to X-Ray traces, where all requests are recorded. |
137-
| addXRayTraceIdHeader | boolean or RegExp[] | `false` | By default, the `X-Amzn-Trace-Id` header will not be added to the HTTP request. This means that the client-side trace and server-side trace will **not be linked** in X-Ray or the ServiceLens graph.<br/><br/> When this field is `true`, the `X-Amzn-Trace-Id` header will be added to HTTP requests (`XMLHttpRequest` or `fetch`).<br/><br/> When this field is an array of regular expressions (RegExp[]), the `X-Amzn-Trace-Id` header will be added only to HTTP requests that contain an URL matching one or more of the regular expressions.<br/><br/>**Adding the `X-Amzn-Trace-Id` header can cause CORS failures. Test your application before enabling this feature in a production environment.** |
138+
| addXRayTraceIdHeader | boolean or RegExp[] | `false` | By default, the `X-Amzn-Trace-Id` header will not be added to the HTTP request. This means that the client-side trace and server-side trace will **not be linked** in X-Ray or the ServiceLens graph.<br/><br/> When this field is `true`, the `X-Amzn-Trace-Id` header will be added to HTTP requests (`XMLHttpRequest` or `fetch`).<br/><br/> When this field is an array of regular expressions (RegExp[]), the `X-Amzn-Trace-Id` header will be added only to HTTP requests that contain an URL matching one or more of the regular expressions. If the `enableW3CTraceId` field is set to true, then a `traceparent` header will be added in the W3C trace format (see [here](https://www.w3.org/TR/trace-context/#traceparent-header) for more information) instead of the `X-Amzn-Trace-Id` header. <br/><br/>**Adding the `X-Amzn-Trace-Id` header can cause CORS failures. Test your application before enabling this feature in a production environment.** |
138139

139140
## Interaction
140141

0 commit comments

Comments
 (0)