DEV Community

Aswin S
Aswin S

Posted on

Your app makes 47 API calls on page load. You just don't know it yet.

#vue #webdev #javascript #react

Open DevTools on your app. Go to Network tab. Filter by XHR. Refresh.

Count the requests.

Now look closer:

  • That /api/user endpoint? Called 4 times — once by Header, once by Sidebar, once by ProfileCard, once by NotificationBell. Same data. Four round-trips.
  • Those 25 product cards? Each one fires its own GET /api/products/:id. That's 25 requests instead of 1 batch call.
  • That status indicator? Polling every 2 seconds. The data changes once a minute. 95% of those polls are wasted.

Lighthouse doesn't see any of this. It scores your HTML, your images, your CSS. Your API layer? Invisible.

So I built a tool that sees it.

One command 

npx flux-scan https://your-app.com
Enter fullscreen mode Exit fullscreen mode

That's it. Opens headless Chrome. Watches every API call for 30 seconds. Runs 13 rules. Gives you a score.

Here's what the output looks like:

╔════════════════════════════════════════════════════╗
║  FluxAPI Report — Score: 38/100 (poor)            ║
╚════════════════════════════════════════════════════╝

⚡ Efficiency   ██████░░░░░░░░░░░░░░ 30%
💾 Caching      ████████████░░░░░░░░ 55%
🔄 Patterns     ██████████████░░░░░░ 70%

Issues Found:
  🔴 5 critical  🟡 5 warnings  ℹ️  3 info

Top Fixes:
  E2: GET /api/user called 4x from 4 components
     ⚡ 600ms faster  📉 3 fewer requests
  E3: N+1: 25 individual GET /products/:id
     ⚡ 2.1s faster  📉 24 fewer requests

📛 Add to your README:
  ![FluxAPI Score](https://img.shields.io/badge/FluxAPI_Score-38%2F100-red)
Enter fullscreen mode Exit fullscreen mode

No config. No API key. No signup.

The 13 things it catches

I didn't invent these patterns. Every senior dev has debugged them at 2am. I just automated the detection.

The ones that hurt:

  • Request Waterfalls — A → B → C → D running sequentially when they have no data dependency. On WiFi, costs 200ms. On Jio 4G? 600ms.
  • Duplicate Fetches — Same endpoint called from multiple components because nobody made a shared hook. The most common bug I've seen in React/Vue apps.
  • N+1 Pattern — The backend dev's nightmare, happening in the frontend. List page doing individual fetches instead of one batch.
  • No Cache Strategy — Zero Cache-Control, zero staleTime. Every single component mount hits the network. Every. Single. One.

The ones that waste:

  • Over-fetching — API returns 50 fields. Component reads 6. That's 88% wasted bytes on every request.
  • Polling Waste — Polling every 2s when data changes every 60s. 95% of polls return identical data.
  • Missing Compression — JSON responses without gzip. On a 87KB product list, that's 52KB wasted per load.

The ones you forget:

  • Missing Revalidation — Has ETag but never sends If-None-Match
  • Over-Caching — Cache TTL of 1 hour but data changes every 5 minutes
  • No Error Recovery — 500s with no retry strategy

Each violation comes with copy-paste fix code that matches your stack. Using TanStack Query? It generates useQuery with the right staleTime. Using SWR? useSWR with dedupingInterval. Not using a data library? Plain Promise.all.

Here's what made me build this

I work at a company in Kerala building tax software. Our app is Laravel + Vue. Users are accountants across India — many on Jio 4G, some on BSNL connections that would make your WiFi cry.

One day I opened Network tab and counted. 43 API calls on the dashboard. Twelve were duplicates. Eight were sequential waterfalls. The app scored 85 on Lighthouse.

Lighthouse said we were fine. Our users in Patna said the app took 8 seconds to load.

That's when I realized: the same API patterns cost 3x more on a mobile network. A waterfall that's 200ms on WiFi is 600ms on Jio 4G. An N+1 that's 1 second on broadband is 4 seconds on Airtel 3G.

So FluxAPI has network-adjusted scoring:

npx flux-scan https://myapp.com --network jio-4g
Enter fullscreen mode Exit fullscreen mode

Same code. Same API calls. Different score. Because your Tier 2 users aren't on WiFi.

Network Score Impact
WiFi Baseline
Jio 4G ~20% harder
Airtel 3G ~40% harder
BSNL 2G ~70% harder

Live monitoring during dev

The CLI gives you a snapshot. But what about catching issues as you write code?

npm install @fluxiapi/vue   # or @fluxiapi/react
Enter fullscreen mode Exit fullscreen mode 
<template>
  <RouterView />
  <FluxDevTools />
</template>
Enter fullscreen mode Exit fullscreen mode

One component. A floating badge in the corner with your live score. Click it and a panel expands showing every violation, every request, real-time. Change code, refresh, score updates.

It integrates with TanStack Query, SWR, and Vue Query — so it knows your cache configuration and can suggest better values.

What I want you to do right now

Open your terminal. Run this:

npx flux-scan https://your-app.com -o report.html
Enter fullscreen mode Exit fullscreen mode

Open the report. Look at the score. Look at the top issues. I bet you'll find at least one duplicate fetch you didn't know about.

Then open the report and try the "Copy Badge" button. Add it to your README. Show your team what your API health looks like.

GitHub: github.com/aswinsasi/fluxapi
npm: @fluxiapi/scan
Live demo: fluxapi-phi.vercel.app

MIT licensed. I'd love a ⭐ if this saved you time.

What's the worst API pattern you've found in your codebase? Drop it in the comments — I'm genuinely curious what patterns I should add next.

Top comments (0)