chore(examples): lint examples/web using shared top-level eslint config

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,
+  },
+};

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,68 +48,66 @@ const provider = new WebTracerProvider({
 provider.register({
   contextManager: new ZoneContextManager(),
   propagator: new CompositePropagator({
-    propagators: [
-      new B3Propagator(),
-      new W3CTraceContextPropagator(),
-    ],
+    propagators: [new B3Propagator(), new W3CTraceContextPropagator()],
   }),
 });
 registerInstrumentations({
   instrumentations: [
     new DocumentLoadInstrumentation(),
     new XMLHttpRequestInstrumentation({
       ignoreUrls: [/localhost/],
-      propagateTraceHeaderCorsUrls: [
-        'http://localhost:8090',
-      ],
+      propagateTraceHeaderCorsUrls: ['http://localhost:8090'],
     }),
   ],
   tracerProvider: provider,
 });
 
 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();

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();
     };
   });

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();
     };
   });

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"
   },