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:/open-telemetry/opentelemetry-js/tree/master/packages/opentelemetry-plugin-https
 [otel-plugin-dns]: https:/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/node/opentelemetry-plugin-dns
 [otel-plugin-document-load]: https:/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/web/opentelemetry-plugin-document-load
+[otel-plugin-react-load]: https:/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/web/opentelemetry-plugin-react-load
 [otel-plugin-ioredis]: https:/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/node/opentelemetry-plugin-ioredis
 [otel-plugin-mongodb]: https:/open-telemetry/opentelemetry-js-contrib/tree/master/plugins/node/opentelemetry-plugin-mongodb
 [otel-plugin-mysql]: https:/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:/open-telemetry/opentelemetry-js-contrib/blob/master/LICENSE
+[otel]: https://opentelemetry.io/
+[otel-node]: https:/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://[email protected]: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:/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:/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;
+}