Observability for front-end web clients with OpenTelemetry and Jaeger in 5 minutes
This is a super-alpha-example-only*, intended as a proof of concept for integrating observability tools into a front-end web application.
*OpenTelemetryJS and many related tools are in ALPHA at time of writing, in addition, the below example hacks around some yet-to-be-implemented components for the sole purpose of demonstrating the tools we will likely be using a little further down the track! (more on this in Notes section at the end).
In short — lets focus on the concepts, not the implementation 😬
O’Reilly have a nice writeup here — but put very simply, it refers to the utility provided when you combine the three pillars (as defined in Distributed Systems Observability by Cindy Sridharan):
“An event log is an immutable, timestamped record of discrete events that happened over time”
“Metrics are a numeric representation of data measured over intervals of time.”
“A trace is a representation of a series of causally related distributed events that encode the end-to-end request flow through a distributed system.”
This article relates to the integration of tracing into front-end web applications (e.g. React apps).
- Jaeger: provides “open source, end-to-end distributed tracing. Monitor and troubleshoot transactions in complex distributed systems”
Step #1: run all the Jaeger things:
# yes this example uses docker, cos, easy
docker run -d — name jaeger -e COLLECTOR_ZIPKIN_HTTP_PORT=9411 -p 5775:5775/udp -p 6831:6831/udp -p 6832:6832/udp -p 5778:5778 -p 16686:16686 -p 14268:14268 -p 9411:9411 jaegertracing/all-in-one:1.14
Open Jaeger UI: http://localhost:16686/
Step #2: run a CORS proxy
docker run -p 8888:3000 psimonov/cors-anywhere
Step #3: clone demo repo
Step #4: build packages and example
# core repo
npm install# crude demo exporter
npm run prepare# crude demo web app
Point your browser at: http://localhost:8090 to run the demo traces + export.
Step #5: explore Jaeger UI
Refresh http://localhost:16686, and you should be able to see your service:
Once you select your service, hit “Find Traces”:
Then select a trace to explore it’s spans in more detail:
- There is a bunch of other work happening around the place, things are still very much in flux — keep an eye on https://github.com/open-telemetry/opentelemetry-js for more powerful tools to come!
- If you have issues running the example web app/see errors in console at http://localhost:8090, you might need to check the proxy path — which uses
host.docker.internaland was only tested on MacOS.