Skip to content

Commit bc583b8

Browse files
obecnymayurkale22
obecny
and
mayurkale22
committed
XMLHttpRequest (#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+
}

0 commit comments

Comments
 (0)