diff --git a/examples/tracer-web/.eslintrc b/examples/tracer-web/.eslintrc index e2338e5e0..ab1862302 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/README.md b/examples/tracer-web/README.md index a8d3f76fd..e7947d135 100644 --- a/examples/tracer-web/README.md +++ b/examples/tracer-web/README.md @@ -18,10 +18,33 @@ 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 +52,63 @@ 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 689a119af..2871c98cd 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'; @@ -9,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({ @@ -34,7 +37,7 @@ const webTracerWithZone = provider.getTracer('example-tracer-web'); const getData = (url) => fetch(url, { method: 'GET', headers: { - 'Accept': 'application/json', + Accept: 'application/json', 'Content-Type': 'application/json', }, }); @@ -46,7 +49,7 @@ const prepareClickEvent = () => { 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'); diff --git a/examples/tracer-web/examples/fetchXhr/index.html b/examples/tracer-web/examples/fetchXhr/index.html new file mode 100644 index 000000000..841d5ee3e --- /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 000000000..745d0080f --- /dev/null +++ b/examples/tracer-web/examples/fetchXhr/index.js @@ -0,0 +1,93 @@ +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(); + +// 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({ + 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, + }), + new XMLHttpRequestInstrumentation({ + ignoreUrls: [/localhost:8090\/sockjs-node/], + propagateTraceHeaderCorsUrls: [ + 'https://httpbin.org/get', + ], + }), + ], +}); + +const webTracerWithZone = provider.getTracer('example-tracer-web'); + +const getData = (url) => fetch(url, { + method: 'GET', + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + }, +}); + +const getDataXhr = (url) => 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.onload = () => { + resolve(); + }; + req.onerror = () => { + reject(); + }; + req.send(); +}); + +// example of keeping track of context between async operations +const prepareClickEvent = () => { + const url = 'https://httpbin.org/get'; + + const element1 = document.getElementById('button1'); + 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)); +}; + +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 000000000..af3fee081 --- /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 000000000..669743b2c --- /dev/null +++ b/examples/tracer-web/examples/fetchXhrB3/index.js @@ -0,0 +1,95 @@ +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(); + +// 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({ + 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, + }), + new XMLHttpRequestInstrumentation({ + ignoreUrls: [/localhost:8090\/sockjs-node/], + propagateTraceHeaderCorsUrls: [ + 'https://httpbin.org/get', + ], + }), + ], +}); + +const webTracerWithZone = provider.getTracer('example-tracer-web'); + +const getData = (url) => fetch(url, { + method: 'GET', + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + }, +}); + +const getDataXhr = (url) => 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.onload = () => { + resolve(); + }; + req.onerror = () => { + reject(); + }; + req.send(); +}); + +// example of keeping track of context between async operations +const prepareClickEvent = () => { + const url = 'https://httpbin.org/get'; + + const element1 = document.getElementById('button1'); + 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)); +}; + +window.addEventListener('load', prepareClickEvent); diff --git a/examples/tracer-web/examples/metrics/index.js b/examples/tracer-web/examples/metrics/index.js index e067e30c7..e4b84b658 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'); @@ -48,6 +46,7 @@ function startMetrics() { const addClickEvents = () => { const startBtn = document.getElementById('startBtn'); + const stopBtn = document.getElementById('stopBtn'); startBtn.addEventListener('click', startMetrics); stopBtn.addEventListener('click', stopMetrics); diff --git a/examples/tracer-web/examples/xml-http-request/index.js b/examples/tracer-web/examples/xml-http-request/index.js index edf3180bd..3fcee5284 100644 --- a/examples/tracer-web/examples/xml-http-request/index.js +++ b/examples/tracer-web/examples/xml-http-request/index.js @@ -3,11 +3,15 @@ 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'; 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'); @@ -57,7 +60,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(); }); diff --git a/examples/tracer-web/package.json b/examples/tracer-web/package.json index 4605a8875..e1df838aa 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/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/sdk-metrics-base": "0.27.0" }, "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 80% rename from examples/tracer-web/webpack.config.js rename to examples/tracer-web/webpack.dev.config.js index e47148709..c3045d79c 100644 --- a/examples/tracer-web/webpack.config.js +++ b/examples/tracer-web/webpack.dev.config.js @@ -10,6 +10,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 +45,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 000000000..2eb7d783c --- /dev/null +++ b/examples/tracer-web/webpack.prod.config.js @@ -0,0 +1,66 @@ +const webpack = require('webpack'); +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'), + }), + ], +});