From c23e3254850c20fe358cb3d41b8ab493a71d475b Mon Sep 17 00:00:00 2001 From: Nev Wylie <54870357+MSNev@users.noreply.github.com> Date: Thu, 9 Dec 2021 09:29:40 -0800 Subject: [PATCH 1/3] chore: update and fix tracer-web examples --- examples/tracer-web/README.md | 72 +++++++++++++ examples/tracer-web/examples/fetch/index.js | 10 +- .../tracer-web/examples/fetchXhr/index.html | 20 ++++ .../tracer-web/examples/fetchXhr/index.js | 100 +++++++++++++++++ .../tracer-web/examples/fetchXhrB3/index.html | 20 ++++ .../tracer-web/examples/fetchXhrB3/index.js | 102 ++++++++++++++++++ examples/tracer-web/examples/metrics/index.js | 8 +- .../examples/xml-http-request/index.js | 6 +- examples/tracer-web/examples/zipkin/index.js | 2 + examples/tracer-web/package.json | 43 ++++---- ...ebpack.config.js => webpack.dev.config.js} | 14 ++- examples/tracer-web/webpack.prod.config.js | 68 ++++++++++++ 12 files changed, 436 insertions(+), 29 deletions(-) create mode 100644 examples/tracer-web/examples/fetchXhr/index.html create mode 100644 examples/tracer-web/examples/fetchXhr/index.js create mode 100644 examples/tracer-web/examples/fetchXhrB3/index.html create mode 100644 examples/tracer-web/examples/fetchXhrB3/index.js rename examples/tracer-web/{webpack.config.js => webpack.dev.config.js} (74%) create mode 100644 examples/tracer-web/webpack.prod.config.js diff --git a/examples/tracer-web/README.md b/examples/tracer-web/README.md index a8d3f76fd6..8b675aa718 100644 --- a/examples/tracer-web/README.md +++ b/examples/tracer-web/README.md @@ -18,10 +18,32 @@ npm start By default, the application will run on port `8090`. +Other options for running the application, this serves the same examples using different source file processing so you can review the different effects on the resulting bundle sizes that are loaded via the browser. + +| Command | Description +|---------|------------ +| `npm start` (Default) | Serve the raw development bundles compressed via GZip +| `npm run start-nc` | Serve the raw development bundles uncompressed +| `npm run start-prod` | Serve the minified production bundles compressed via GZip +| `npm run start-prodnc` | Serve the minified production bundles uncompressed + +The development modes includes source maps via the webpack devtool `eval-source-map` mode which substantially increases the size of the bundles. + ## Examples +The examples includes several variants so that you can see how to mix and match individual components and the impact this can have on the resulting bundle size. + ### XMLHttpRequest +This example shows how to use the XMLHttpRequest Instrumentation with the OTLP Trace exporter and with the B3 Propagator. + +Included Components +- XMLHttpRequestInstrumentation +- ZoneContextManager +- OTLPTraceExporter +- WebTracerProvider +- B3Propagator + To see the results, open the browser at 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. The screen will look as follows: @@ -29,8 +51,58 @@ The screen will look as follows: ### Fetch +This example shows how to use the Fetch Instrumentation with the OTLP Trace exporter and with the B3 Propagator. + +Included Components +- FetchInstrumentation +- ZoneContextManager +- OTLPTraceExporter +- WebTracerProvider +- B3Propagator + To see the results, open the browser at 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. +### FetchXhr + +This example shows how to use both the XMLHttpRequest and Fetch Instrumentations with the OTLP Trace exporter but without the B3 Propagator. + +Included Components +- XMLHttpRequestInstrumentation +- FetchInstrumentation +- ZoneContextManager +- OTLPTraceExporter +- WebTracerProvider + +### FetchXhrB3 + +This example shows how to use both the XMLHttpRequest and Fetch Instrumentations with the OTLP Trace exporter and with the B3 Propagator + +Included Components +- XMLHttpRequestInstrumentation +- FetchInstrumentation +- ZoneContextManager +- OTLPTraceExporter +- WebTracerProvider +- B3Propagator + +### Metrics + +This example shows how to use the OTLP Metric Exporter, it does not include the Trace Exporter. Does not include traces + +Included Components +- OTLPMetricExporter +- MeterProvider +- Resource +- SemanticResourceAttributes + +### Zipkin + +This example show a simple usage of the ZipKin Exporter with the Web Tracer Provider + +Included Components +- WebTracerProvider +- ZipkinExporter + ## Useful links - For more information on OpenTelemetry, visit: diff --git a/examples/tracer-web/examples/fetch/index.js b/examples/tracer-web/examples/fetch/index.js index 689a119afd..6487c306f9 100644 --- a/examples/tracer-web/examples/fetch/index.js +++ b/examples/tracer-web/examples/fetch/index.js @@ -1,7 +1,6 @@ -'use strict'; import { context, trace } from '@opentelemetry/api'; import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'; -import { OTLPTraceExporter } from '@opentelemetry/exporter-otlp-http'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch'; import { ZoneContextManager } from '@opentelemetry/context-zone'; @@ -31,10 +30,11 @@ registerInstrumentations({ const webTracerWithZone = provider.getTracer('example-tracer-web'); +// eslint-disable-next-line no-undef const getData = (url) => fetch(url, { method: 'GET', headers: { - 'Accept': 'application/json', + Accept: 'application/json', 'Content-Type': 'application/json', }, }); @@ -43,10 +43,11 @@ const getData = (url) => fetch(url, { const prepareClickEvent = () => { const url = 'https://httpbin.org/get'; + // eslint-disable-next-line no-undef const element = document.getElementById('button1'); const onClick = () => { - const singleSpan = webTracerWithZone.startSpan(`files-series-info`); + const singleSpan = webTracerWithZone.startSpan('files-series-info'); context.with(trace.setSpan(context.active(), singleSpan), () => { getData(url).then((_data) => { trace.getSpan(context.active()).addEvent('fetching-single-span-completed'); @@ -66,4 +67,5 @@ const prepareClickEvent = () => { element.addEventListener('click', onClick); }; +// eslint-disable-next-line no-undef window.addEventListener('load', prepareClickEvent); diff --git a/examples/tracer-web/examples/fetchXhr/index.html b/examples/tracer-web/examples/fetchXhr/index.html new file mode 100644 index 0000000000..841d5ee3ed --- /dev/null +++ b/examples/tracer-web/examples/fetchXhr/index.html @@ -0,0 +1,20 @@ + + + + + + Fetch Plugin Example + + + + + + + Example of using Web Tracer with Fetch and XMLHttpRequest plugins with console exporter and collector exporter without the B3 Propagator + +
+ + + + + diff --git a/examples/tracer-web/examples/fetchXhr/index.js b/examples/tracer-web/examples/fetchXhr/index.js new file mode 100644 index 0000000000..ec8eeee6b0 --- /dev/null +++ b/examples/tracer-web/examples/fetchXhr/index.js @@ -0,0 +1,100 @@ +import { context, trace } from '@opentelemetry/api'; +import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch'; +import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request'; +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; + +const provider = new WebTracerProvider(); +provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); +provider.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter())); +provider.register({ + contextManager: new ZoneContextManager(), +}); + +registerInstrumentations({ + instrumentations: [ + new FetchInstrumentation({ + ignoreUrls: [/localhost:8090\/sockjs-node/], + propagateTraceHeaderCorsUrls: [ + 'https://cors-test.appspot.com/test', + 'https://httpbin.org/get', + ], + clearTimingResources: true, + }), + ], +}); + +registerInstrumentations({ + instrumentations: [ + new XMLHttpRequestInstrumentation({ + ignoreUrls: [/localhost:8090\/sockjs-node/], + propagateTraceHeaderCorsUrls: [ + 'https://httpbin.org/get', + ], + }), + ], +}); + +const webTracerWithZone = provider.getTracer('example-tracer-web'); + +// eslint-disable-next-line no-undef +const getData = (url) => fetch(url, { + method: 'GET', + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + }, +}); + +const getDataXhr = (url) => new Promise((resolve, reject) => { + // eslint-disable-next-line no-undef + const req = new XMLHttpRequest(); + req.open('GET', url, true); + req.setRequestHeader('Content-Type', 'application/json'); + req.setRequestHeader('Accept', 'application/json'); + req.onload = () => { + resolve(); + }; + req.onerror = () => { + reject(); + }; + req.send(); +}); + +// example of keeping track of context between async operations +const prepareClickEvent = () => { + const url = 'https://httpbin.org/get'; + + // eslint-disable-next-line no-undef + const element1 = document.getElementById('button1'); + + // eslint-disable-next-line no-undef + const element2 = document.getElementById('button2'); + + const clickHandler = (fetchFn) => () => { + const singleSpan = webTracerWithZone.startSpan('files-series-info'); + context.with(trace.setSpan(context.active(), singleSpan), () => { + fetchFn(url).then((_data) => { + trace.getSpan(context.active()).addEvent('fetching-single-span-completed'); + singleSpan.end(); + }); + }); + for (let i = 0, j = 5; i < j; i += 1) { + const span = webTracerWithZone.startSpan(`files-series-info-${i}`); + context.with(trace.setSpan(context.active(), span), () => { + fetchFn(url).then((_data) => { + trace.getSpan(context.active()).addEvent(`fetching-span-${i}-completed`); + span.end(); + }); + }); + } + }; + element1.addEventListener('click', clickHandler(getData)); + element2.addEventListener('click', clickHandler(getDataXhr)); +}; + +// eslint-disable-next-line no-undef +window.addEventListener('load', prepareClickEvent); diff --git a/examples/tracer-web/examples/fetchXhrB3/index.html b/examples/tracer-web/examples/fetchXhrB3/index.html new file mode 100644 index 0000000000..af3fee081a --- /dev/null +++ b/examples/tracer-web/examples/fetchXhrB3/index.html @@ -0,0 +1,20 @@ + + + + + + Fetch Plugin Example + + + + + + + Example of using Web Tracer with Fetch and XMLHttpRequest plugins with console exporter and collector exporter with B3 Propagator + +
+ + + + + diff --git a/examples/tracer-web/examples/fetchXhrB3/index.js b/examples/tracer-web/examples/fetchXhrB3/index.js new file mode 100644 index 0000000000..5258ec5e73 --- /dev/null +++ b/examples/tracer-web/examples/fetchXhrB3/index.js @@ -0,0 +1,102 @@ +import { context, trace } from '@opentelemetry/api'; +import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; +import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; +import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch'; +import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request'; +import { ZoneContextManager } from '@opentelemetry/context-zone'; +import { B3Propagator } from '@opentelemetry/propagator-b3'; +import { registerInstrumentations } from '@opentelemetry/instrumentation'; + +const provider = new WebTracerProvider(); +provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); +provider.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter())); +provider.register({ + contextManager: new ZoneContextManager(), + propagator: new B3Propagator(), +}); + +registerInstrumentations({ + instrumentations: [ + new FetchInstrumentation({ + ignoreUrls: [/localhost:8090\/sockjs-node/], + propagateTraceHeaderCorsUrls: [ + 'https://cors-test.appspot.com/test', + 'https://httpbin.org/get', + ], + clearTimingResources: true, + }), + ], +}); + +registerInstrumentations({ + instrumentations: [ + new XMLHttpRequestInstrumentation({ + ignoreUrls: [/localhost:8090\/sockjs-node/], + propagateTraceHeaderCorsUrls: [ + 'https://httpbin.org/get', + ], + }), + ], +}); + +const webTracerWithZone = provider.getTracer('example-tracer-web'); + +// eslint-disable-next-line no-undef +const getData = (url) => fetch(url, { + method: 'GET', + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + }, +}); + +const getDataXhr = (url) => new Promise((resolve, reject) => { + // eslint-disable-next-line no-undef + const req = new XMLHttpRequest(); + req.open('GET', url, true); + req.setRequestHeader('Content-Type', 'application/json'); + req.setRequestHeader('Accept', 'application/json'); + req.onload = () => { + resolve(); + }; + req.onerror = () => { + reject(); + }; + req.send(); +}); + +// example of keeping track of context between async operations +const prepareClickEvent = () => { + const url = 'https://httpbin.org/get'; + + // eslint-disable-next-line no-undef + const element1 = document.getElementById('button1'); + + // eslint-disable-next-line no-undef + const element2 = document.getElementById('button2'); + + const clickHandler = (fetchFn) => () => { + const singleSpan = webTracerWithZone.startSpan('files-series-info'); + context.with(trace.setSpan(context.active(), singleSpan), () => { + fetchFn(url).then((_data) => { + trace.getSpan(context.active()).addEvent('fetching-single-span-completed'); + singleSpan.end(); + }); + }); + for (let i = 0, j = 5; i < j; i += 1) { + const span = webTracerWithZone.startSpan(`files-series-info-${i}`); + context.with(trace.setSpan(context.active(), span), () => { + fetchFn(url).then((_data) => { + trace.getSpan(context.active()).addEvent(`fetching-span-${i}-completed`); + span.end(); + }); + }); + } + }; + element1.addEventListener('click', clickHandler(getData)); + element2.addEventListener('click', clickHandler(getDataXhr)); +}; + +// eslint-disable-next-line no-undef +window.addEventListener('load', prepareClickEvent); diff --git a/examples/tracer-web/examples/metrics/index.js b/examples/tracer-web/examples/metrics/index.js index e067e30c7e..88a5515472 100644 --- a/examples/tracer-web/examples/metrics/index.js +++ b/examples/tracer-web/examples/metrics/index.js @@ -1,7 +1,5 @@ -'use strict'; - const { DiagConsoleLogger, DiagLogLevel, diag } = require('@opentelemetry/api'); -const { OTLPMetricExporter } = require('@opentelemetry/exporter-otlp-http'); +const { OTLPMetricExporter } = require('@opentelemetry/exporter-metrics-otlp-http'); const { MeterProvider } = require('@opentelemetry/sdk-metrics-base'); const { Resource } = require('@opentelemetry/resources'); const { SemanticResourceAttributes } = require('@opentelemetry/semantic-conventions'); @@ -47,10 +45,14 @@ function startMetrics() { } const addClickEvents = () => { + // eslint-disable-next-line no-undef const startBtn = document.getElementById('startBtn'); + + // eslint-disable-next-line no-undef const stopBtn = document.getElementById('stopBtn'); startBtn.addEventListener('click', startMetrics); stopBtn.addEventListener('click', stopMetrics); }; +// eslint-disable-next-line no-undef window.addEventListener('load', addClickEvents); diff --git a/examples/tracer-web/examples/xml-http-request/index.js b/examples/tracer-web/examples/xml-http-request/index.js index edf3180bd1..01da501e4c 100644 --- a/examples/tracer-web/examples/xml-http-request/index.js +++ b/examples/tracer-web/examples/xml-http-request/index.js @@ -3,7 +3,7 @@ import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-tra import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'; import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request'; import { ZoneContextManager } from '@opentelemetry/context-zone'; -import { OTLPTraceExporter } from '@opentelemetry/exporter-otlp-http'; +import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http'; import { B3Propagator } from '@opentelemetry/propagator-b3'; import { registerInstrumentations } from '@opentelemetry/instrumentation'; @@ -48,6 +48,7 @@ const getData = (url) => new Promise((resolve, reject) => { const prepareClickEvent = () => { const url1 = 'https://httpbin.org/get'; + // eslint-disable-next-line no-undef const element = document.getElementById('button1'); const onClick = () => { @@ -57,7 +58,7 @@ const prepareClickEvent = () => { getData(url1).then((_data) => { trace.getSpan(context.active()).addEvent('fetching-span1-completed'); span1.end(); - }, ()=> { + }, () => { trace.getSpan(context.active()).addEvent('fetching-error'); span1.end(); }); @@ -67,4 +68,5 @@ const prepareClickEvent = () => { element.addEventListener('click', onClick); }; +// eslint-disable-next-line no-undef window.addEventListener('load', prepareClickEvent); diff --git a/examples/tracer-web/examples/zipkin/index.js b/examples/tracer-web/examples/zipkin/index.js index 71c2208fed..82a0d015c5 100644 --- a/examples/tracer-web/examples/zipkin/index.js +++ b/examples/tracer-web/examples/zipkin/index.js @@ -18,6 +18,7 @@ provider.register(); const tracer = provider.getTracer('example-tracer-web'); const prepareClickEvent = () => { + // eslint-disable-next-line no-undef const element = document.getElementById('button1'); const onClick = () => { @@ -27,4 +28,5 @@ const prepareClickEvent = () => { element.addEventListener('click', onClick); }; +// eslint-disable-next-line no-undef window.addEventListener('load', prepareClickEvent); diff --git a/examples/tracer-web/package.json b/examples/tracer-web/package.json index 4605a88754..473cb220f5 100644 --- a/examples/tracer-web/package.json +++ b/examples/tracer-web/package.json @@ -1,11 +1,14 @@ { "name": "web-tracer-example", "private": true, - "version": "0.25.0", + "version": "0.27.0", "description": "Example of using @opentelemetry/sdk-trace-web in browser", "main": "index.js", "scripts": { - "start": "webpack-dev-server -d --progress --colors --port 8090 --config webpack.config.js --hot --inline --host 0.0.0.0 --content-base examples" + "start": "webpack serve --progress --color --port 8090 --config webpack.dev.config.js --hot --host 0.0.0.0 --compress", + "start-nc": "webpack serve --progress --color --port 8090 --config webpack.dev.config.js --hot --host 0.0.0.0 --no-compress", + "start-prod": "webpack serve --progress --color --port 8090 --config webpack.prod.config.js --hot --host 0.0.0.0 --compress", + "start-prodnc": "webpack serve --progress --color --port 8090 --config webpack.prod.config.js --hot --host 0.0.0.0 --no-compress" }, "repository": { "type": "git", @@ -27,25 +30,29 @@ "devDependencies": { "@babel/core": "^7.6.0", "babel-loader": "^8.0.6", - "ts-loader": "^6.0.4", - "webpack": "^4.35.2", - "webpack-cli": "^3.3.9", - "webpack-dev-server": "^3.8.1", - "webpack-merge": "^4.2.2" + "ts-loader": "^9.2.6", + "typescript": "^4.5.2", + "webpack": "^5.65.0", + "webpack-cli": "^4.9.1", + "webpack-dev-server": "^4.6.0", + "webpack-merge": "^5.8.0" }, "dependencies": { "@opentelemetry/api": "^1.0.2", - "@opentelemetry/context-zone": "0.25.0", - "@opentelemetry/core": "0.25.0", - "@opentelemetry/exporter-otlp-http": "0.25.0", - "@opentelemetry/exporter-zipkin": "0.25.0", - "@opentelemetry/instrumentation": "0.25.0", - "@opentelemetry/instrumentation-fetch": "0.25.0", - "@opentelemetry/instrumentation-xml-http-request": "0.25.0", - "@opentelemetry/sdk-metrics-base": "0.25.0", - "@opentelemetry/propagator-b3": "0.25.0", - "@opentelemetry/sdk-trace-base": "0.25.0", - "@opentelemetry/sdk-trace-web": "0.25.0" + "@opentelemetry/context-zone": "^1.0.1", + "@opentelemetry/core": "^1.0.1", + "@opentelemetry/sdk-trace-base": "^1.0.1", + "@opentelemetry/sdk-trace-web": "^1.0.1", + "@opentelemetry/instrumentation": "0.27.0", + "@opentelemetry/instrumentation-fetch": "0.27.0", + "@opentelemetry/instrumentation-xml-http-request": "0.27.0", + "@opentelemetry/exporter-trace-otlp-http": "0.27.0", + "@opentelemetry/exporter-metrics-otlp-http": "0.27.0", + "@opentelemetry/exporter-zipkin": "1.0.1", + "@opentelemetry/sdk-metrics-base": "0.27.0", + "@opentelemetry/semantic-conventions": "^1.0.1", + "@opentelemetry/propagator-b3": "1.0.1", + "@opentelemetry/resources": "^1.0.1" }, "homepage": "https://github.com/open-telemetry/opentelemetry-js#readme" } diff --git a/examples/tracer-web/webpack.config.js b/examples/tracer-web/webpack.dev.config.js similarity index 74% rename from examples/tracer-web/webpack.config.js rename to examples/tracer-web/webpack.dev.config.js index e47148709e..7ec5dde902 100644 --- a/examples/tracer-web/webpack.config.js +++ b/examples/tracer-web/webpack.dev.config.js @@ -1,4 +1,6 @@ +// eslint-disable-next-line import/no-extraneous-dependencies const webpack = require('webpack'); +// eslint-disable-next-line import/no-extraneous-dependencies const webpackMerge = require('webpack-merge'); const path = require('path'); @@ -10,6 +12,8 @@ const common = { metrics: 'examples/metrics/index.js', fetch: 'examples/fetch/index.js', 'xml-http-request': 'examples/xml-http-request/index.js', + fetchXhr: 'examples/fetchXhr/index.js', + fetchXhrB3: 'examples/fetchXhrB3/index.js', zipkin: 'examples/zipkin/index.js', }, output: { @@ -43,12 +47,18 @@ const common = { ], extensions: ['.ts', '.js', '.jsx', '.json'], }, + optimization: { + minimize: false, + }, }; -module.exports = webpackMerge(common, { +module.exports = webpackMerge.merge(common, { devtool: 'eval-source-map', devServer: { - contentBase: path.resolve(__dirname), + static: { + directory: path.resolve(__dirname, 'examples'), + }, + compress: true, }, plugins: [ new webpack.DefinePlugin({ diff --git a/examples/tracer-web/webpack.prod.config.js b/examples/tracer-web/webpack.prod.config.js new file mode 100644 index 0000000000..dcb21a7243 --- /dev/null +++ b/examples/tracer-web/webpack.prod.config.js @@ -0,0 +1,68 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +const webpack = require('webpack'); +// eslint-disable-next-line import/no-extraneous-dependencies +const webpackMerge = require('webpack-merge'); +const path = require('path'); + +const directory = path.resolve(__dirname); + +const common = { + mode: 'production', + entry: { + metrics: 'examples/metrics/index.js', + fetch: 'examples/fetch/index.js', + 'xml-http-request': 'examples/xml-http-request/index.js', + fetchXhr: 'examples/fetchXhr/index.js', + fetchXhrB3: 'examples/fetchXhrB3/index.js', + zipkin: 'examples/zipkin/index.js', + }, + output: { + path: path.resolve(__dirname, 'dist'), + filename: '[name].js', + sourceMapFilename: '[file].map', + }, + target: 'web', + module: { + rules: [ + { + test: /\.js[x]?$/, + exclude: /(node_modules)/, + use: { + loader: 'babel-loader', + }, + }, + { + test: /\.ts$/, + exclude: /(node_modules)/, + use: { + loader: 'ts-loader', + }, + }, + ], + }, + resolve: { + modules: [ + path.resolve(directory), + 'node_modules', + ], + extensions: ['.ts', '.js', '.jsx', '.json'], + }, + optimization: { + minimize: true, + }, +}; + +module.exports = webpackMerge.merge(common, { + devtool: 'source-map', + devServer: { + static: { + directory: path.resolve(__dirname, 'examples'), + }, + compress: true, + }, + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify('production'), + }), + ], +}); From a4bd541b34177c446f3c145b7777a31bf3407e11 Mon Sep 17 00:00:00 2001 From: Nev Wylie <54870357+MSNev@users.noreply.github.com> Date: Thu, 9 Dec 2021 09:50:54 -0800 Subject: [PATCH 2/3] fix: markdown lint issues --- examples/tracer-web/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/examples/tracer-web/README.md b/examples/tracer-web/README.md index 8b675aa718..e7947d135d 100644 --- a/examples/tracer-web/README.md +++ b/examples/tracer-web/README.md @@ -38,6 +38,7 @@ The examples includes several variants so that you can see how to mix and match This example shows how to use the XMLHttpRequest Instrumentation with the OTLP Trace exporter and with the B3 Propagator. Included Components + - XMLHttpRequestInstrumentation - ZoneContextManager - OTLPTraceExporter @@ -54,6 +55,7 @@ The screen will look as follows: This example shows how to use the Fetch Instrumentation with the OTLP Trace exporter and with the B3 Propagator. Included Components + - FetchInstrumentation - ZoneContextManager - OTLPTraceExporter @@ -67,6 +69,7 @@ To see the results, open the browser at and make This example shows how to use both the XMLHttpRequest and Fetch Instrumentations with the OTLP Trace exporter but without the B3 Propagator. Included Components + - XMLHttpRequestInstrumentation - FetchInstrumentation - ZoneContextManager @@ -78,6 +81,7 @@ Included Components This example shows how to use both the XMLHttpRequest and Fetch Instrumentations with the OTLP Trace exporter and with the B3 Propagator Included Components + - XMLHttpRequestInstrumentation - FetchInstrumentation - ZoneContextManager @@ -90,6 +94,7 @@ Included Components This example shows how to use the OTLP Metric Exporter, it does not include the Trace Exporter. Does not include traces Included Components + - OTLPMetricExporter - MeterProvider - Resource @@ -100,6 +105,7 @@ Included Components This example show a simple usage of the ZipKin Exporter with the Web Tracer Provider Included Components + - WebTracerProvider - ZipkinExporter From 3205e9b111fe42b71b1a880e580f8f4c56130c23 Mon Sep 17 00:00:00 2001 From: Nev Wylie <54870357+MSNev@users.noreply.github.com> Date: Tue, 14 Dec 2021 14:36:55 -0800 Subject: [PATCH 3/3] fix: address multiple PR comments --- examples/tracer-web/.eslintrc | 5 +++-- examples/tracer-web/examples/fetch/index.js | 7 ++++--- examples/tracer-web/examples/fetchXhr/index.js | 15 ++++----------- examples/tracer-web/examples/fetchXhrB3/index.js | 15 ++++----------- examples/tracer-web/examples/metrics/index.js | 3 --- .../tracer-web/examples/xml-http-request/index.js | 7 ++++--- examples/tracer-web/examples/zipkin/index.js | 2 -- examples/tracer-web/package.json | 10 +++++----- examples/tracer-web/webpack.dev.config.js | 2 -- examples/tracer-web/webpack.prod.config.js | 2 -- 10 files changed, 24 insertions(+), 44 deletions(-) diff --git a/examples/tracer-web/.eslintrc b/examples/tracer-web/.eslintrc index e2338e5e0b..ab18623027 100644 --- a/examples/tracer-web/.eslintrc +++ b/examples/tracer-web/.eslintrc @@ -1,6 +1,6 @@ { "env": { - "node": true + "browser": true }, "extends": "airbnb-base", "parserOptions": { @@ -11,6 +11,7 @@ "no-use-before-define": ["error", "nofunc"], "no-console": "off", "import/no-unresolved": "off", - "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }] + "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }], + "import/no-extraneous-dependencies": [ "error", { "devDependencies": true } ] } } diff --git a/examples/tracer-web/examples/fetch/index.js b/examples/tracer-web/examples/fetch/index.js index 6487c306f9..2871c98cd2 100644 --- a/examples/tracer-web/examples/fetch/index.js +++ b/examples/tracer-web/examples/fetch/index.js @@ -8,6 +8,10 @@ import { B3Propagator } from '@opentelemetry/propagator-b3'; import { registerInstrumentations } from '@opentelemetry/instrumentation'; const provider = new WebTracerProvider(); + +// Note: For production consider using the "BatchSpanProcessor" to reduce the number of requests +// to your exporter. Using the SimpleSpanProcessor here as it sends the spans immediately to the +// exporter without delay provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); provider.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter())); provider.register({ @@ -30,7 +34,6 @@ registerInstrumentations({ const webTracerWithZone = provider.getTracer('example-tracer-web'); -// eslint-disable-next-line no-undef const getData = (url) => fetch(url, { method: 'GET', headers: { @@ -43,7 +46,6 @@ const getData = (url) => fetch(url, { const prepareClickEvent = () => { const url = 'https://httpbin.org/get'; - // eslint-disable-next-line no-undef const element = document.getElementById('button1'); const onClick = () => { @@ -67,5 +69,4 @@ const prepareClickEvent = () => { element.addEventListener('click', onClick); }; -// eslint-disable-next-line no-undef window.addEventListener('load', prepareClickEvent); diff --git a/examples/tracer-web/examples/fetchXhr/index.js b/examples/tracer-web/examples/fetchXhr/index.js index ec8eeee6b0..745d0080fe 100644 --- a/examples/tracer-web/examples/fetchXhr/index.js +++ b/examples/tracer-web/examples/fetchXhr/index.js @@ -8,6 +8,10 @@ import { ZoneContextManager } from '@opentelemetry/context-zone'; import { registerInstrumentations } from '@opentelemetry/instrumentation'; const provider = new WebTracerProvider(); + +// Note: For production consider using the "BatchSpanProcessor" to reduce the number of requests +// to your exporter. Using the SimpleSpanProcessor here as it sends the spans immediately to the +// exporter without delay provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); provider.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter())); provider.register({ @@ -24,11 +28,6 @@ registerInstrumentations({ ], clearTimingResources: true, }), - ], -}); - -registerInstrumentations({ - instrumentations: [ new XMLHttpRequestInstrumentation({ ignoreUrls: [/localhost:8090\/sockjs-node/], propagateTraceHeaderCorsUrls: [ @@ -40,7 +39,6 @@ registerInstrumentations({ const webTracerWithZone = provider.getTracer('example-tracer-web'); -// eslint-disable-next-line no-undef const getData = (url) => fetch(url, { method: 'GET', headers: { @@ -50,7 +48,6 @@ const getData = (url) => fetch(url, { }); const getDataXhr = (url) => new Promise((resolve, reject) => { - // eslint-disable-next-line no-undef const req = new XMLHttpRequest(); req.open('GET', url, true); req.setRequestHeader('Content-Type', 'application/json'); @@ -68,10 +65,7 @@ const getDataXhr = (url) => new Promise((resolve, reject) => { const prepareClickEvent = () => { const url = 'https://httpbin.org/get'; - // eslint-disable-next-line no-undef const element1 = document.getElementById('button1'); - - // eslint-disable-next-line no-undef const element2 = document.getElementById('button2'); const clickHandler = (fetchFn) => () => { @@ -96,5 +90,4 @@ const prepareClickEvent = () => { element2.addEventListener('click', clickHandler(getDataXhr)); }; -// eslint-disable-next-line no-undef window.addEventListener('load', prepareClickEvent); diff --git a/examples/tracer-web/examples/fetchXhrB3/index.js b/examples/tracer-web/examples/fetchXhrB3/index.js index 5258ec5e73..669743b2cf 100644 --- a/examples/tracer-web/examples/fetchXhrB3/index.js +++ b/examples/tracer-web/examples/fetchXhrB3/index.js @@ -9,6 +9,10 @@ import { B3Propagator } from '@opentelemetry/propagator-b3'; import { registerInstrumentations } from '@opentelemetry/instrumentation'; const provider = new WebTracerProvider(); + +// Note: For production consider using the "BatchSpanProcessor" to reduce the number of requests +// to your exporter. Using the SimpleSpanProcessor here as it sends the spans immediately to the +// exporter without delay provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); provider.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter())); provider.register({ @@ -26,11 +30,6 @@ registerInstrumentations({ ], clearTimingResources: true, }), - ], -}); - -registerInstrumentations({ - instrumentations: [ new XMLHttpRequestInstrumentation({ ignoreUrls: [/localhost:8090\/sockjs-node/], propagateTraceHeaderCorsUrls: [ @@ -42,7 +41,6 @@ registerInstrumentations({ const webTracerWithZone = provider.getTracer('example-tracer-web'); -// eslint-disable-next-line no-undef const getData = (url) => fetch(url, { method: 'GET', headers: { @@ -52,7 +50,6 @@ const getData = (url) => fetch(url, { }); const getDataXhr = (url) => new Promise((resolve, reject) => { - // eslint-disable-next-line no-undef const req = new XMLHttpRequest(); req.open('GET', url, true); req.setRequestHeader('Content-Type', 'application/json'); @@ -70,10 +67,7 @@ const getDataXhr = (url) => new Promise((resolve, reject) => { const prepareClickEvent = () => { const url = 'https://httpbin.org/get'; - // eslint-disable-next-line no-undef const element1 = document.getElementById('button1'); - - // eslint-disable-next-line no-undef const element2 = document.getElementById('button2'); const clickHandler = (fetchFn) => () => { @@ -98,5 +92,4 @@ const prepareClickEvent = () => { element2.addEventListener('click', clickHandler(getDataXhr)); }; -// eslint-disable-next-line no-undef window.addEventListener('load', prepareClickEvent); diff --git a/examples/tracer-web/examples/metrics/index.js b/examples/tracer-web/examples/metrics/index.js index 88a5515472..e4b84b6589 100644 --- a/examples/tracer-web/examples/metrics/index.js +++ b/examples/tracer-web/examples/metrics/index.js @@ -45,14 +45,11 @@ function startMetrics() { } const addClickEvents = () => { - // eslint-disable-next-line no-undef const startBtn = document.getElementById('startBtn'); - // eslint-disable-next-line no-undef const stopBtn = document.getElementById('stopBtn'); startBtn.addEventListener('click', startMetrics); stopBtn.addEventListener('click', stopMetrics); }; -// eslint-disable-next-line no-undef window.addEventListener('load', addClickEvents); diff --git a/examples/tracer-web/examples/xml-http-request/index.js b/examples/tracer-web/examples/xml-http-request/index.js index 01da501e4c..3fcee52844 100644 --- a/examples/tracer-web/examples/xml-http-request/index.js +++ b/examples/tracer-web/examples/xml-http-request/index.js @@ -8,6 +8,10 @@ import { B3Propagator } from '@opentelemetry/propagator-b3'; import { registerInstrumentations } from '@opentelemetry/instrumentation'; const providerWithZone = new WebTracerProvider(); + +// Note: For production consider using the "BatchSpanProcessor" to reduce the number of requests +// to your exporter. Using the SimpleSpanProcessor here as it sends the spans immediately to the +// exporter without delay providerWithZone.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); providerWithZone.addSpanProcessor(new SimpleSpanProcessor(new OTLPTraceExporter())); @@ -30,7 +34,6 @@ registerInstrumentations({ const webTracerWithZone = providerWithZone.getTracer('example-tracer-web'); const getData = (url) => new Promise((resolve, reject) => { - // eslint-disable-next-line no-undef const req = new XMLHttpRequest(); req.open('GET', url, true); req.setRequestHeader('Content-Type', 'application/json'); @@ -48,7 +51,6 @@ const getData = (url) => new Promise((resolve, reject) => { const prepareClickEvent = () => { const url1 = 'https://httpbin.org/get'; - // eslint-disable-next-line no-undef const element = document.getElementById('button1'); const onClick = () => { @@ -68,5 +70,4 @@ const prepareClickEvent = () => { element.addEventListener('click', onClick); }; -// eslint-disable-next-line no-undef window.addEventListener('load', prepareClickEvent); diff --git a/examples/tracer-web/examples/zipkin/index.js b/examples/tracer-web/examples/zipkin/index.js index 82a0d015c5..71c2208fed 100644 --- a/examples/tracer-web/examples/zipkin/index.js +++ b/examples/tracer-web/examples/zipkin/index.js @@ -18,7 +18,6 @@ provider.register(); const tracer = provider.getTracer('example-tracer-web'); const prepareClickEvent = () => { - // eslint-disable-next-line no-undef const element = document.getElementById('button1'); const onClick = () => { @@ -28,5 +27,4 @@ const prepareClickEvent = () => { element.addEventListener('click', onClick); }; -// eslint-disable-next-line no-undef window.addEventListener('load', prepareClickEvent); diff --git a/examples/tracer-web/package.json b/examples/tracer-web/package.json index 473cb220f5..e1df838aae 100644 --- a/examples/tracer-web/package.json +++ b/examples/tracer-web/package.json @@ -43,16 +43,16 @@ "@opentelemetry/core": "^1.0.1", "@opentelemetry/sdk-trace-base": "^1.0.1", "@opentelemetry/sdk-trace-web": "^1.0.1", + "@opentelemetry/exporter-zipkin": "^1.0.1", + "@opentelemetry/semantic-conventions": "^1.0.1", + "@opentelemetry/propagator-b3": "^1.0.1", + "@opentelemetry/resources": "^1.0.1", "@opentelemetry/instrumentation": "0.27.0", "@opentelemetry/instrumentation-fetch": "0.27.0", "@opentelemetry/instrumentation-xml-http-request": "0.27.0", "@opentelemetry/exporter-trace-otlp-http": "0.27.0", "@opentelemetry/exporter-metrics-otlp-http": "0.27.0", - "@opentelemetry/exporter-zipkin": "1.0.1", - "@opentelemetry/sdk-metrics-base": "0.27.0", - "@opentelemetry/semantic-conventions": "^1.0.1", - "@opentelemetry/propagator-b3": "1.0.1", - "@opentelemetry/resources": "^1.0.1" + "@opentelemetry/sdk-metrics-base": "0.27.0" }, "homepage": "https://github.com/open-telemetry/opentelemetry-js#readme" } diff --git a/examples/tracer-web/webpack.dev.config.js b/examples/tracer-web/webpack.dev.config.js index 7ec5dde902..c3045d79c1 100644 --- a/examples/tracer-web/webpack.dev.config.js +++ b/examples/tracer-web/webpack.dev.config.js @@ -1,6 +1,4 @@ -// eslint-disable-next-line import/no-extraneous-dependencies const webpack = require('webpack'); -// eslint-disable-next-line import/no-extraneous-dependencies const webpackMerge = require('webpack-merge'); const path = require('path'); diff --git a/examples/tracer-web/webpack.prod.config.js b/examples/tracer-web/webpack.prod.config.js index dcb21a7243..2eb7d783c1 100644 --- a/examples/tracer-web/webpack.prod.config.js +++ b/examples/tracer-web/webpack.prod.config.js @@ -1,6 +1,4 @@ -// eslint-disable-next-line import/no-extraneous-dependencies const webpack = require('webpack'); -// eslint-disable-next-line import/no-extraneous-dependencies const webpackMerge = require('webpack-merge'); const path = require('path');