-
Notifications
You must be signed in to change notification settings - Fork 538
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* chore: moving user interaction plugin into instrumentation * chore: adding example for user interaction * chore: renaming plugin to instrumentation * chore: renaming plugin to instrumentation
- Loading branch information
Showing
27 changed files
with
370 additions
and
80 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| # Overview | ||
|
|
||
| This example shows how to use [@opentelemetry/web](https://github.com/open-telemetry/opentelemetry-js/tree/master/packages/opentelemetry-web) with different instrumentations from contrib repo in a browser. | ||
|
|
||
| ## Installation | ||
|
|
||
| ```sh | ||
| # from this directory | ||
| npm install | ||
| ``` | ||
|
|
||
| ## Run the Application | ||
|
|
||
| ```sh | ||
| # from this directory | ||
| npm start | ||
| ``` | ||
|
|
||
| By default, the application will run on port `8090`. | ||
|
|
||
| ## Useful links | ||
|
|
||
| - For more information on OpenTelemetry, visit: <https://opentelemetry.io/> | ||
| - For more information on web tracing, visit: <https://github.com/open-telemetry/opentelemetry-js/tree/master/packages/opentelemetry-web> | ||
|
|
||
| ## LICENSE | ||
|
|
||
| Apache License 2.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>User Interaction Example</title> | ||
| <base href="/"> | ||
|
|
||
| <!-- | ||
| https://www.w3.org/TR/trace-context/ | ||
| Set the `traceparent` in the server's HTML template code. It should be | ||
| dynamically generated server side to have the server's request trace Id, | ||
| a parent span Id that was set on the server's request span, and the trace | ||
| flags to indicate the server's sampling decision | ||
| (01 = sampled, 00 = notsampled). | ||
| '{version}-{traceId}-{spanId}-{sampleDecision}' | ||
| --> | ||
| <!-- <meta name="traceparent" content="00-ab42124a3c573678d4d8b21ba52df3bf-d21f7bc17caa5aba-01">--> | ||
|
|
||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| </head> | ||
|
|
||
| <body> | ||
| Example of using Web Tracer with UserInteractionInstrumentation and XMLHttpRequestInstrumentation with console exporter and collector exporter | ||
| <script type="text/javascript" src="user-interaction.js"></script> | ||
| <br/> | ||
| <button id="btnAdd" class="btnAddClass">Add button</button> | ||
| <div> | ||
| <div></div> | ||
| <div></div> | ||
| <div></div> | ||
| <div id="buttons"></div> | ||
| <div></div> | ||
| </div> | ||
| <br/> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/tracing'; | ||
| import { WebTracerProvider } from '@opentelemetry/web'; | ||
| import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-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(); | ||
|
|
||
| providerWithZone.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter())); | ||
| providerWithZone.addSpanProcessor(new SimpleSpanProcessor(new CollectorTraceExporter())); | ||
|
|
||
| providerWithZone.register({ | ||
| contextManager: new ZoneContextManager(), | ||
| propagator: new B3Propagator(), | ||
| }); | ||
|
|
||
| registerInstrumentations({ | ||
| instrumentations: [ | ||
| new UserInteractionInstrumentation(), | ||
| new XMLHttpRequestInstrumentation({ | ||
| ignoreUrls: [/localhost/], | ||
| propagateTraceHeaderCorsUrls: [ | ||
| 'http://localhost:8090', | ||
| ], | ||
| }), | ||
| ], | ||
| tracerProvider: providerWithZone, | ||
| }); | ||
|
|
||
| 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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| { | ||
| "name": "web-examples", | ||
| "private": true, | ||
| "version": "0.12.0", | ||
| "description": "Example of using web plugins 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" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+ssh://[email protected]/open-telemetry/opentelemetry-js-contrib.git" | ||
| }, | ||
| "keywords": [ | ||
| "opentelemetry", | ||
| "tracing", | ||
| "web" | ||
| ], | ||
| "engines": { | ||
| "node": ">=8" | ||
| }, | ||
| "author": "OpenTelemetry Authors", | ||
| "license": "Apache-2.0", | ||
| "bugs": { | ||
| "url": "https://github.com/open-telemetry/opentelemetry-js-contrib/issues" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.12.10", | ||
| "babel-loader": "^8.2.2", | ||
| "ts-loader": "^6.2.2", | ||
| "webpack": "^4.44.2", | ||
| "webpack-cli": "^3.3.12", | ||
| "webpack-dev-server": "^3.11.0", | ||
| "webpack-merge": "^4.2.2" | ||
| }, | ||
| "dependencies": { | ||
| "@opentelemetry/context-zone": "^0.15.0", | ||
| "@opentelemetry/core": "^0.15.0", | ||
| "@opentelemetry/exporter-collector": "^0.15.0", | ||
| "@opentelemetry/instrumentation-xml-http-request": "^0.15.0", | ||
| "@opentelemetry/instrumentation-user-interaction": "^0.12.1", | ||
| "@opentelemetry/propagator-b3": "^0.15.0", | ||
| "@opentelemetry/tracing": "^0.15.0", | ||
| "@opentelemetry/web": "^0.15.0" | ||
| }, | ||
| "homepage": "https://github.com/open-telemetry/opentelemetry-js-contrib#readme" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| const webpack = require('webpack'); | ||
| const webpackMerge = require('webpack-merge'); | ||
| const path = require('path'); | ||
|
|
||
| const directory = path.resolve(__dirname); | ||
|
|
||
| const common = { | ||
| mode: 'development', | ||
| entry: { | ||
| 'user-interaction': 'examples/user-interaction/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'], | ||
| }, | ||
| }; | ||
|
|
||
| module.exports = webpackMerge(common, { | ||
| devtool: 'eval-source-map', | ||
| devServer: { | ||
| contentBase: path.resolve(__dirname), | ||
| }, | ||
| plugins: [ | ||
| new webpack.DefinePlugin({ | ||
| 'process.env.NODE_ENV': JSON.stringify('development'), | ||
| }), | ||
| ], | ||
| }); |
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
Oops, something went wrong.