Skip to content

Commit f125022

Browse files
trentmtrentm
authored
chore(examples): lint examples/web using shared top-level eslint config (#2912)
Refs: #2891
1 parent 747e069 commit f125022

File tree

6 files changed

+182
-56
lines changed

6 files changed

+182
-56
lines changed

‎examples/web/.eslintrc.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*
2+
* Copyright The 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+
'use strict';
18+
19+
const baseConfig = require('../../eslint.config');
20+
21+
module.exports = {
22+
...baseConfig,
23+
env: {
24+
browser: true,
25+
},
26+
};

‎examples/web/examples/document-load/index.js

Lines changed: 57 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,36 @@
1+
/*
2+
* Copyright The 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+
'use strict';
18+
119
import { context, trace } from '@opentelemetry/api';
2-
import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
20+
import {
21+
ConsoleSpanExporter,
22+
SimpleSpanProcessor,
23+
} from '@opentelemetry/sdk-trace-base';
324
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
425
import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load';
526
import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';
627
import { ZoneContextManager } from '@opentelemetry/context-zone';
728
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
829
import { B3Propagator } from '@opentelemetry/propagator-b3';
9-
import { CompositePropagator, W3CTraceContextPropagator } from '@opentelemetry/core';
30+
import {
31+
CompositePropagator,
32+
W3CTraceContextPropagator,
33+
} from '@opentelemetry/core';
1034
import { registerInstrumentations } from '@opentelemetry/instrumentation';
1135
import { Resource } from '@opentelemetry/resources';
1236
import { ATTR_SERVICE_NAME } from '@opentelemetry/semantic-conventions';
@@ -24,68 +48,66 @@ const provider = new WebTracerProvider({
2448
provider.register({
2549
contextManager: new ZoneContextManager(),
2650
propagator: new CompositePropagator({
27-
propagators: [
28-
new B3Propagator(),
29-
new W3CTraceContextPropagator(),
30-
],
51+
propagators: [new B3Propagator(), new W3CTraceContextPropagator()],
3152
}),
3253
});
3354
registerInstrumentations({
3455
instrumentations: [
3556
new DocumentLoadInstrumentation(),
3657
new XMLHttpRequestInstrumentation({
3758
ignoreUrls: [/localhost/],
38-
propagateTraceHeaderCorsUrls: [
39-
'http://localhost:8090',
40-
],
59+
propagateTraceHeaderCorsUrls: ['http://localhost:8090'],
4160
}),
4261
],
4362
tracerProvider: provider,
4463
});
4564

4665
const tracer = provider.getTracer('example-document-load');
4766

48-
const getData = (url) => new Promise((resolve, reject) => {
49-
// eslint-disable-next-line no-undef
50-
const req = new XMLHttpRequest();
51-
req.open('GET', url, true);
52-
req.send();
53-
req.onload = () => {
54-
let json;
55-
try {
56-
json = JSON.parse(req.responseText);
57-
} catch (e) {
58-
reject(e);
59-
}
60-
resolve(json);
61-
};
62-
});
67+
const getData = url =>
68+
new Promise((resolve, reject) => {
69+
// eslint-disable-next-line no-undef
70+
const req = new XMLHttpRequest();
71+
req.open('GET', url, true);
72+
req.send();
73+
req.onload = () => {
74+
let json;
75+
try {
76+
json = JSON.parse(req.responseText);
77+
} catch (e) {
78+
reject(e);
79+
}
80+
resolve(json);
81+
};
82+
});
6383

6484
// example of keeping track of context between async operations
6585
const prepareClickEvent = () => {
66-
const url1 = 'https://raw.githubusercontent.com/open-telemetry/opentelemetry-js/main/package.json';
67-
const url2 = 'https://raw.githubusercontent.com/open-telemetry/opentelemetry-js/main/packages/opentelemetry-sdk-trace-web/package.json';
86+
const url1 =
87+
'https://raw.githubusercontent.com/open-telemetry/opentelemetry-js/main/package.json';
88+
const url2 =
89+
'https://raw.githubusercontent.com/open-telemetry/opentelemetry-js/main/packages/opentelemetry-sdk-trace-web/package.json';
6890

6991
const element = document.getElementById('button1');
7092

7193
const onClick = () => {
7294
let count = 0;
95+
const mainSpan = tracer.startSpan('click button');
7396

7497
function finish() {
75-
count++;
98+
count += 1;
7699
if (count === 2) {
77100
mainSpan.end();
78101
}
79102
}
80103

81-
const mainSpan = tracer.startSpan('click button');
82104
context.with(trace.setSpan(context.active(), mainSpan), () => {
83105
const span1 = tracer.startSpan('files-series-info-1');
84106

85107
const span2 = tracer.startSpan('files-series-info-2');
86108

87109
context.with(trace.setSpan(context.active(), span1), () => {
88-
getData(url1).then((data) => {
110+
getData(url1).then(data => {
89111
const curSpan = trace.getSpan(context.active());
90112
console.log('current span is span1', curSpan === span1);
91113
console.log('info from package.json', data.description, data.version);
@@ -96,11 +118,15 @@ const prepareClickEvent = () => {
96118
});
97119

98120
context.with(trace.setSpan(context.active(), span2), () => {
99-
getData(url2).then((data) => {
121+
getData(url2).then(data => {
100122
setTimeout(() => {
101123
const curSpan = trace.getSpan(context.active());
102124
console.log('current span is span2', curSpan === span2);
103-
console.log('info from package.json', data.description, data.version);
125+
console.log(
126+
'info from package.json',
127+
data.description,
128+
data.version
129+
);
104130
curSpan.addEvent('fetching-span2-completed');
105131
span2.end();
106132
finish();

‎examples/web/examples/meta/index.js

Lines changed: 38 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,25 @@
1-
import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
1+
/*
2+
* Copyright The 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+
'use strict';
18+
19+
import {
20+
ConsoleSpanExporter,
21+
SimpleSpanProcessor,
22+
} from '@opentelemetry/sdk-trace-base';
223
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
324
import { ZoneContextManager } from '@opentelemetry/context-zone';
425
import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
@@ -25,9 +46,7 @@ providerWithZone.register({
2546
const instrumentations = getWebAutoInstrumentations({
2647
'@opentelemetry/instrumentation-xml-http-request': {
2748
ignoreUrls: [/localhost/],
28-
propagateTraceHeaderCorsUrls: [
29-
'http://localhost:8090',
30-
],
49+
propagateTraceHeaderCorsUrls: ['http://localhost:8090'],
3150
},
3251
});
3352

@@ -39,7 +58,7 @@ registerInstrumentations({
3958
let lastButtonId = 0;
4059

4160
function btnAddClick() {
42-
lastButtonId++;
61+
lastButtonId += 1;
4362
const btn = document.createElement('button');
4463
// for easier testing of element xpath
4564
let navigate = false;
@@ -54,6 +73,7 @@ function btnAddClick() {
5473
}
5574

5675
function prepareClickEvents() {
76+
// eslint-disable-next-line no-plusplus
5777
for (let i = 0; i < 5; i++) {
5878
btnAddClick();
5979
}
@@ -63,8 +83,16 @@ function prepareClickEvents() {
6383

6484
function onClick(navigate) {
6585
if (navigate) {
66-
history.pushState({ test: 'testing' }, '', `${location.pathname}`);
67-
history.pushState({ test: 'testing' }, '', `${location.pathname}#foo=bar1`);
86+
window.history.pushState(
87+
{ test: 'testing' },
88+
'',
89+
`${window.location.pathname}`
90+
);
91+
window.history.pushState(
92+
{ test: 'testing' },
93+
'',
94+
`${window.location.pathname}#foo=bar1`
95+
);
6896
}
6997
getData('https://httpbin.org/get?a=1').then(() => {
7098
getData('https://httpbin.org/get?a=1').then(() => {
@@ -77,14 +105,14 @@ function onClick(navigate) {
77105
});
78106
}
79107

80-
function getData(url, resolve) {
81-
return new Promise(async (resolve, reject) => {
108+
function getData(url) {
109+
return new Promise((resolve, _reject) => {
82110
const req = new XMLHttpRequest();
83111
req.open('GET', url, true);
84112
req.setRequestHeader('Content-Type', 'application/json');
85113
req.setRequestHeader('Accept', 'application/json');
86114
req.send();
87-
req.onload = function () {
115+
req.onload = function onLoad() {
88116
resolve();
89117
};
90118
});

‎examples/web/examples/user-interaction/index.js

Lines changed: 38 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,25 @@
1-
import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
1+
/*
2+
* Copyright The 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+
'use strict';
18+
19+
import {
20+
ConsoleSpanExporter,
21+
SimpleSpanProcessor,
22+
} from '@opentelemetry/sdk-trace-base';
223
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
324
import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
425
import { ZoneContextManager } from '@opentelemetry/context-zone';
@@ -29,9 +50,7 @@ registerInstrumentations({
2950
new UserInteractionInstrumentation(),
3051
new XMLHttpRequestInstrumentation({
3152
ignoreUrls: [/localhost/],
32-
propagateTraceHeaderCorsUrls: [
33-
'http://localhost:8090',
34-
],
53+
propagateTraceHeaderCorsUrls: ['http://localhost:8090'],
3554
}),
3655
],
3756
tracerProvider: providerWithZone,
@@ -40,7 +59,7 @@ registerInstrumentations({
4059
let lastButtonId = 0;
4160

4261
function btnAddClick() {
43-
lastButtonId++;
62+
lastButtonId += 1;
4463
const btn = document.createElement('button');
4564
// for easier testing of element xpath
4665
let navigate = false;
@@ -55,6 +74,7 @@ function btnAddClick() {
5574
}
5675

5776
function prepareClickEvents() {
77+
// eslint-disable-next-line no-plusplus
5878
for (let i = 0; i < 5; i++) {
5979
btnAddClick();
6080
}
@@ -64,8 +84,16 @@ function prepareClickEvents() {
6484

6585
function onClick(navigate) {
6686
if (navigate) {
67-
history.pushState({ test: 'testing' }, '', `${location.pathname}`);
68-
history.pushState({ test: 'testing' }, '', `${location.pathname}#foo=bar1`);
87+
window.history.pushState(
88+
{ test: 'testing' },
89+
'',
90+
`${window.location.pathname}`
91+
);
92+
window.history.pushState(
93+
{ test: 'testing' },
94+
'',
95+
`${window.location.pathname}#foo=bar1`
96+
);
6997
}
7098
getData('https://httpbin.org/get?a=1').then(() => {
7199
getData('https://httpbin.org/get?a=1').then(() => {
@@ -78,14 +106,14 @@ function onClick(navigate) {
78106
});
79107
}
80108

81-
function getData(url, resolve) {
82-
return new Promise(async (resolve, reject) => {
109+
function getData(url) {
110+
return new Promise((resolve, _reject) => {
83111
const req = new XMLHttpRequest();
84112
req.open('GET', url, true);
85113
req.setRequestHeader('Content-Type', 'application/json');
86114
req.setRequestHeader('Accept', 'application/json');
87115
req.send();
88-
req.onload = function () {
116+
req.onload = function onLoad() {
89117
resolve();
90118
};
91119
});

‎examples/web/package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
"description": "Example of using web plugins in browser",
66
"main": "index.js",
77
"scripts": {
8+
"lint": "eslint . --ext=ts,js,mjs",
9+
"lint:fix": "eslint . --ext=ts,js,mjs --fix",
810
"docker:start": "cd ./docker && docker compose down && docker compose up",
911
"docker:startd": "cd ./docker && docker compose down && docker compose up -d",
1012
"start": "webpack-dev-server --progress --color --port 8090 --config ./webpack.config.js --hot --host 0.0.0.0"
@@ -39,12 +41,15 @@
3941
"@opentelemetry/api": "^1.4.1",
4042
"@opentelemetry/auto-instrumentations-web": "^0.32.2",
4143
"@opentelemetry/context-zone": "^1.13.0",
44+
"@opentelemetry/core": "^1.13.0",
4245
"@opentelemetry/exporter-trace-otlp-http": "^0.39.1",
4346
"@opentelemetry/instrumentation": "^0.39.1",
4447
"@opentelemetry/instrumentation-document-load": "^0.32.2",
4548
"@opentelemetry/instrumentation-user-interaction": "^0.32.3",
4649
"@opentelemetry/instrumentation-xml-http-request": "^0.39.1",
4750
"@opentelemetry/propagator-b3": "^1.13.0",
51+
"@opentelemetry/resources": "^1.13.0",
52+
"@opentelemetry/sdk-trace-base": "^1.13.0",
4853
"@opentelemetry/sdk-trace-web": "^1.13.0",
4954
"@opentelemetry/semantic-conventions": "^1.27.0"
5055
},

0 commit comments

Comments
 (0)