Tracer web (#334)

* feat(tracer-web): adding tracer web * feat(basic-tracer): adding karma tests * feat(tracer-web): adding some example for easier debugging in browser - for development purposes * fix: lint * fix: creating base for karma * fix: fixing problem with target for browser, cleanup tests * refactor: moving polyfills for node karma tests to one file * fix: adding missing package * refactor: removing unneeded file * refactor: prefixing privates, cleanup * fix: duplicate package * refactor: aligning tslint with other tslint packages * refactor: cleanups, adding comments for class * fix: linting * fix: type * refactor: generation of id for scope * refactor: removed previous uid for scope as originally it was meant to be used with async which is not the case anymore * chore: adding test for restoring scope * fix: lint * refactor: simplifying the stack scope manager * chore: updating readme with basic example * chore: fixes after merge * fix: updating test to accept greater or equal - fails on browser * refactor: moving example for web tracer * refactor: removing WebTracerConfig to use BasicTracerConfig which changed recently * chore: updating types * chore: spacing * chore: removing mocha tests for tracer-web * chore: updating types and linting * chore: updating packages after merge * chore: adding nyc report for karma tests for browser * chore: updating lerna script to run coverage for browsers * feat(tracer-web): bump version to 0.1.0
open-telemetry · Oct 7, 2019 · 82b5fad · 82b5fad
1 parent 00cd2ec
commit 82b5fad
Show file tree

Hide file tree

Showing 31 changed files with 1,205 additions and 85 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -41,6 +41,9 @@ browsers_unit_tests: &browsers_unit_tests
     - run:
         name: Unit tests
         command: yarn test:browser
+    - run:
+        name: report coverage
+        command: yarn codecov:browser
 
 jobs:
   lint:

diff --git a/examples/tracer-web/index.html b/examples/tracer-web/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>JS Example</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+  Testing, debugging in development
+  <script type="text/javascript" src="/bundle.js"></script>
+</body>
+
+</html>
diff --git a/examples/tracer-web/index.js b/examples/tracer-web/index.js
@@ -0,0 +1,38 @@
+import { WebTracer } from '@opentelemetry/tracer-web';
+
+import * as shimmer from 'shimmer';
+
+class Tester {
+  constructor() {
+  }
+  add(name) {
+    console.log('calling add', name);
+  }
+}
+
+const tester = new Tester();
+
+const webTracer = new WebTracer();
+const span = webTracer.startSpan('span1');
+
+shimmer.wrap(Tester.prototype, 'add', (originalFunction) => {
+  return function patchedFunction() {
+    try {
+      span.addEvent('start');
+    } catch (e) {
+      console.log('error', e);
+    } finally {
+      const result = originalFunction.apply(this, arguments);
+      span.addEvent('after call');
+      span.end();
+      return result;
+    }
+  };
+});
+
+webTracer.withSpan(span, function () {
+  console.log(this === span);
+});
+
+tester.add('foo');
+console.log(span);
diff --git a/examples/tracer-web/package.json b/examples/tracer-web/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "web-tracer-example",
+  "private": true,
+  "version": "0.1.0",
+  "description": "Example of using @opentelemetry/tracer-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"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://[email protected]/open-telemetry/opentelemetry-js.git"
+  },
+  "keywords": [
+    "opentelemetry",
+    "tracing",
+    "web"
+  ],
+  "engines": {
+    "node": ">=8"
+  },
+  "author": "OpenTelemetry Authors",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/open-telemetry/opentelemetry-js/issues"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.6.0",
+    "@types/shimmer": "^1.0.1",
+    "babel-loader": "^8.0.6",
+    "shimmer": "^1.2.0",
+    "webpack": "^4.35.2",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^3.8.1",
+    "webpack-merge": "^4.2.2"
+  },
+  "dependencies": {
+    "@opentelemetry/tracer-web": "^0.1.0"
+  },
+  "homepage": "https://github.com/open-telemetry/opentelemetry-js#readme"
+}
diff --git a/examples/tracer-web/webpack.config.js b/examples/tracer-web/webpack.config.js
@@ -0,0 +1,63 @@
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+const path = require('path');
+const mainPath = path.resolve('');
+const directory = path.resolve(__dirname);
+
+const common = {
+  mode: 'development',
+  entry: 'index.js',
+  target: 'web',
+  module: {
+    rules: [
+      {
+        test: /\.js[x]?$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: 'babel-loader'
+        }
+      },
+      {
+        test: /\.ts$/,
+        exclude: /(node_modules)/,
+        use: {
+          loader: 'ts-loader'
+        }
+      }
+    ]
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      jQuery: 'jquery',
+      $: 'jquery',
+      jquery: 'jquery',
+      'window.jQuery': 'jquery'
+    })
+  ],
+  resolve: {
+    modules: [
+      path.resolve(mainPath, 'src'),
+      path.resolve(directory),
+      'node_modules'
+    ],
+    extensions: ['.ts', '.js', '.jsx', '.json']
+  }
+};
+
+module.exports = webpackMerge(common, {
+  devtool: 'eval-source-map',
+  output: {
+    filename: 'bundle.js',
+    sourceMapFilename: '[file].map'
+  },
+  devServer: {
+    contentBase: path.resolve(__dirname),
+    // contentBase: path.resolve('.'),
+    // historyApiFallback: true
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('development')
+    })
+  ]
+});
diff --git a/karma.base.js b/karma.base.js
@@ -0,0 +1,26 @@
+/*!
+ * Copyright 2019, OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+module.exports = {
+  listenAddress: 'localhost',
+  hostname: 'localhost',
+  browsers: ['ChromeHeadless'],
+  frameworks: ['mocha'],
+  reporters: ['spec'],
+  files: ['test/index-webpack.ts'],
+  preprocessors: { 'test/index-webpack.ts': ['webpack'] },
+  webpackMiddleware: { noInfo: true }
+};
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "main": "build/src/index.js",
   "types": "build/src/index.d.ts",
   "scripts": {
+    "clean": "lerna run clean",
     "fix": "lerna run fix",
     "postinstall": "yarn run bootstrap",
     "compile": "lerna run compile",
@@ -13,6 +14,7 @@
     "bootstrap": "lerna bootstrap",
     "bump": "lerna publish",
     "codecov": "lerna run codecov",
+    "codecov:browser": "lerna run codecov:browser",
     "check": "lerna run check",
     "predocs-test": "yarn docs",
     "docs-test": "lerna run docs-test",

diff --git a/packages/opentelemetry-core/karma.conf.js b/packages/opentelemetry-core/karma.conf.js
@@ -15,17 +15,10 @@
  */
 
 const webpackConfig = require('./webpack/test.config.js');
