feat: Add React Plugin

README.md

@@ -69,6 +69,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/plugin-react-load][otel-plugin-react-load]
 
 ## Contributing
 
@@ -92,6 +93,7 @@ Apache 2.0 - See [LICENSE][license-url] for more information.
 [otel-plugin-https]: https://github.com/open-telemetry/opentelemetry-js/tree/master/packages/opentelemetry-plugin-https
 [otel-plugin-dns]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/node/opentelemetry-plugin-dns
 [otel-plugin-document-load]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/web/opentelemetry-plugin-document-load
+[otel-plugin-react-load]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/web/opentelemetry-plugin-react-load
 [otel-plugin-ioredis]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/node/opentelemetry-plugin-ioredis
 [otel-plugin-mongodb]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/node/opentelemetry-plugin-mongodb
 [otel-plugin-mysql]: https://github.com/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/node/opentelemetry-plugin-mysql

examples/react-load/preact/.babelrc

@@ -0,0 +1,9 @@
+{
+  "env": {
+    "test": {
+      "presets": [
+        ["preact-cli/babel", { "modules": "commonjs" }]
+      ]
+    }
+  }
+}

examples/react-load/preact/.gitignore

@@ -0,0 +1 @@
+size-plugin.json

examples/react-load/preact/README.md

@@ -0,0 +1,65 @@
+# Overview
+
+The React Load plugin provides auto-instrumentation for react lifecycle methods. 
+This example uses the plugin and exports them to the console.
+
+The example will show traces belong to the mounting, updating, and umounting flows as defined by React 16.4+. In this example we can show how this plugin can also be used in a Preact app.
+
+# Installation
+```
+# from this directory
+npm install
+```
+
+# Run the example
+Run docker
+```
+# from this directory
+npm run docker:start
+```
+
+Run app
+```
+# from this directory
+npm run build
+npm start
+```
+
+By default, the application runs on port 8080.
+
+Open Zipkin page at http://localhost:9411/zipkin/ - you should be able to see the spans in zipkin
+
+## Screenshots of traces
+Take note of the parent-child relationships.
+### First load
+Upon loading, http://localhost:8080 mounting spans will be exported
+<p align="center"><img src="./images/mounting.png?raw=true"/></p>
+<p align="center"><img src="./images/zipkin-mounting.png?raw=true"/></p>
+
+### Pressing 'Enter'
+Here we can see the previous component unmounting and the new component mounting.
+<p align="center"><img src="./images/redirect.png?raw=true"/></p>
+<p align="center"><img src="./images/zipkin-redirect.png?raw=true"/></p>
+<p align="center"><img src="./images/zipkin-redirect2.png?raw=true"/></p>
+
+### Pressing 'Make Request'
+While in loading state:
+<p align="center"><img src="./images/updating.png?raw=true"/></p>
+<p align="center"><img src="./images/zipkin-updating.png?raw=true"/></p>
+
+After a few seconds (when the request is fulfilled):
+<p align="center"><img src="./images/updating2.png?raw=true"/></p>
+<p align="center"><img src="./images/zipkin-updating2.png?raw=true"/></p>
+
+
+# Useful links
+- For more information on OpenTelemetry, visit: [opentelemetry.io][otel]
+- For more information on OpenTelemetry for Node.js, visit: [@opentelemetry/node][otel-node]
+
+# LICENSE
+
+Apache 2.0 - See [LICENSE][license-url] for more information.
+
+[license-url]: https://github.com/open-telemetry/opentelemetry-js-contrib/blob/master/LICENSE
+[otel]: https://opentelemetry.io/
+[otel-node]: https://github.com/open-telemetry/opentelemetry-js/tree/master/packages/opentelemetry-node

examples/react-load/preact/docker/collector-config.yaml

@@ -0,0 +1,18 @@
+receivers:
+  otlp:
+    endpoint: 0.0.0.0:55678
+
+exporters:
+  zipkin:
+    url: "http://zipkin-all-in-one:9411/api/v2/spans"
+
+processors:
+  batch:
+  queued_retry:
+
+service:
+  pipelines:
+    traces:
+      receivers: [otlp]
+      exporters: [zipkin]
+      processors: [batch, queued_retry]

examples/react-load/preact/docker/docker-compose.yaml

@@ -0,0 +1,19 @@
+version: "2"
+services:
+
+  # Collector
+  collector:
+    image: omnition/opentelemetry-collector-contrib:0.2.8
+    command: ["--config=/conf/collector-config.yaml", "--log-level=DEBUG"]
+    volumes:
+      - ./collector-config.yaml:/conf/collector-config.yaml
+    ports:
+      - "55678:55678"
+    depends_on:
+      - zipkin-all-in-one
+
+  # Zipkin
+  zipkin-all-in-one:
+    image: openzipkin/zipkin:latest
+    ports:
+      - "9411:9411"

examples/react-load/preact/package.json

