

The following list shows the dependencies we added. So every time the user clicks on the button or scrolls the page, the auto-instrumentation plugin will generate traces for this.Ĭlone the following GitHub repository from the command line: git clone Step 3. We are going to delegate to OpenTelemetry libraries the job of capturing traces for the button and the scroll component. The front-end application contains a button that calls the back end using Express and a scroll component that calls the free public API. Please note that the repository also contains an Express application as a back end, but the focus of this tutorial is to instrument the front end only. You will be using a front-end react application that contains the sample React application code that we will instrument. You can refer to Docker and docker-compose to learn more.

In this demo, we are going to use Docker and docker-compose. For more information about OTELCOL deployment patterns, please take a look at OpenTelemetry Collector Deployment Patterns. OpenTelemetry Collector (also known as OTELCOL).Auto instrumentation via sdk-trace-web and a plugin to provide auto instrumentation for fetch.Related to the OpenTelemetry, we are using the following: For a good overview of observability and OpenTelemetry, please take a look at the article, Observability in 2022: Why it matters and how OpenTelemetry can help. The main focus of this article is to demonstrate how to instrument React applications to make them observable.
