@tushell/traceflow

Reusable React and Next.js trace viewer for Langfuse-backed Tushell traces.

Install

npm install @tushell/traceflow

Environment

Server-side trace fetching reads these runtime variables when explicit options are not supplied:

LANGFUSE_SECRET_KEY=
LANGFUSE_PUBLIC_KEY=
LANGFUSE_HOST= # optional, defaults to https://cloud.langfuse.com

Next.js usage

import { TraceFlow } from "@tushell/traceflow"
import { fetchLangfuseTraceData } from "@tushell/traceflow/server"

export default async function TracePage({
  params,
}: {
  params: { traceId: string }
}) {
  const trace = await fetchLangfuseTraceData(params.traceId)

  return <TraceFlow data={trace} />
}

fetchLangfuseTraceData uses Langfuse public API endpoints for traces, observations, and scores with Basic Auth. Transient Langfuse 5xx, 429, and 408 responses are retried by default.

RISE display

The component follows the prototype RISE specification with synchronized hierarchy, waterfall timeline, scores, JSON inspection, search, nested expand/collapse navigation, and selected-span details.