Trace Function Flow

Visualize the complete execution path of any function — across files, hooks, services, APIs, routes, and database queries — in a single click.

Trace Function Flow is a VS Code extension that performs static AST analysis on your TypeScript, JavaScript, React, and Next.js projects to build an interactive call graph. Place your cursor on any function and click Trace Function to see exactly where your code goes — from event handler to API call to route handler to database query — all rendered as a navigable flowchart inside VS Code.

Features

🔍 One-Click Function Tracing

Click the Trace Function CodeLens above any function to instantly generate a visual call graph of its entire execution path.

• Traces through local calls, cross-file imports, aliases, and re-exports
• Follows React hooks (useEffect, useMutation, custom hooks)
• Traces functions wrapped in useCallback / useMemo the same as plain functions
• Resolves TanStack Query hooks (useQuery, useMutation, useInfiniteQuery) and traces their queryFn / mutationFn
• Detects Redux dispatches and Zustand store actions
• Handles higher-order callbacks (.map(), .forEach(), .then(), setTimeout)
• Smart cycle detection — recursive calls are marked and traced without infinite loops

🌐 End-to-End API Flow Tracing

When a traced function makes an HTTP call (fetch, axios, or a custom API wrapper), the extension automatically:

1. Detects the URL and HTTP method
2. Matches it to your Next.js App Router route handler (route.ts)
3. Traces the server-side handler code
4. Continues into services, utilities, and database queries

All of this appears in a single unified graph — frontend to backend in one view.

🖥️ Interactive React Flow Graph

The trace result opens in a webview panel with a full-featured graph UI:

• Dagre auto-layout — nodes are automatically arranged in a clean top-down hierarchy
• Color-coded nodes — functions, hooks, API calls, route handlers, DB queries, and more each have distinct visual styles
• Animated edges — cross-file calls are animated; cycle-back edges are dashed
• Click-to-navigate — click any node to view its details; double-click to jump to the source file
• Detail sidebar — shows function name, file location, HTTP method, URL, DB model, code snippet, and more
• Minimap — overview of the full graph for quick orientation
• Legend panel — explains all node and edge types
• Zoom controls — zoom in/out and fit-to-view

Supported Languages

• TypeScript (.ts)
• TypeScript React (.tsx)
• JavaScript (.js)
• JavaScript React (.jsx)

Usage

Trace a Function

1. Open any .ts, .tsx, .js, or .jsx file
2. Click the Trace Function CodeLens above a function declaration
3. The call graph opens in a side panel

Alternatively:

• Command Palette → Trace Function Flow: Trace Function Flow
• Right-click a function → Trace Function Flow
• Place cursor on a function and run the command — if the cursor isn't on a function, a quick-pick menu lets you choose from all detected functions in the file

Trace an API Flow (Legacy)

Use Trace Function Flow: Trace API Request Flow (Legacy) from the command palette to trace starting from a specific fetch() or axios call.

Scan Workspace Routes

Run Trace Function Flow: Scan Workspace Routes to index all Next.js API routes in your workspace. This improves route matching accuracy for API call tracing.

Extension Settings

How It Works

Trace Function Flow uses the TypeScript Compiler API for static AST analysis — no runtime instrumentation, no code changes, no build step required.

1. Parse — The source file is parsed into an AST using ts.createSourceFile
2. Detect — Functions, hooks, and API calls are identified via AST pattern matching
3. Resolve — Imports, aliases, and re-exports are resolved to their source files
4. Trace — A recursive DFS traversal follows function calls across files, building a call graph
5. Enrich — API calls are matched to route handlers; DB queries are detected in service files
6. Render — The graph is sent to a React Flow webview for interactive visualization

Requirements

• VS Code 1.85.0 or later
• A TypeScript, JavaScript, React, or Next.js project

No additional dependencies or configuration needed — the extension works out of the box.

Known Limitations

• Static analysis only — dynamic calls like obj[method]() or computed property access cannot be resolved and are marked as "unresolved"
• No runtime data — the extension analyzes source code structure, not runtime behavior
• Next.js App Router — route matching is optimized for the App Router (app/ directory). Pages Router support is limited
• Monorepo support — traces within the first workspace folder; cross-workspace-folder tracing is not supported

About the Developer

Trace Function Flow is developed and maintained by Risheek Ojha under the sudopanda publisher account.

Feedback, bug reports, and feature requests are welcome.

Release Notes

1.1.0

• New: Tracing support for functions wrapped in useCallback (and useMemo) — detected by CodeLens and traced identically to plain functions, including same-file calls between two useCallback handlers
• Fix: Resolved a bug where certain imported function calls (particularly calls to built-in methods like .toString(), .valueOf(), .hasOwnProperty() on local variables) were incorrectly treated as cross-file imports, producing an empty/unresolved-looking node
• Fix: Imported functions now follow barrel re-export chains (export { x } from './y') to resolve to their actual implementation file, instead of stopping at the first re-exporting file
• Improved: Genuinely unresolvable imports now produce a clearly labeled "Unresolved Call" node (with the correct file path where known) instead of a node with no label or fabricated line number
• Improved: Navigating to a file from the graph (single or double-click, or the sidebar's "Open in Editor") is now fail-safe — a missing, moved, or otherwise unopenable file shows a warning instead of risking a crash
• Improved: The trace graph panel's editor group is now locked when opened, so opening other source files afterward keeps them in the main editor instead of replacing the graph
• New: The graph toolbar now shows a live "Visible Nodes" count that updates as the graph changes

1.0.0

• One-click function tracing with interactive call graph
• Cross-file import resolution with alias and re-export support
• API call detection (fetch, axios, custom wrappers, React Query)
• Next.js App Router route matching and server-side handler tracing
• Database query detection (Prisma, Mongoose, Sequelize, Drizzle, raw SQL)
• Cycle detection and max-depth safeguards
• React Flow webview with Dagre layout, minimap, legend, and zoom controls
• Detail sidebar with click-to-navigate source file linking
• Hover previews for API calls
• Right-click context menu support

Publisher: sudopanda