**Approach overview**Start with a repeatable checklist: reproduce in browser → capture artifacts (HAR, logs) → simulate conditions (throttle/offline) → automate reproduction → isolate layer (client/server/CDN).**Step-by-step**- Reproduce in DevTools: open Network tab, preserve log, disable cache, reproduce request for /api/user/:id. Note timing, status, response size.- Throttle & offline: use Network > Throttling (Fast 3G, Slow 3G) and Offline toggle to see if timeouts correlate with latency/loss.- Capture HAR: right‑click Network → Save all as HAR with content. Store with timestamp, user id, test case.- Diagnostic logging: instrument front-end to log request start/end, headers, response status, retry count, stack traces, and navigator.connection (effectiveType, downlink). Send logs to console and a short-lived remote debug endpoint.- Automate with Cypress / Playwright:javascript
// Playwright example: emulate slow network and capture HAR
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext({ recordHarPath: 'user-profile.har' });
await context.setDefaultNavigationTimeout(45000);
await context.route('**/api/user/*', route => route.continue());
const page = await context.newPage();
await context.setNetworkConditions({ offline: false, download: 50000, upload: 50000, latency: 200 });
await page.goto('https://app.example.com/profile/123');
await browser.close();
})();
javascript
// Cypress example: stub slow response
cy.intercept('GET', '/api/user/*', req => {
req.on('before:response', res => {
return new Promise(r => setTimeout(r, 500)); // delay to reproduce timeout
});
}).as('getUser');
cy.visit('/profile/123');
cy.wait('@getUser');
**Isolation checklist**- Client-side: inspect console errors, aborts, request retries, CORS failures, auth tokens expiring.- Server-side: if HAR shows request reached origin (check via server logs, request IDs), and origin responds slowly/fails.- Middleboxes/CDN: compare direct-to-origin vs via CDN (bypass CDN or use host header), check TTLs, and packet captures if needed. Use curl/wget from different networks to compare.**Outcome & next steps**Collect HAR + app logs + server request IDs, reproduce in CI with Playwright, then open ticket with reproducible steps and artifacts indicating whether fix belongs to frontend, backend, or infra.