DEV Community

mohammad garmabi
mohammad garmabi

Posted on

See Every Fetch: DevTools for HTTP, SSE, SSR, and tRPC

#ai #api #javascript #programming

tanstack-fetch 1.4.0 introduces tanstack-fetch/devtools: a development-only DevTools dock for inspecting requests directly from the createFetch pipeline.

It tracks:

  • HTTP
  • SSR / Edge
  • SSE
  • tRPC
  • request attempts
  • call sites
  • SSE events
  • request timing

And it can jump from a request directly to the source file that triggered it.

The problem

The browser Network tab can tell you:

GET /api/profile
200
143ms
Enter fullscreen mode Exit fullscreen mode

But when debugging an application, you often need:

Who called this?
Was this SSR?
Was the request retried?
Did SSE actually close?
Where did this request originate?
Did tRPC pass through my interceptor?
Enter fullscreen mode Exit fullscreen mode

That's what the new DevTools integration is designed to answer.

Install 

npm i tanstack-fetch@1.4.0
Enter fullscreen mode Exit fullscreen mode 
import { createFetch } from 'tanstack-fetch'
import { setupDevtools } from 'tanstack-fetch/devtools'

const api = createFetch({
  baseUrl: import.meta.env.VITE_API_URL,
  plugins: ['trace'],
})

if (import.meta.env.DEV) {
  setupDevtools(api)
}
Enter fullscreen mode Exit fullscreen mode

trace is useful because it gives each request a stable ID:

requestId:attempt
Enter fullscreen mode Exit fullscreen mode

That makes retries and repeated requests much easier to distinguish.

Configuration 

setupDevtools(api, {
  http: true,
  sse: true,
  ssr: true,
  trpc: true,
  open: false,
})
Enter fullscreen mode Exit fullscreen mode

Shortcut:

Alt + Shift + F

macOS:

⌥ ⇧ F

What does it record?

HTTP 

method
path
status
duration
attempts
call site
Enter fullscreen mode Exit fullscreen mode

SSR

The DevTools can distinguish SSR / Edge requests and show incoming authentication context without dumping secrets.

SSE

SSE requests have a stream lifecycle:

pending → live → success
Enter fullscreen mode Exit fullscreen mode

or:

pending → live → error
Enter fullscreen mode Exit fullscreen mode

or:

pending → live → aborted
Enter fullscreen mode Exit fullscreen mode

Each SSE event can also be inspected:

id
name
payload
Enter fullscreen mode Exit fullscreen mode

tRPC

The tRPC adapter marks operations using:

meta.operation = 'trpc'
Enter fullscreen mode Exit fullscreen mode

This lets DevTools group and identify them alongside normal HTTP requests.

Call-site tracking

One of the main reasons I built this is source tracing.

Instead of stopping at:

GET /api/profile
Enter fullscreen mode Exit fullscreen mode

you can inspect the application call graph:

ProfilePage
  ↓
useProfile
  ↓
profile.hook.ts
  ↓
api.get()
Enter fullscreen mode Exit fullscreen mode

Then click the relevant frame and open it in:

  • Cursor
  • Zed
  • VS Code

The editor deep link includes the source location.

Why not just use the Network tab?

Because the Network tab observes the browser's network layer.

This DevTools integration observes the fetch abstraction your application actually uses.

Type Detection
HTTP normal fetch calls
SSR `source: 'ssr' \
SSE {% raw %}onSseOpen, events, onSseClose
tRPC meta.operation = 'trpc'

This makes it possible to inspect different application-level request types in one place.

Two lifecycle improvements in 1.4.0

Successful tRPC responses

Previously, successful tRPC responses could skip onResponse.

The adapter now invokes onResponse for successful responses while keeping the response body unread for tRPC parsing.

That makes timing and DevTools instrumentation possible.

SSE close lifecycle

SSE previously had no onSseClose lifecycle hook.

Now:

onSseClose
Enter fullscreen mode Exit fullscreen mode

allows the client and DevTools to distinguish an active stream from a cleanly closed one.

Multiple clients, one DevTools store

If HTTP and SSE use separate factories:

import { createFetch } from 'tanstack-fetch/sse'
import {
  createDevtools,
  mountDevtools,
} from 'tanstack-fetch/devtools'

const dt = createDevtools({
  http: true,
  sse: true,
  ssr: true,
  trpc: true,
})

const api = createFetch({
  plugins: ['trace', 'sse-resume'],
  interceptors: [dt.interceptor],
})

mountDevtools({
  store: dt.store,
  open: true,
})
Enter fullscreen mode Exit fullscreen mode

Both clients can report into the same store and the same dock.

Live demo

You can try it directly in the browser:

DevTools example

No installation required.

Trigger HTTP, upload, SSR, SSE, and tRPC examples, then open the dock with:

Alt + Shift + F

What is tanstack-fetch?

tanstack-fetch is a typed Fetch client designed around the TanStack Query model.

The core contract is intentionally small:

success → data
HTTP error → FetchError
cancellation → AbortSignal
Enter fullscreen mode Exit fullscreen mode

Optional modules add:

  • SSR
  • SSE
  • uploads
  • React
  • tRPC
  • DevTools

It is not an official TanStack package.

Development only

Keep DevTools behind your development environment:

if (import.meta.env.DEV) {
  setupDevtools(api)
}
Enter fullscreen mode Exit fullscreen mode

Links

If you try it in a real application, let me know what you would add next: filters, export, React integration, or something else.

Top comments (0)