chore: adding example for user interaction

open-telemetry · obecny · Feb 2, 2021 · Jan 26, 2021 · Jan 27, 2021 · Jan 27, 2021
commit 3a7a97103e31f7cbc911c2294f57784a9aae8894
@@ -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://git@github.com/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'),
+    }),
+  ],
+});