@@ -0,0 +1,62 @@
+{
+  "private": true,
+  "name": "react-load-preact-example",
+  "version": "0.9.0",
+  "description": "Example of using @opentelemetry/plugin-react-load in browser with Preact",
+  "main": "index.js",
+  "scripts": {
+    "build": "preact build --no-prerender",
+    "docker:start": "cd ./docker && docker-compose down && docker-compose up",
+    "docker:startd": "cd ./docker && docker-compose down && docker-compose up -d",
+    "docker:stop": "cd ./docker && docker-compose down",
+    "start": "sirv build --port 8080 --cors --single"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com:open-telemetry/opentelemetry-js-contrib.git"
+  },
+  "keywords": [
+    "opentelemetry",
+    "react",
+    "preact",
+    "web",
+    "tracing"
+  ],
+  "engines": {
+    "node": ">=8"
+  },
+  "author": "OpenTelemetry Authors",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/open-telemetry/opentelemetry-js-contrib/issues"
+  },
+  "devDependencies": {
+    "identity-obj-proxy": "^3.0.0",
+    "preact-cli": "^3.0.0",
+    "preact-render-spy": "^1.2.1",
+    "sirv-cli": "1.0.3"
+  },
+  "dependencies": {
+    "@opentelemetry/context-zone": "^0.10.1",
+    "@opentelemetry/exporter-collector": "^0.10.1",
+    "@opentelemetry/plugin-react-load": "^0.8.0",
+    "@opentelemetry/tracing": "^0.10.1",
+    "@opentelemetry/web": "^0.10.1",
+    "preact": "^10.3.2",
+    "preact-render-to-string": "^5.1.4",
+    "preact-router": "^3.2.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "homepage": "https://github.com/opentelemetry-js-contrib/examples/react-load/preact#readme"
+}

examples/react-load/preact/public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset=utf-8 />
+    <title>React Load Example: Preact</title>
+  </head>
+  <body>
+  <div id="root"></div>
+  </body>
+</html>

examples/react-load/preact/src/components/Content.js

@@ -0,0 +1,59 @@
+import { BaseOpenTelemetryComponent } from '@opentelemetry/plugin-react-load'
+
+class Content extends BaseOpenTelemetryComponent {
+  constructor(props){
+    super(props)
+    this.state = {
+      results: null,
+      isLoading: false
+    }
+  }
+
+  componentDidMount(){
+    // Example, do something here
+  }
+
+  buttonHandler() {
+    this.setState({isLoading: true})
+    const randomDelay = Math.random() * 10000; 
+    setTimeout(() => {
+      this.setState({
+        isLoading: false,
+        results: randomDelay
+      })
+    }, 
+    randomDelay);
+  }
+
+  renderResults(){
+    if(this.state.isLoading){
+      return <div> Loading results...</div>;
+    } 
+    if (!this.state.results){
+      return (
+        <div>No Results</div>
+      )
+    }
+    return (
+      <div>
+        Request was delayed {this.state.results} ms
+      </div>
+    )
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>React Plugin Demo App</h1>
+        <button onClick={() => this.buttonHandler()} style={{marginBottom: '20px'}}>
+          Make Request
+        </button>
+        <div id="results">
+          {this.renderResults()}
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Content;

examples/react-load/preact/src/components/Home.js

@@ -0,0 +1,17 @@
+import { Link } from 'preact-router/match';
+import { BaseOpenTelemetryComponent } from '@opentelemetry/plugin-react-load';
+
+class Home extends BaseOpenTelemetryComponent {
+  render() {
+    return (
+      <div>
+          <h1>
+              React Plugin Demo App: Preact
+          </h1>
+          <Link href='/test'><button>Enter</button></Link>
+      </div>
+    )
+  }
+}
+
+export default Home;

examples/react-load/preact/src/components/app.js

@@ -0,0 +1,29 @@
+import { h, Component} from 'preact';
+import { Router } from 'preact-router';
+import Home from './Home';
+import Content from './Content';
+import Tracer from '../web-tracer';
+
+Tracer('react-load-preact-examples');
+
+export default class App extends Component {
+
+	/** Gets fired when the route changes.
+	 * @param {Object} event	"change" event from [preact-router](http://git.io/preact-router)
+	 * @param {string} event.url The newly routed URL
+	 */
+	handleRoute = e => {
+		this.currentUrl = e.url;
+	};
+
+	render() {
+		return (
+			<div id="app">
+				<Router onChange={this.handleRoute}>
+					<Home path="/" />
+					<Content path="/test"/>
+				</Router>
+			</div>
+		);
+	}
+}

examples/react-load/preact/src/index.js

@@ -0,0 +1,3 @@
+import App from './components/app';
+
+export default App;

examples/react-load/preact/src/sw.js

@@ -0,0 +1,4 @@
+import { getFiles, setupPrecaching, setupRouting } from 'preact-cli/sw/';
+
+setupRouting();
+setupPrecaching(getFiles());

examples/react-load/preact/src/web-tracer.js

@@ -0,0 +1,27 @@
+import { ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/tracing';
+import { WebTracerProvider } from '@opentelemetry/web';
+import { BaseOpenTelemetryComponent } from '@opentelemetry/plugin-react-load';
+import { ZoneContextManager } from '@opentelemetry/context-zone';
+import { CollectorTraceExporter } from '@opentelemetry/exporter-collector';
+
+export default (serviceName) => {
+  const provider = new WebTracerProvider();
+
+  const exporter = new CollectorTraceExporter({
+    url: 'http://localhost:55678/v1/trace',
+  });
+
+  provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));
+  provider.addSpanProcessor(new SimpleSpanProcessor(exporter));
+
+  provider.register({
+  contextManager: new ZoneContextManager(),
+  });
+
+  const tracer = provider.getTracer(serviceName);
+
+  BaseOpenTelemetryComponent.setTracer(serviceName)
+  BaseOpenTelemetryComponent.setLogger(provider.logger)
+
+  return tracer;
+}