+const karmaBaseConfig = require('../../karma.base');
 
 module.exports = (config) => {
-  config.set({
-    listenAddress: 'localhost',
-    hostname: 'localhost',
-    browsers: ['ChromeHeadless'],
-    frameworks: ['mocha'],
-    reporters: ['spec'],
-    files: ['test/index-webpack.ts'],
-    preprocessors: {'test/index-webpack.ts': ['webpack']},
-    webpack: webpackConfig,
-    webpackMiddleware: {noInfo: true},
-  });
+  config.set(Object.assign({}, karmaBaseConfig, {
+    webpack: webpackConfig
+  }))
 };
diff --git a/packages/opentelemetry-core/package.json b/packages/opentelemetry-core/package.json
@@ -4,7 +4,8 @@
   "description": "OpenTelemetry Core",
   "main": "build/src/index.js",
   "browser": {
-    "./src/platform/index.ts": "./src/platform/browser/index.ts"
+    "./src/platform/index.ts": "./src/platform/browser/index.ts",
+    "./build/src/platform/index.js": "./build/src/platform/browser/index.js"
   },
   "types": "build/src/index.d.ts",
   "repository": "open-telemetry/opentelemetry-js",

diff --git a/packages/opentelemetry-core/webpack/test.config.js b/packages/opentelemetry-core/webpack/test.config.js
@@ -14,73 +14,21 @@
  * limitations under the License.
  */
 
-// This is the webpack configuration for browesr Karma tests.
+const webpackNodePolyfills = require('../../../webpack.node-polyfills.js');
+
+// This is the webpack configuration for browser Karma tests.
 module.exports = {
   mode: 'development',
-  output: {filename: 'bundle.js'},
-  resolve: {extensions: ['.ts', '.js']},
+  target: 'web',
+  output: { filename: 'bundle.js' },
+  resolve: { extensions: ['.ts', '.js'] },
   devtool: 'inline-source-map',
   module: {
     rules: [
-      {test: /\.ts$/, use: 'ts-loader'},
-      {
-        parser: {
-          // This setting configures Node polyfills for the browser that will be
-          // added to the webpack bundle for Karma tests.
-          node: {
-            // Enable the assert library polyfill because that is used in tests
-            assert: true,
-            // The assert polyfill from github.com/browserify/commonjs-assert
-            // also requires the `global` polyfill.
-            global: true,
-
-            // Turn off all other Node.js API polyfills for the browser tests to
-            // make sure that we are not attempting to use Node-specific APIs in
-            // the browser code. Instead, we will write browser specific
-            // implementations of platform functionality we need under the
-            // `./src/platform/browser` folder. This allows for writing browser
-            // optimized implementations of the specific needed functionality
-            // rather than bringing in (sometimes large) polyfills for the
-            // corresponding Node APIs.
-            Buffer: false,
-            __dirname: false,
-            __filename: false,
-            buffer: false,
-            child_process: false,
-            cluster: false,
-            console: false,
-            constants: false,
-            crypto: false,
-            dgram: false,
-            dns: false,
-            domain: false,
-            events: false,
-            fs: false,
-            http: false,
-            https: false,
-            module: false,
-            net: false,
-            os: false,
-            path: false,
-            process: false,
-            punycode: false,
-            querystring: false,
-            readline: false,
-            repl: false,
-            setImmediate: false,
-            stream: false,
-            string_decoder: false,
-            sys: false,
-            timers: false,
-            tls: false,
-            tty: false,
-            url: false,
-            util: false,
-            vm: false,
-            zlib: false,
-          },
-        },
-      },
-    ],
-  },
+      { test: /\.ts$/, use: 'ts-loader' },
+      // This setting configures Node polyfills for the browser that will be
+      // added to the webpack bundle for Karma tests.
+      { parser: { node: webpackNodePolyfills } }
+    ]
+  }
 };
diff --git a/packages/opentelemetry-tracer-basic/karma.conf.js b/packages/opentelemetry-tracer-basic/karma.conf.js
@@ -0,0 +1,24 @@
+/*!
+ * Copyright 2019, OpenTelemetry Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const webpackConfig = require('./webpack/test.config.js');
+const karmaBaseConfig = require('../../karma.base');
+
+module.exports = (config) => {
+  config.set(Object.assign({}, karmaBaseConfig, {
+    webpack: webpackConfig
+  }))
+};