Recently the OpenTelemetry project launched a demo application that demonstrates many aspects of instrumentation, metrics and trace gathering, providing insight across multi-service, multi-technology application stacks and in general how to leverage OpenTelemetry. The application architecture for the demo stack looks like this:
A front end web application – a web store for astronomy products – interacts directly and indirectly with different services – each implemented in different technologies.
All of these obviously have been instrumented in the OpenTelemetry way and therefore interactions in the web store result in end to end traces being produced, gathered and published.
I have created a simple Gitpod workspace definition that allows you to have this demo running in a few minutes tops. This workspace definition is provided trough this GitHub repo and could be opened on Gitpod with https://gitpod.io/#https://github.com/lucasjellema/gitpod-opentelemetry.
Instructions for running and accessing the OpenTelemetry Demo
When the workspace runs, it downloads the OpenTelemetry Demo and runs it through docker compose. When done initializing, more than a dozen containers are running – for each of the microservices and the front end application and for the OpenTelemetry Collector, Jaeger, Grafana, PostgreSQL and Redis.
The webstore web application launches in the browser preview (at port 8080) and you can start browsing, shopping and buying.
This will produce metrics and traces that you can inspect in Jager (8080-gitpodURL/jaeger/ui) and Grafana (8080-gitpodURL/grafana).
Jaeger – Traces:
Spans under trace:
and details for an individual span showing the SQL statement issued against the PostgreSQL database
Grafana – Metrics
You will not however find traces from within the frontend application. For the web application to deliver its traces, it needs to callout to the OpenTelemetry Collector and it tries to do so at localhost port 4318
In the Gitpod environment however, localhost is not what our browser needs it to be. For the full end-to-end experience, it is best to open the Gitpod workspace in our local IDE, for example VS Code Desktop.
The demo application can best be run locally – using port forwarding in for example VS Code (because it uses references to localhost for example to publish metrics that are not resolved correctly in the Gitpod workspace VS Code browser environment). So, open the workspace in VS Code Desktop (open the command palette in the VS Code Browser – using CTRL+Shift+P on a Windows machine) and select Gitpod: Open in VS Code.
Make sure that port 8080 is exposed publicly as well as forwarded, as well as port 4318 (where traces are published to):
Now you can access: monitoring tools:
- Grafana (metrics): http://localhost:8080/grafana/
- Jaeger UI (traces and logs): http://localhost:8080/jaeger/ui/
- Create additional load: Load Generator UI: http://localhost:8080/loadgen/
First Time Opening a Gitpod workspace in Local Desktop VS Code
Try to open a workspace in your local VS Code desktop for the smoothest dev experience (using port forwarding for services and web applications).
You need the MS Remote SSH extension for VS Code:
Also install the VS Code extension Gitpod Remote
Open the command palette in VS Code in the browser. Select Gitpod – Open in VS Code.
You will be asked:
* Open Visual Studio Code?
* Copy the this temporary password
* Allow an extension to open this URL?
* Enter password for remote connection
as shown in this picture.
Please comply and provide as requested.
You can now work locally (localhost:8080) against the CDE (Cloud Development Environment) – the cloud based Gitpod workspace environment.
Note: If you run a web application or a service that opens ports, you may want to forward ports – make sure that attempts to access localhost:SOME_PORT are forwarded correctly over the SSH connection to the Gitpod workspace environment.
Resources
Announcement of the OpenTelemetry demo – https://opentelemetry.io/blog/2022/demo-announcement/
GitHub Repository for the OpenTelemetry demo Astronomy Shop (the deployable artifacts and instructions) – https://github.com/open-telemetry/opentelemetry-demo
GitHub Repository with the source code for the OpenTelemetry demo Astronomy Shop OpenTelemetry Demo – source code
Use these scenarios to explore:
https://github.com/open-telemetry/opentelemetry-demo/tree/main/docs#scenarios
Details about Instrumentation in specific technologies (such as Java, .NET, JavaScript (frontend and Node), Python and more):
https://github.com/open-telemetry/opentelemetry-demo/tree/main/docs#language-feature-reference
The instructions are based on this OpenTelemetry Demo document
