⚡ 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)
• 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.

🗄️ Database Query Detection

Automatically detects and visualizes database operations from popular ORMs:

🖥️ 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

📡 Hover Previews

Hover over any fetch(), axios, or API wrapper call to see a quick summary with the HTTP method, URL, resolved route file, and a one-click link to trace the full flow.

⚙️ Right-Click Context Menu

Right-click on any function in a supported file to access Trace Function Flow directly from the editor context menu.

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

Node Types

The graph visualizes different types of code constructs:

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

Release Notes

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