diff --git a/README.md b/README.md index eeb5cbf2c4..32ccfda003 100644 --- a/README.md +++ b/README.md @@ -220,8 +220,8 @@ These plugins are hosted at -- [@opentelemetry/plugin-document-load][otel-contrib-plugin-document-load] -- [@opentelemetry/plugin-user-interaction][otel-contrib-plugin-user-interaction] +- [@opentelemetry/instrumentation-document-load][otel-contrib-instrumentation-document-load] +- [@opentelemetry/instrumentation-user-interaction][otel-contrib-instrumentation-user-interaction] To request automatic tracing support for a module not on this list, please [file an issue](https://github.com/open-telemetry/opentelemetry-js/issues). Alternatively, you can [write an instrumentation yourself](https://github.com/open-telemetry/opentelemetry-js/blob/main/doc/instrumentation-guide.md). @@ -436,7 +436,7 @@ Apache 2.0 - See [LICENSE][license-url] for more information. [otel-contrib-plugin-pg]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/node/opentelemetry-plugin-pg [otel-contrib-plugin-redis]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/node/opentelemetry-plugin-redis [otel-contrib-plugin-express]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/node/opentelemetry-plugin-express -[otel-contrib-plugin-user-interaction]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/web/opentelemetry-plugin-user-interaction -[otel-contrib-plugin-document-load]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/web/opentelemetry-plugin-document-load -[otel-contrib-hapi-instrumentation]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/node/opentelemetry-hapi-instrumentation -[otel-contrib-koa-instrumentation]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/node/opentelemetry-koa-instrumentation +[otel-contrib-instrumentation-user-interaction]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/web/opentelemetry-instrumentation-user-interaction +[otel-contrib-instrumentation-document-load]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/web/opentelemetry-instrumentation-document-load +[otel-contrib-instrumentation-hapi]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/node/opentelemetry-instrumentation-hapi +[otel-contrib-instrumentation-koa]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/node/opentelemetry-instrumentation-koa diff --git a/examples/tracer-web/README.md b/examples/tracer-web/README.md index bf6f4694d1..785b2d9de5 100644 --- a/examples/tracer-web/README.md +++ b/examples/tracer-web/README.md @@ -20,14 +20,6 @@ By default, the application will run on port `8090`. ## Examples -### Document Load - -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: - -![Screenshot of the running example](images/document-load.png) - ### XMLHttpRequest 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. diff --git a/examples/tracer-web/examples/document-load/index.html b/examples/tracer-web/examples/document-load/index.html deleted file mode 100644 index 8df377cc52..0000000000 --- a/examples/tracer-web/examples/document-load/index.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - Document Load Plugin Example - - - - - - - - - - Example of using Web Tracer with document load plugin with console exporter and collector exporter - -
- - - - - diff --git a/examples/tracer-web/examples/document-load/index.js b/examples/tracer-web/examples/document-load/index.js deleted file mode 100644 index 610862f2c9..0000000000 --- a/examples/tracer-web/examples/document-load/index.js +++ /dev/null @@ -1,92 +0,0 @@ -import { context, getSpan, setSpan } from '@opentelemetry/api'; -import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/tracing'; -import { WebTracerProvider } from '@opentelemetry/web'; -import { DocumentLoad } from '@opentelemetry/plugin-document-load'; -import { ZoneContextManager } from '@opentelemetry/context-zone'; -import { CollectorTraceExporter } from '@opentelemetry/exporter-collector'; -import { registerInstrumentations } from '@opentelemetry/instrumentation'; - -const provider = new WebTracerProvider(); - -registerInstrumentations({ - instrumentations: [new DocumentLoad()], - tracerProvider: provider, -}); - -provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); -provider.addSpanProcessor(new SimpleSpanProcessor(new CollectorTraceExporter())); - -provider.register({ - contextManager: new ZoneContextManager(), -}); - -const tracer = provider.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.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/master/package.json'; - const url2 = 'https://raw.githubusercontent.com/open-telemetry/opentelemetry-js/master/packages/opentelemetry-web/package.json'; - - const element = document.getElementById('button1'); - - const onClick = () => { - let count = 0; - - function finish() { - count++; - if (count === 2) { - mainSpan.end(); - } - } - - const mainSpan = tracer.startSpan('click button'); - context.with(setSpan(context.active(), mainSpan), () => { - const span1 = tracer.startSpan('files-series-info-1'); - - const span2 = tracer.startSpan('files-series-info-2'); - - context.with(setSpan(context.active(), span1), () => { - getData(url1).then((data) => { - const curSpan = getSpan(context.active()); - console.log('current span is span1', curSpan === span1); - console.log('info from package.json', data.description, data.version); - curSpan.addEvent('fetching-span1-completed'); - span1.end(); - finish(); - }); - }); - - context.with(setSpan(context.active(), span2), () => { - getData(url2).then((data) => { - setTimeout(() => { - const curSpan = getSpan(context.active()); - console.log('current span is span2', curSpan === span2); - console.log('info from package.json', data.description, data.version); - curSpan.addEvent('fetching-span2-completed'); - span2.end(); - finish(); - }, 100); - }); - }); - }); - }; - element.addEventListener('click', onClick); -}; - -window.addEventListener('load', prepareClickEvent); diff --git a/examples/tracer-web/examples/user-interaction/index.html b/examples/tracer-web/examples/user-interaction/index.html deleted file mode 100644 index c22edf2d12..0000000000 --- a/examples/tracer-web/examples/user-interaction/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - User Interaction Example - - - - - - - - - - Example of using Web Tracer with UserInteractionPlugin and XMLHttpRequestInstrumentation with console exporter and collector exporter - -
- -
-
-
-
-
-
-
-
- - - - diff --git a/examples/tracer-web/examples/user-interaction/index.js b/examples/tracer-web/examples/user-interaction/index.js deleted file mode 100644 index ce951d2a41..0000000000 --- a/examples/tracer-web/examples/user-interaction/index.js +++ /dev/null @@ -1,87 +0,0 @@ -import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/tracing'; -import { WebTracerProvider } from '@opentelemetry/web'; -import { UserInteractionPlugin } from '@opentelemetry/plugin-user-interaction'; -import { ZoneContextManager } from '@opentelemetry/context-zone'; -import { CollectorTraceExporter } from '@opentelemetry/exporter-collector'; -import { B3Propagator } from '@opentelemetry/propagator-b3'; -import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request'; -import { registerInstrumentations } from '@opentelemetry/instrumentation'; - -const providerWithZone = new WebTracerProvider(); - -registerInstrumentations({ - instrumentations: [ - new UserInteractionPlugin(), - new XMLHttpRequestInstrumentation({ - ignoreUrls: [/localhost/], - propagateTraceHeaderCorsUrls: [ - 'http://localhost:8090', - ], - }), - ], - tracerProvider: providerWithZone, -}); - -providerWithZone.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); -providerWithZone.addSpanProcessor(new SimpleSpanProcessor(new CollectorTraceExporter())); - -providerWithZone.register({ - contextManager: new ZoneContextManager(), - propagator: new B3Propagator(), -}); - -let lastButtonId = 0; - -function btnAddClick() { - lastButtonId++; - const btn = document.createElement('button'); - // for easier testing of element xpath - let navigate = false; - if (lastButtonId % 2 === 0) { - btn.setAttribute('id', `button${lastButtonId}`); - navigate = true; - } - btn.setAttribute('class', `buttonClass${lastButtonId}`); - btn.append(document.createTextNode(`Click ${lastButtonId}`)); - btn.addEventListener('click', onClick.bind(this, navigate)); - document.querySelector('#buttons').append(btn); -} - -function prepareClickEvents() { - for (let i = 0; i < 5; i++) { - btnAddClick(); - } - const btnAdd = document.getElementById('btnAdd'); - btnAdd.addEventListener('click', btnAddClick); -} - -function onClick(navigate) { - if (navigate) { - history.pushState({ test: 'testing' }, '', `${location.pathname}`); - history.pushState({ test: 'testing' }, '', `${location.pathname}#foo=bar1`); - } - getData('https://httpbin.org/get?a=1').then(() => { - getData('https://httpbin.org/get?a=1').then(() => { - console.log('data downloaded 2'); - }); - getData('https://httpbin.org/get?a=1').then(() => { - console.log('data downloaded 3'); - }); - console.log('data downloaded 1'); - }); -} - -function getData(url, resolve) { - return new Promise(async (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 () { - resolve(); - }; - }); -} - -window.addEventListener('load', prepareClickEvents); diff --git a/examples/tracer-web/images/document-load.png b/examples/tracer-web/images/document-load.png deleted file mode 100644 index 5a2e23e808..0000000000 Binary files a/examples/tracer-web/images/document-load.png and /dev/null differ diff --git a/examples/tracer-web/package.json b/examples/tracer-web/package.json index 8898eb2cbc..5c428587ae 100644 --- a/examples/tracer-web/package.json +++ b/examples/tracer-web/package.json @@ -43,8 +43,6 @@ "@opentelemetry/instrumentation-fetch": "^0.18.0", "@opentelemetry/instrumentation-xml-http-request": "^0.18.0", "@opentelemetry/metrics": "^0.18.0", - "@opentelemetry/plugin-document-load": "^0.12.0", - "@opentelemetry/plugin-user-interaction": "^0.12.0", "@opentelemetry/propagator-b3": "^0.18.0", "@opentelemetry/tracing": "^0.18.0", "@opentelemetry/web": "^0.18.0" diff --git a/examples/tracer-web/webpack.config.js b/examples/tracer-web/webpack.config.js index 00773db28b..e47148709e 100644 --- a/examples/tracer-web/webpack.config.js +++ b/examples/tracer-web/webpack.config.js @@ -7,11 +7,9 @@ const directory = path.resolve(__dirname); const common = { mode: 'development', entry: { - 'document-load': 'examples/document-load/index.js', metrics: 'examples/metrics/index.js', fetch: 'examples/fetch/index.js', 'xml-http-request': 'examples/xml-http-request/index.js', - 'user-interaction': 'examples/user-interaction/index.js', zipkin: 'examples/zipkin/index.js', }, output: {