Skip to content

drazenbuljovcic/otel-next

Repository files navigation

Next.js instrumentation POC

Please check the issue for motivation

image

We have a deployed client application

The trace button sends a request to the /api endpoint - which is an API route. Both the browser and the API function are instrumented. That means they will produce a trace_id for the lifecycle of the request and the span_id for the respective piece of work being done by each process.

The standardized way of achieving this propagation is using the traceparent header defined in the spec. All services should conform to this standard to produce proper output.

traceparent browser api server 1 downstream_services
trace_id span_id span_id span_id ...

image

Locally running an instance of the otel collector zipkin the output would look something like this - this is already a big boost in reliability of our observability stack!

⋅ Run the docker container and access http://localhost:9411 to get the to the UI

$ docker run --rm -d -p 9411:9411 --name zipkin openzipkin/zipkin

⋅ Press the Trace button and find the request /api in the network devtools ⋅ Obtain the trace_id | header traceparent: 00-dd0530acd5e4e85d4d7c69c8a3df6d71-ae543dd039963173-01 ⋅ Please also check the developer console in which you can observe the details of the created span


The tool that can be used to preview the waterfall information is honeycomb. Honeycomb is a cloud solution that brings a lot value to development teams, and whole engineering organizations. It provides additional benefits to whole distributed systems observability stack by defining SLOs and Error budgets that can route alerts to SRE tools like OpsGenie. Additionally, this tool is great for rapid iterative debugging in cases of production issues.

image

Attributes that are attached to certain spans can provide information about the specific process that was running at the time - like attaching ids that were generated or pieces of output which was produced.

NOTE The request will also fail in order to be able to present the possibility of attaching error information directly to the span - including log information on what happened for further debugging

Preview env

🔴 Unfortunately honeycomb does not support publicly shareable dashboard displaying traces