How to Fix: crash when inspect network on Microsoft Edge

Microsoft Edge can crash the moment you open the Network tab because the app is streaming development responses that Edge DevTools mishandles in this specific Next.js learning project. The failure looks like a browser debugging problem, but the trigger is a combination of Next.js development mode, streaming responses, and Edge attempting to inspect those requests while the app is rendering server-driven updates.

Understanding the Root Cause

This issue appears in the reproduction project when running next dev and opening Microsoft Edge DevTools on the Network panel. In development, Next.js uses a more complex request pipeline than production:

• Hot reloading and live updates keep long-lived development connections open.
• React Server Components and streaming payloads can generate network responses that arrive incrementally instead of as a single static document.
• Edge DevTools tries to inspect and decode those responses in real time.

In this scenario, the browser can crash not because the application code is invalid, but because Edge DevTools struggles with specific development-time network frames or streamed payload inspection. That is why the app may still work in another browser, in production mode, or even in Edge if you avoid the Network inspector.

Technically, this is best understood as a browser tooling compatibility issue exposed by a Next.js dev server behavior rather than a standard runtime exception inside your application logic.

Step-by-Step Solution

The safest fix is to confirm the bug is tied to Edge DevTools, then reduce or bypass the specific development behavior causing the crash.

1. Reproduce the issue cleanly

git clone https://github.com/vercel/next-learn.git
cd next-learn/dashboard/final-example
npm install
npm run dev

Then open the app in Microsoft Edge, launch DevTools, and switch to the Network tab.

2. Verify that the crash is specific to Edge DevTools

Test the same app in Chrome or another Chromium-based browser. If the app stays stable there, the bug is likely isolated to Edge inspection tooling.

3. Run the app in production mode

This helps confirm the problem is tied to development streaming/debug traffic.

npm run build
npm run start

If Edge stops crashing in production, the root trigger is the development server behavior rather than your page components.

4. Disable likely triggers during debugging

If you only need to inspect functional requests, avoid opening the Network panel while the page is establishing development connections. You can also test after reducing dynamic behavior in the sample app.

Useful temporary checks include:

• Reload the page before opening Network.
• Disable browser extensions in Edge.
• Use an InPrivate window to rule out extension interference.
• Inspect with Chrome DevTools while continuing to use Edge for normal browsing.

5. Upgrade dependencies and browser versions

Make sure both the framework and browser are current, because this class of bug is often fixed in either Next.js, React, or Edge itself.

npm outdated
npm update

Also update Microsoft Edge from its settings menu and retry.

6. Reduce development-only complexity if needed

If you need a temporary workaround inside the project, test whether specific server-rendered or streamed sections trigger the crash. For example, isolate routes using loading states, server data fetching, or incremental rendering and confirm whether a simpler page avoids the problem.

// Example debugging strategy:
// Temporarily replace a dynamic server-rendered page
// with a minimal component to see whether Edge stops crashing.

export default function Page() {
  return <div>Minimal test page</div>;
}

If the crash disappears, add features back gradually until the failing network pattern is identified.

7. Use a practical workaround for team productivity

Until the upstream issue is fixed, the most reliable workflow is:

• Develop normally with next dev.
• Use Chrome DevTools for network inspection.
• Use Edge for visual/browser-specific validation only.

This avoids blocking development while preserving reproducibility for bug reports.

Common Edge Cases

• Only crashes in development: This strongly suggests the issue is related to HMR, dev overlays, or streamed RSC payloads rather than production code.
• Only one route crashes: A page using more dynamic server rendering, auth checks, redirects, or data fetching may generate the specific response pattern Edge fails to inspect.
• Crash happens before requests fully appear: The problem may be triggered by WebSocket/EventStream-like development connections, not regular fetch/XHR traffic.
• Works after build but not after dev restart: Cached browser state, extensions, or a stale development session can affect reproducibility.
• Happens only with DevTools docked: Rendering and memory behavior inside the browser can differ depending on DevTools mode, so test docked and undocked states.

FAQ

Is this a Next.js bug or a Microsoft Edge bug?

It is usually a compatibility issue between Next.js development networking and Edge DevTools inspection. The app behavior triggers it, but the crash itself commonly points to browser tooling instability.

Why does it happen in next dev but not npm run start?

next dev enables hot reload, debug overlays, and streamed development responses. npm run start serves the optimized production build, which uses a different request profile and often avoids the Edge crash.

What is the best workaround while waiting for a fix?

The most practical workaround is to keep using the app in Edge if needed, but perform network inspection in Chrome DevTools or another stable browser. Also keep Edge and project dependencies updated so you can retest when fixes land.

If you are documenting this for a team or an issue tracker, note the exact Edge version, Next.js version, whether the crash occurs only in Network, and whether production mode avoids it. Those details make the upstream bug much easier to diagnose.