feat: Add React Plugin (open-telemetry#164)

* feat(opentelemetry-plugin-react-load): instruments mounting

* test(opentelemetry-plugin-react-load): added tests for mounting spans

* refactor(opentelemetry-plugin-react-load): cleaned up types

* feat(opentelemetry-plugin-react-load): added attributes

* feat(opentelemetry-plugin-react-load): updating flow spans + tests

* fix(opentelemetry-plugin-react-load): root of codecov test command fix

* fix(opentelemetry-plugin-react-load): make attr names snake case

* fix(opentelemetry-plugin-react-load): removed logs from test components

* feat(opentelemetry-plugin-react-load): unmounting instrument

* feat(opentelemetry-plugin-react-load): base func for error handling

* refactor(opentelemetry-plugin-react-load): working component approach

- changed plugin model to component based approach
- fixed tests

* fix(opentelemetry-plugin-react-load): fixed js docs

* fix(opentelemetry-plugin-react-load): fixed error span naming and bug

* fix(opentelemetry-plugin-react-load): use version

* style(opentelemetry-plugin-react-load): cleaned up typos

* style(opentelemetry-plugin-react-load): set up eslint + ran linter

* test(opentelemetry-plugin-react-load): unmounting test

* style(opentelemetry-plugin-react-load): ran linter

* fix(opentelemetry-plugin-react-load): jsonified state stringify error

* docs(opentelemetry-plugin-react-load): react plugin docs & example

* fix(opentelemetry-plugin-react-load): make logs warn & fix react depend

* docs(opentelemetry-plugin-react-load): preact example

* style(opentelemetry-plugin-react-load): eof newlines

* fix: Update examples/react-load/react/README.md

Co-authored-by: Bartlomiej Obecny <bobecny@gmail.com>

* fix: context propagation for other plugins

* fix: removed unsed version variable

* style: redundant variable initializer

* refactor: name parent spans when starting span

* style: clean up react load examples/docs

* docs: added docker to react load examples

Co-authored-by: Bartlomiej Obecny <bobecny@gmail.com>

Author: thgao

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"