Enterprise React
React TraceChart Examples
In this blog post, I will provide TraceChart examples from the EnterpriseReact website, as well as examples I made for various use cases.
A Trace Chart is a visual representation used to display the details of a trace, including spans that represent individual operations within a process. It organizes spans hierarchically based on their parent-child relationships, showing the flow of a request as it moves through various services or components.
Each span typically includes information like its start time, end time, duration, and metadata (e.g., trace ID, span ID). Trace Charts are essential for diagnosing performance bottlenecks, identifying errors, and understanding the timing and dependencies of distributed processes.
Get Onur Dayıbaşı’s stories in your inbox
Join Medium for free to get updates from this writer.
TraceChart KnowledgeMap link offers access to all of the samples seen in the image below.
Note: The LearnReactUI.dev platform provides tutorials and source code for the blue-colored samples seen in the image below. For further and more complex examples you may contact me via this page. Also click on this link to access examples on other topics
Examples
Trace Chart Components
What are the features of the TraceChart component in this example. From the control panel on the right side, I have made this better understood by putting show/hide buttons.
- Show Mini Trace
- Show Duration
- Show Critical Path
- Show TraceChart Header
- Show Header
- Show Span Detail
- Show Hightlights (test Child1 & test Child1.3)
Span Highlight
In this example, we have focused on how we can higlight a span with the clicking something outside this component (For example Map, Tree or URL can trigger this event)
Span Focus
In this example, we have focused on how we can focus a span with the clicking something outside this component (For example Map, Tree or URL can trigger this event)
Invocation
In this example, I developed an example on how we can see the Invocation details when we click on the relevant span with the mouse.
Process Display
In this example, I tried to show how much of the parent process is formed by its child by showing where they intersect during the display of the process and its children.
Workflow Job Steps
A component similar to the previous example, in this case a Workflow Job on GitHub, you can see how much time the steps under it take and the effect of the parent on it.
Optimized
In this example, I rewrote the component with TypeScript by removing all the Zipkin related domain contents. In this way, it turned into just a Renderer Component.
