Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit bc583b8

Browse files
obecnymayurkale22
obecny
and
mayurkale22
committed
XMLHttpRequest (open-telemetry#595)
* feat(xml-http-request): new plugin for auto instrumentation for xml-http-request * chore: new example for xml-http-request and updated examples structure for web * chore: updating readme * chore: linting * chore: fixing origin for tests * chore: linting * chore: updating to use b3 format from core * chore: updates after reviews * chore: wrong function call * chore: updating attribute names * chore: linting * chore: adding preflight requests, fixing few other issues * chore: adding image to examples, updating readme * chore: forcing async to be true, but propagate rest params * chore: fixing type for open and send function * chore: fixing format for headers * chore: reviews * chore: decrement task count when span exists * chore: changes after review * chore: adding weakmap for keeping information connected with xhr * chore: renaming config param * chore: not needed cast * chore: updating title * chore: refactored xhr, removed tracing dependency, few other issues fixed * chore: reviews * chore: refactored for collecting timing resources * chore: fixes after merging * chore: reviews * chore: reviews Co-authored-by: Mayur Kale <[email protected]>
1 parent e8db33a commit bc583b8

File tree

42 files changed

+2701
-74
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+2701
-74
lines changed

‎examples/tracer-web/README.md

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
# Overview
22

3-
This example shows how to use [@opentelemetry/web](https://github.com/open-telemetry/opentelemetry-js/tree/master/packages/opentelemetry-web) to instrument your JavaScript code running in the browser.
4-
This example uses the `ConsoleSpanExporter()` to export spans to the browser console output.
3+
This example shows how to use [@opentelemetry/web](https://github.com/open-telemetry/opentelemetry-js/tree/master/packages/opentelemetry-web) with different plugins and setup to instrument your JavaScript code running in the browser.
54

65
## Installation
76

@@ -19,11 +18,23 @@ $ npm start
1918

2019
By default, the application will run on port `8090`.
2120

22-
To see the results, open the browser at <http://localhost:8090/> and make sure you have the browser console open. The application is using the `ConsoleSpanExporter` and will post the created spans to the browser console.
21+
## Examples
22+
23+
### Document Load
24+
25+
To see the results, open the browser at <http://localhost:8090/document-load/> and make sure you have the browser console open. The application is using the `ConsoleSpanExporter` and will post the created spans to the browser console.
2326

2427
The screen will look as follows:
2528

26-
![Screenshot of the running example](images/traces.png)
29+
![Screenshot of the running example](images/document-load.png)
30+
31+
### XMLHttpRequest
32+
33+
To see the results, open the browser at <http://localhost:8090/xml-http-request/> and make sure you have the browser console open. The application is using the `ConsoleSpanExporter` and will post the created spans to the browser console.
34+
The screen will look as follows:
35+
36+
![Screenshot of the running example](images/xml-http-request.png)
37+
2738

2839
## Useful links
2940

‎examples/tracer-web/index.html renamed to ‎examples/tracer-web/examples/document-load/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<title>Web Tracer Example</title>
6+
<title>Document Load Plugin Example</title>
77
<base href="/">
88

99
<!--
@@ -22,7 +22,7 @@
2222

2323
<body>
2424
Example of using Web Tracer with document load plugin with console exporter and collector exporter
25-
<script type="text/javascript" src="/bundle.js"></script>
25+
<script type="text/javascript" src="document-load.js"></script>
2626
<br/>
2727
<button id="button1">Test WebTracer with ZoneScopeManager - async</button>
2828

‎examples/tracer-web/index.js renamed to ‎examples/tracer-web/examples/document-load/index.js

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,4 @@ const getData = (url) => {
8080
});
8181
};
8282

83-
window.addEventListener('load', () => {
84-
prepareClickEvent();
85-
});
83+
window.addEventListener('load', prepareClickEvent);

‎examples/tracer-web/examples/xml-http-request/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>XMLHttpRequest Plugin Example</title>
7+
<base href="/">
8+
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
10+
</head>
11+
12+
<body>
13+
Example of using Web Tracer with XMLHttpRequest plugin with console exporter and collector exporter
14+
<script type="text/javascript" src="xml-http-request.js"></script>
15+
<br/>
16+
<button id="button1">Test</button>
17+
18+
</body>
19+
20+
</html>

‎examples/tracer-web/examples/xml-http-request/index.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
'use strict';
2+
3+
import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/tracing';
4+
import { WebTracer } from '@opentelemetry/web';
5+
import { XMLHttpRequestPlugin } from '@opentelemetry/plugin-xml-http-request';
6+
import { ZoneScopeManager } from '@opentelemetry/scope-zone';
7+
import { CollectorExporter } from '@opentelemetry/exporter-collector';
8+
import { B3Format } from '@opentelemetry/core';
9+
10+
const webTracerWithZone = new WebTracer({
11+
httpTextFormat: new B3Format(),
12+
scopeManager: new ZoneScopeManager(),
13+
plugins: [
14+
new XMLHttpRequestPlugin({
15+
ignoreUrls: [/localhost:8090\/sockjs-node/],
16+
propagateTraceHeaderCorsUrls: [
17+
'https://httpbin.org/get'
18+
]
19+
})
20+
]
21+
});
22+
23+
webTracerWithZone.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
24+
webTracerWithZone.addSpanProcessor(new SimpleSpanProcessor(new CollectorExporter()));
25+
26+
// example of keeping track of scope between async operations
27+
const prepareClickEvent = () => {
28+
const url1 = 'https://httpbin.org/get';
29+
30+
const element = document.getElementById('button1');
31+
32+
const onClick = () => {
33+
for (let i = 0, j = 5; i < j; i++) {
34+
const span1 = webTracerWithZone.startSpan(`files-series-info-${i}`, {
35+
parent: webTracerWithZone.getCurrentSpan()
36+
});
37+
webTracerWithZone.withSpan(span1, () => {
38+
getData(url1).then((data) => {
39+
webTracerWithZone.getCurrentSpan().addEvent('fetching-span1-completed');
40+
span1.end();
41+
});
42+
});
43+
}
44+
};
45+
element.addEventListener('click', onClick);
46+
};
47+
48+
const getData = (url) => {
49+
return new Promise(async (resolve, reject) => {
50+
const req = new XMLHttpRequest();
51+
req.open('GET', url, true);
52+
req.setRequestHeader('Content-Type', 'application/json');
53+
req.setRequestHeader('Accept', 'application/json');
54+
req.send();
55+
req.onload = function () {
56+
resolve();
57+
};
58+
});
59+
};
60+
61+
window.addEventListener('load', prepareClickEvent);

‎examples/tracer-web/images/traces.png renamed to ‎examples/tracer-web/images/document-load.png

File renamed without changes.

‎examples/tracer-web/images/xml-http-request.png

750 KB
Loading

‎examples/tracer-web/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"description": "Example of using @opentelemetry/web in browser",
66
"main": "index.js",
77
"scripts": {
8-
"start": "webpack-dev-server -d --progress --colors --port 8090 --config webpack.config.js --hot --inline --host 0.0.0.0"
8+
"start": "webpack-dev-server -d --progress --colors --port 8090 --config webpack.config.js --hot --inline --host 0.0.0.0 --content-base examples"
99
},
1010
"repository": {
1111
"type": "git",
@@ -36,6 +36,7 @@
3636
"dependencies": {
3737
"@opentelemetry/exporter-collector": "^0.3.0",
3838
"@opentelemetry/plugin-document-load": "^0.3.0",
39+
"@opentelemetry/plugin-xml-http-request": "^0.3.0",
3940
"@opentelemetry/scope-zone": "^0.3.0",
4041
"@opentelemetry/tracing": "^0.3.0",
4142
"@opentelemetry/web": "^0.3.0"

‎examples/tracer-web/webpack.config.js

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
const webpack = require('webpack');
22
const webpackMerge = require('webpack-merge');
33
const path = require('path');
4-
const mainPath = path.resolve('');
54
const directory = path.resolve(__dirname);
65

76
const common = {
87
mode: 'development',
9-
entry: 'index.js',
8+
entry: {
9+
'document-load': 'examples/document-load/index.js',
10+
'xml-http-request': 'examples/xml-http-request/index.js'
11+
},
12+
output: {
13+
path: path.resolve(__dirname, 'dist'),
14+
filename: '[name].js',
15+
sourceMapFilename: '[file].map'
16+
},
1017
target: 'web',
1118
module: {
1219
rules: [
@@ -28,7 +35,6 @@ const common = {
2835
},
2936
resolve: {
3037
modules: [
31-
path.resolve(mainPath, 'src'),
3238
path.resolve(directory),
3339
'node_modules'
3440
],
@@ -38,12 +44,8 @@ const common = {
3844

3945
module.exports = webpackMerge(common, {
4046
devtool: 'eval-source-map',
41-
output: {
42-
filename: 'bundle.js',
43-
sourceMapFilename: '[file].map'
44-
},
4547
devServer: {
46-
contentBase: path.resolve(__dirname),
48+
contentBase: path.resolve(__dirname)
4749
},
4850
plugins: [
4951
new webpack.DefinePlugin({

‎packages/opentelemetry-core/src/common/types.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,13 @@ export interface TimeOriginLegacy {
3232
fetchStart: number;
3333
};
3434
}
35+
36+
/**
37+
* This interface defines the params that are be added to the wrapped function
38+
* using the "shimmer.wrap"
39+
*/
40+
export interface ShimWrapped {
41+
__wrapped: boolean;
42+
__unwrap: Function;
43+
__original: Function;
44+
}

‎packages/opentelemetry-core/src/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,5 @@ export * from './trace/spancontext-utils';
3333
export * from './trace/TracerDelegate';
3434
export * from './trace/TraceState';
3535
export * from './metrics/NoopMeter';
36+
export * from './utils/url';
37+
export * from './utils/wrap';

‎packages/opentelemetry-core/src/utils/url.ts

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/*!
2+
* Copyright 2019, OpenTelemetry Authors
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
/**
18+
* Check if {@param url} matches {@param urlToMatch}
19+
* @param url
20+
* @param urlToMatch
21+
*/
22+
export function urlMatches(url: string, urlToMatch: string | RegExp): boolean {
23+
if (typeof urlToMatch === 'string') {
24+
return url === urlToMatch;
25+
} else {
26+
return !!url.match(urlToMatch);
27+
}
28+
}
29+
/**
30+
* Check if {@param url} should be ignored when comparing against {@param ignoredUrls}
31+
* @param url
32+
* @param ignoredUrls
33+
*/
34+
export function isUrlIgnored(
35+
url: string,
36+
ignoredUrls?: Array<string | RegExp>
37+
): boolean {
38+
if (!ignoredUrls) {
39+
return false;
40+
}
41+
42+
for (const ignoreUrl of ignoredUrls) {
43+
if (urlMatches(url, ignoreUrl)) {
44+
return true;
45+
}
46+
}
47+
return false;
48+
}

‎packages/opentelemetry-core/src/utils/wrap.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/*!
2+
* Copyright 2019, OpenTelemetry Authors
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import { ShimWrapped } from '../common/types';
18+
19+
/**
20+
* Checks if certain function has been already wrapped
21+
* @param func
22+
*/
23+
export function isWrapped(func: any) {
24+
return (
25+
typeof func === 'function' &&
26+
typeof (func as ShimWrapped).__original === 'function' &&
27+
typeof (func as ShimWrapped).__unwrap === 'function' &&
28+
(func as ShimWrapped).__wrapped === true
29+
);
30+
}

‎packages/opentelemetry-core/test/utils/url.test.ts

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
/**
2+
* Copyright 2019, OpenTelemetry Authors
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import * as assert from 'assert';
18+
19+
import { isUrlIgnored } from '../../src';
20+
21+
const urlIgnored = 'url should be ignored';
22+
const urlNotIgnored = 'url should NOT be ignored';
23+
24+
const urlToTest = 'http://myaddress.com/somepath';
25+
26+
describe('BasePlugin - Utils', () => {
27+
describe('isUrlIgnored', () => {
28+
describe('when ignored urls are undefined', () => {
29+
it('should return false', () => {
30+
assert.strictEqual(isUrlIgnored(urlToTest), false, urlNotIgnored);
31+
});
32+
});
33+
describe('when ignored urls are empty', () => {
34+
it('should return false', () => {
35+
assert.strictEqual(isUrlIgnored(urlToTest, []), false, urlNotIgnored);
36+
});
37+
});
38+
describe('when ignored urls is the same as url', () => {
39+
it('should return true', () => {
40+
assert.strictEqual(
41+
isUrlIgnored(urlToTest, ['http://myaddress.com/somepath']),
42+
true,
43+
urlIgnored
44+
);
45+
});
46+
});
47+
describe('when url is part of ignored urls', () => {
48+
it('should return false', () => {
49+
assert.strictEqual(
50+
isUrlIgnored(urlToTest, ['http://myaddress.com/some']),
51+
false,
52+
urlNotIgnored
53+
);
54+
});
55+
});
56+
describe('when ignored urls is part of url - REGEXP', () => {
57+
it('should return true', () => {
58+
assert.strictEqual(
59+
isUrlIgnored(urlToTest, [/.+?myaddress\.com/]),
60+
true,
61+
urlIgnored
62+
);
63+
});
64+
});
65+
describe('when url is part of ignored urls - REGEXP', () => {
66+
it('should return false', () => {
67+
assert.strictEqual(
68+
isUrlIgnored(urlToTest, [/http:\/\/myaddress\.com\/somepath2/]),
69+
false,
70+
urlNotIgnored
71+
);
72+
});
73+
});
74+
});
75+
});

0 commit comments

Comments
 (0)