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.

# from this directory
npm install

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

Take note of the parent-child relationships.

Upon loading, http://localhost:8080 mounting spans will be exported

Here we can see the previous component unmounting and the new component mounting.

While in loading state:

After a few seconds (when the request is fulfilled):

• For more information on OpenTelemetry, visit: opentelemetry.io
• For more information on OpenTelemetry for Node.js, visit: @opentelemetry/node

Apache 2.0 - See LICENSE for more information.