diff --git a/examples/web/.eslintrc.js b/examples/web/.eslintrc.js new file mode 100644 index 0000000000..718b15e08e --- /dev/null +++ b/examples/web/.eslintrc.js @@ -0,0 +1,26 @@ +/* + * Copyright The OpenTelemetry Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict'; + +const baseConfig = require('../../eslint.config'); + +module.exports = { + ...baseConfig, + env: { + browser: true, + }, +}; diff --git a/examples/web/examples/document-load/index.js b/examples/web/examples/document-load/index.js index 1954625caf..e89ace47a6 100644 --- a/examples/web/examples/document-load/index.js +++ b/examples/web/examples/document-load/index.js @@ -1,12 +1,36 @@ +/* + * Copyright The OpenTelemetry Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict'; + import { context, trace } from '@opentelemetry/api'; -import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { + ConsoleSpanExporter, + SimpleSpanProcessor, +} from '@opentelemetry/sdk-trace-base'; import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; import { DocumentLoadInstrumentation } from '@opentelemetry/instrumentation-document-load'; import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request'; import { ZoneContextManager } from '@opentelemetry/context-zone'; import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; import { B3Propagator } from '@opentelemetry/propagator-b3'; -import { CompositePropagator, W3CTraceContextPropagator } from '@opentelemetry/core'; +import { + CompositePropagator, + W3CTraceContextPropagator, +} from '@opentelemetry/core'; import { registerInstrumentations } from '@opentelemetry/instrumentation'; import { Resource } from '@opentelemetry/resources'; import { ATTR_SERVICE_NAME } from '@opentelemetry/semantic-conventions'; @@ -24,10 +48,7 @@ const provider = new WebTracerProvider({ provider.register({ contextManager: new ZoneContextManager(), propagator: new CompositePropagator({ - propagators: [ - new B3Propagator(), - new W3CTraceContextPropagator(), - ], + propagators: [new B3Propagator(), new W3CTraceContextPropagator()], }), }); registerInstrumentations({ @@ -35,9 +56,7 @@ registerInstrumentations({ new DocumentLoadInstrumentation(), new XMLHttpRequestInstrumentation({ ignoreUrls: [/localhost/], - propagateTraceHeaderCorsUrls: [ - 'http://localhost:8090', - ], + propagateTraceHeaderCorsUrls: ['http://localhost:8090'], }), ], tracerProvider: provider, @@ -45,47 +64,50 @@ registerInstrumentations({ const tracer = provider.getTracer('example-document-load'); -const getData = (url) => new Promise((resolve, reject) => { - // eslint-disable-next-line no-undef - const req = new XMLHttpRequest(); - req.open('GET', url, true); - req.send(); - req.onload = () => { - let json; - try { - json = JSON.parse(req.responseText); - } catch (e) { - reject(e); - } - resolve(json); - }; -}); +const getData = url => + new Promise((resolve, reject) => { + // eslint-disable-next-line no-undef + const req = new XMLHttpRequest(); + req.open('GET', url, true); + req.send(); + req.onload = () => { + let json; + try { + json = JSON.parse(req.responseText); + } catch (e) { + reject(e); + } + resolve(json); + }; + }); // example of keeping track of context between async operations const prepareClickEvent = () => { - const url1 = 'https://raw.githubusercontent.com/open-telemetry/opentelemetry-js/main/package.json'; - const url2 = 'https://raw.githubusercontent.com/open-telemetry/opentelemetry-js/main/packages/opentelemetry-sdk-trace-web/package.json'; + const url1 = + 'https://raw.githubusercontent.com/open-telemetry/opentelemetry-js/main/package.json'; + const url2 = + 'https://raw.githubusercontent.com/open-telemetry/opentelemetry-js/main/packages/opentelemetry-sdk-trace-web/package.json'; const element = document.getElementById('button1'); const onClick = () => { let count = 0; + const mainSpan = tracer.startSpan('click button'); function finish() { - count++; + count += 1; if (count === 2) { mainSpan.end(); } } - const mainSpan = tracer.startSpan('click button'); context.with(trace.setSpan(context.active(), mainSpan), () => { const span1 = tracer.startSpan('files-series-info-1'); const span2 = tracer.startSpan('files-series-info-2'); context.with(trace.setSpan(context.active(), span1), () => { - getData(url1).then((data) => { + getData(url1).then(data => { const curSpan = trace.getSpan(context.active()); console.log('current span is span1', curSpan === span1); console.log('info from package.json', data.description, data.version); @@ -96,11 +118,15 @@ const prepareClickEvent = () => { }); context.with(trace.setSpan(context.active(), span2), () => { - getData(url2).then((data) => { + getData(url2).then(data => { setTimeout(() => { const curSpan = trace.getSpan(context.active()); console.log('current span is span2', curSpan === span2); - console.log('info from package.json', data.description, data.version); + console.log( + 'info from package.json', + data.description, + data.version + ); curSpan.addEvent('fetching-span2-completed'); span2.end(); finish(); diff --git a/examples/web/examples/meta/index.js b/examples/web/examples/meta/index.js index d8573498ea..c780e5163d 100644 --- a/examples/web/examples/meta/index.js +++ b/examples/web/examples/meta/index.js @@ -1,4 +1,25 @@ -import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'; +/* + * Copyright The OpenTelemetry Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict'; + +import { + ConsoleSpanExporter, + SimpleSpanProcessor, +} from '@opentelemetry/sdk-trace-base'; import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; import { ZoneContextManager } from '@opentelemetry/context-zone'; import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; @@ -25,9 +46,7 @@ providerWithZone.register({ const instrumentations = getWebAutoInstrumentations({ '@opentelemetry/instrumentation-xml-http-request': { ignoreUrls: [/localhost/], - propagateTraceHeaderCorsUrls: [ - 'http://localhost:8090', - ], + propagateTraceHeaderCorsUrls: ['http://localhost:8090'], }, }); @@ -39,7 +58,7 @@ registerInstrumentations({ let lastButtonId = 0; function btnAddClick() { - lastButtonId++; + lastButtonId += 1; const btn = document.createElement('button'); // for easier testing of element xpath let navigate = false; @@ -54,6 +73,7 @@ function btnAddClick() { } function prepareClickEvents() { + // eslint-disable-next-line no-plusplus for (let i = 0; i < 5; i++) { btnAddClick(); } @@ -63,8 +83,16 @@ function prepareClickEvents() { function onClick(navigate) { if (navigate) { - history.pushState({ test: 'testing' }, '', `${location.pathname}`); - history.pushState({ test: 'testing' }, '', `${location.pathname}#foo=bar1`); + window.history.pushState( + { test: 'testing' }, + '', + `${window.location.pathname}` + ); + window.history.pushState( + { test: 'testing' }, + '', + `${window.location.pathname}#foo=bar1` + ); } getData('https://httpbin.org/get?a=1').then(() => { getData('https://httpbin.org/get?a=1').then(() => { @@ -77,14 +105,14 @@ function onClick(navigate) { }); } -function getData(url, resolve) { - return new Promise(async (resolve, reject) => { +function getData(url) { + return new Promise((resolve, _reject) => { const req = new XMLHttpRequest(); req.open('GET', url, true); req.setRequestHeader('Content-Type', 'application/json'); req.setRequestHeader('Accept', 'application/json'); req.send(); - req.onload = function () { + req.onload = function onLoad() { resolve(); }; }); diff --git a/examples/web/examples/user-interaction/index.js b/examples/web/examples/user-interaction/index.js index 519b1022d4..1907a85360 100644 --- a/examples/web/examples/user-interaction/index.js +++ b/examples/web/examples/user-interaction/index.js @@ -1,4 +1,25 @@ -import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'; +/* + * Copyright The OpenTelemetry Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +'use strict'; + +import { + ConsoleSpanExporter, + SimpleSpanProcessor, +} from '@opentelemetry/sdk-trace-base'; import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction'; import { ZoneContextManager } from '@opentelemetry/context-zone'; @@ -29,9 +50,7 @@ registerInstrumentations({ new UserInteractionInstrumentation(), new XMLHttpRequestInstrumentation({ ignoreUrls: [/localhost/], - propagateTraceHeaderCorsUrls: [ - 'http://localhost:8090', - ], + propagateTraceHeaderCorsUrls: ['http://localhost:8090'], }), ], tracerProvider: providerWithZone, @@ -40,7 +59,7 @@ registerInstrumentations({ let lastButtonId = 0; function btnAddClick() { - lastButtonId++; + lastButtonId += 1; const btn = document.createElement('button'); // for easier testing of element xpath let navigate = false; @@ -55,6 +74,7 @@ function btnAddClick() { } function prepareClickEvents() { + // eslint-disable-next-line no-plusplus for (let i = 0; i < 5; i++) { btnAddClick(); } @@ -64,8 +84,16 @@ function prepareClickEvents() { function onClick(navigate) { if (navigate) { - history.pushState({ test: 'testing' }, '', `${location.pathname}`); - history.pushState({ test: 'testing' }, '', `${location.pathname}#foo=bar1`); + window.history.pushState( + { test: 'testing' }, + '', + `${window.location.pathname}` + ); + window.history.pushState( + { test: 'testing' }, + '', + `${window.location.pathname}#foo=bar1` + ); } getData('https://httpbin.org/get?a=1').then(() => { getData('https://httpbin.org/get?a=1').then(() => { @@ -78,14 +106,14 @@ function onClick(navigate) { }); } -function getData(url, resolve) { - return new Promise(async (resolve, reject) => { +function getData(url) { + return new Promise((resolve, _reject) => { const req = new XMLHttpRequest(); req.open('GET', url, true); req.setRequestHeader('Content-Type', 'application/json'); req.setRequestHeader('Accept', 'application/json'); req.send(); - req.onload = function () { + req.onload = function onLoad() { resolve(); }; }); diff --git a/examples/web/package.json b/examples/web/package.json index cd10bfd3d0..53404daee0 100644 --- a/examples/web/package.json +++ b/examples/web/package.json @@ -5,6 +5,8 @@ "description": "Example of using web plugins in browser", "main": "index.js", "scripts": { + "lint": "eslint . --ext=ts,js,mjs", + "lint:fix": "eslint . --ext=ts,js,mjs --fix", "docker:start": "cd ./docker && docker compose down && docker compose up", "docker:startd": "cd ./docker && docker compose down && docker compose up -d", "start": "webpack-dev-server --progress --color --port 8090 --config ./webpack.config.js --hot --host 0.0.0.0" @@ -39,12 +41,15 @@ "@opentelemetry/api": "^1.4.1", "@opentelemetry/auto-instrumentations-web": "^0.32.2", "@opentelemetry/context-zone": "^1.13.0", + "@opentelemetry/core": "^1.13.0", "@opentelemetry/exporter-trace-otlp-http": "^0.39.1", "@opentelemetry/instrumentation": "^0.39.1", "@opentelemetry/instrumentation-document-load": "^0.32.2", "@opentelemetry/instrumentation-user-interaction": "^0.32.3", "@opentelemetry/instrumentation-xml-http-request": "^0.39.1", "@opentelemetry/propagator-b3": "^1.13.0", + "@opentelemetry/resources": "^1.13.0", + "@opentelemetry/sdk-trace-base": "^1.13.0", "@opentelemetry/sdk-trace-web": "^1.13.0", "@opentelemetry/semantic-conventions": "^1.27.0" }, diff --git a/examples/web/webpack.config.js b/examples/web/webpack.config.js index 31905640e1..dbdb550f6f 100644 --- a/examples/web/webpack.config.js +++ b/examples/web/webpack.config.js @@ -1,3 +1,19 @@ +/* + * Copyright The OpenTelemetry Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * https://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + 'use strict'; const webpack = require('webpack'); @@ -38,10 +54,7 @@ const common = { ], }, resolve: { - modules: [ - path.resolve(directory), - 'node_modules', - ], + modules: [path.resolve(directory), 'node_modules'], extensions: ['.ts', '.js', '.jsx', '.json'], }, }; @@ -49,7 +62,7 @@ const common = { module.exports = webpackMerge(common, { devtool: 'eval-source-map', devServer: { - static: path.resolve(path.join(__dirname, "examples")), + static: path.resolve(path.join(__dirname, 'examples')), }, plugins: [ new webpack.DefinePlugin({