Incident Cause Tracer React component
Walks an incident backwards from what people noticed to the change that caused it, with a confidence score, ideas ruled out and the evidence behind each step.
About the Incident Cause Tracer component
Incident Cause Tracer shows how a problem got from its source to your customers. It starts with what people noticed and steps back one link at a time until it reaches the cause.
Each step carries a confidence score, the evidence behind it and the ideas that were ruled out, so a reader can check the reasoning, not just the conclusion.
When to use it
Use it in incident reviews, status tools and observability products, or anywhere a team needs to agree on what happened.
Use it once there's a clear chain. While a team is still investigating, a plain timeline is more honest.
Installation
Add the Incident Cause Tracer component to your project with the shadcn CLI. It lands in components/incident-cause-tracer.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/incident-cause-tracerProps
<IncidentCauseTracer /> accepts 7 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Checkout failures" |
| subtitle | string | "Traced back eight minutes across four services." |
| steps Start from what people noticed and end on the root cause. | CauseStep[] | DEFAULT_STEPS |
| autoTrace Walks the chain step by step when it scrolls into view. | boolean | true |
| stepMs Milliseconds between steps. | number | 520 |
| onSelectStep | (step: CauseStep) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Checkout failures"
- subtitlestringDefault: "Traced back eight minutes across four services."
- steps
Start from what people noticed and end on the root cause.
CauseStep[]Default: DEFAULT_STEPS - autoTrace
Walks the chain step by step when it scrolls into view.
booleanDefault: true - stepMs
Milliseconds between steps.
numberDefault: 520 - onSelectStep(step: CauseStep) => void
Incident Cause Tracer FAQ
- Does it find the root cause by itself?
- No. You pass in the steps, and it presents them. Your data or your team decides the chain.
- Can I turn off the walk-through?
- Yes. Set autoTrace to false and every step shows straight away.
- Does the height change between steps?
- No. Every evidence panel shares one grid cell, so the tallest one sets the height.
- What about reduced motion?
- The walk is skipped and the card goes straight to the root cause.
