open-telemetry · obecny · Feb 2, 2021 · Jan 26, 2021 · Jan 27, 2021 · Jan 27, 2021
@@ -61,7 +61,7 @@ cache_1: &cache_1
     - plugins/node/opentelemetry-plugin-redis/node_modules
     - plugins/web/opentelemetry-plugin-document-load/node_modules
     - plugins/web/opentelemetry-plugin-react-load/node_modules
-    - plugins/web/opentelemetry-plugin-user-interaction/node_modules
+    - plugins/web/opentelemetry-instrumentation-user-interaction/node_modules
     - propagators/opentelemetry-propagator-jaeger/node_modules
     - propagators/opentelemetry-propagator-grpc-census-binary/node_modules
 

@@ -71,7 +71,7 @@ OpenTelemetry can collect tracing data automatically using plugins. Vendors/User
 
 - [@opentelemetry/plugin-document-load][otel-plugin-document-load]
 - [@opentelemetry/plugin-xml-http-request][otel-plugin-xml-http-request]
-- [@opentelemetry/plugin-user-interaction][otel-plugin-user-interaction]
+- [@opentelemetry/instrumentation-user-interaction][otel-instrumentation-user-interaction]
 - [@opentelemetry/plugin-react-load][otel-plugin-react-load]
 
 ### Metapackages
@@ -130,7 +130,7 @@ Apache 2.0 - See [LICENSE][license-url] for more information.
 [otel-plugin-pg-pool]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/main/plugins/node/opentelemetry-plugin-pg-pool
 [otel-plugin-pg]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/main/plugins/node/opentelemetry-plugin-pg
 [otel-plugin-redis]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/main/plugins/node/opentelemetry-plugin-redis
-[otel-plugin-user-interaction]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/main/plugins/web/opentelemetry-plugin-user-interaction
+[otel-instrumentation-user-interaction]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/main/plugins/web/opentelemetry-instrumentation-user-interaction
 [otel-plugin-xml-http-request]: https://github.com/open-telemetry/opentelemetry-js/tree/main/packages/opentelemetry-plugin-xml-http-request
 [otel-plugin-express]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/main/plugins/node/opentelemetry-plugin-express
 [otel-plugins-node-core-and-contrib]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/main/metapackages/plugins-node-core-and-contrib

@@ -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
@@ -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>
@@ -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);
@@ -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"
+}
@@ -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'),
+    }),
+  ],
+});
@@ -1,4 +1,4 @@
-# OpenTelemetry UserInteraction Plugin for web
+# OpenTelemetry UserInteraction Instrumentation for web
 [![Gitter chat][gitter-image]][gitter-url]
 [![NPM Published Version][npm-img]][npm-url]
 [![dependencies][dependencies-image]][dependencies-url]
@@ -14,23 +14,23 @@ Without [zone-js] it will still work but with limited support.
 ## Installation
 
 ```bash
-npm install --save @opentelemetry/plugin-user-interaction
+npm install --save @opentelemetry/instrumentation-user-interaction
 ```
 
 ## Usage
 
 ```js
 import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/tracing';
 import { WebTracerProvider } from '@opentelemetry/web';
-import { UserInteractionPlugin } from '@opentelemetry/plugin-user-interaction';
+import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';
 import { ZoneContextManager } from '@opentelemetry/context-zone';
 // or if you already have zone.js
 // import { ZoneContextManager } from '@opentelemetry/context-zone-peer-dep';
 
 const provider = new WebTracerProvider({
   contextManager: new ZoneContextManager(), // optional
   plugins: [
-    new UserInteractionPlugin()
+    new UserInteractionInstrumentation()
   ]
 });
 provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
@@ -94,12 +94,12 @@ Apache 2.0 - See [LICENSE][license-url] for more information.
 [gitter-url]: https://gitter.im/open-telemetry/opentelemetry-node?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge
 [license-url]: https://github.com/open-telemetry/opentelemetry-js/blob/main/LICENSE
 [license-image]: https://img.shields.io/badge/license-Apache_2.0-green.svg?style=flat
-[dependencies-image]: https://david-dm.org/open-telemetry/opentelemetry-js/status.svg?path=packages/opentelemetry-plugin-user-interaction
-[dependencies-url]: https://david-dm.org/open-telemetry/opentelemetry-js?path=packages%2Fopentelemetry-plugin-user-interaction
-[devDependencies-image]: https://david-dm.org/open-telemetry/opentelemetry-js/dev-status.svg?path=packages/opentelemetry-plugin-user-interaction
-[devDependencies-url]: https://david-dm.org/open-telemetry/opentelemetry-js?path=packages%2Fopentelemetry-plugin-user-interaction&type=dev
-[npm-url]: https://www.npmjs.com/package/@opentelemetry/plugin-user-interaction
-[npm-img]: https://badge.fury.io/js/%40opentelemetry%2Fplugin-user-interaction.svg
+[dependencies-image]: https://david-dm.org/open-telemetry/opentelemetry-js/status.svg?path=packages/opentelemetry-instrumentation-user-interaction
+[dependencies-url]: https://david-dm.org/open-telemetry/opentelemetry-js?path=packages%2Fopentelemetry-instrumentation-user-interaction
+[devDependencies-image]: https://david-dm.org/open-telemetry/opentelemetry-js/dev-status.svg?path=packages/opentelemetry-instrumentation-user-interaction
+[devDependencies-url]: https://david-dm.org/open-telemetry/opentelemetry-js?path=packages%2Fopentelemetry-instrumentation-user-interaction&type=dev
+[npm-url]: https://www.npmjs.com/package/@opentelemetry/instrumentation-user-interaction
+[npm-img]: https://badge.fury.io/js/%40opentelemetry%2Finstrumentation-user-interaction.svg
 [zone-js]: https://www.npmjs.com/package/zone.js
 [@opentelemetry/context-zone]: https://www.npmjs.com/package/@opentelemetry/context-zone
 
@@ -1,5 +1,5 @@
 {
-  "name": "@opentelemetry/plugin-user-interaction",
+  "name": "@opentelemetry/instrumentation-user-interaction",
   "version": "0.12.1",
   "description": "OpenTelemetry UserInteraction automatic instrumentation package.",
   "main": "build/src/index.js",
@@ -82,8 +82,8 @@
   "dependencies": {
     "@opentelemetry/api": "^0.15.0",
     "@opentelemetry/core": "^0.15.0",
-    "@opentelemetry/web": "^0.15.0",
-    "shimmer": "^1.2.1"
+    "@opentelemetry/instrumentation": "^0.15.0",
+    "@opentelemetry/web": "^0.15.0"
   },
   "peerDependencies": {
     "zone.js": "0.10.3"