What is Network tab?
A panel in your browser's developer tools that lists every request your page makes and every reply.
Where Network tab goes wrong in real apps
Each of these is a short scenario built from a real failure in an app made with AI. Read the answer here, or walk through it yourself in about four minutes.
Bills that explode · 4 minutes · Pro
2 million requests from one tab
You left your dashboard open overnight. Your database usage page shows 2 million requests from a single browser.
Read the fixWhy is my useEffect fetching in an infinite loop?
The effect changes one of its own dependencies, for example setting a state object it depends on, so every run triggers another run. Remove the self-update, depend only on values that really change, and watch the Network tab for repeating requests. Select only the columns you display to reduce data transfer.
Launch day · 4 minutes · Pro
Twelve requests on the home page
Your home page is mostly text and a sign-up button. The Network tab shows twelve API calls before it finishes loading, some of them failing.
Read the fixWhy does my page make so many API calls?
Often a shared layout or global provider fetches data for every page, so even a simple home page loads user details, notifications, orders and admin stats it never shows, and several components request the same data separately. Fetch data in the page or component that displays it, when it is displayed, and share one request instead of repeating it.
The life of a click · 4 minutes · Free
The save that saved nothing
A user clicks Save on their profile. A green 'Saved!' appears. When they reload, their changes are gone.
Walk it, freeWhy does my app say saved when the save failed?
fetch only throws on network failures, not on HTTP errors. A 500 response still resolves, so code that shows a success message right after await fetch() reports success even when the server failed. Check response.ok, and show the error when it is false.
Bills that explode · 5 minutes · Pro
The 4 MB thumbnail
Your marketplace shows 24 small product photos per page. On phones it takes ages to load, and your storage bill warns you are over your data transfer limit.
Read the fixWhy are my uploaded images making my app slow?
Your app is probably storing and serving the full-size photos users upload, often 4 MB or more, even where they are shown as small thumbnails. Browsers download the whole file before shrinking it. Create smaller copies at upload or with an image service, serve WebP or AVIF, and give each screen the size it needs.
Related terms
- Request
- A message your browser (or any program) sends to a server asking for something: 'give me invoice 105' or 'save this profile'.
- API
- The part of an app that other programs talk to. Your app's pages ask its API for data, like a waiter taking orders to a kitchen.
- Server
- A computer that runs your app's code out of sight. Users can't change what happens there, which is why checks belong there.
- Browser
- Chrome, Safari and friends. Everything that runs here is visible to, and changeable by, the person using it.
- Database
- Where your app keeps its data, organised in tables, like a set of spreadsheets.
- Authentication
- Checking who someone is, usually by signing in.