Error.tsx for route errors in NextJS - Performance & Optimization

Performance: Error.tsx for route errors

MEDIUM IMPACT

This affects how quickly error pages render during route failures, impacting user experience during navigation errors.

Handling route errors with an error component

NextJS

'use client';

export default function Error({error, reset}) {
  return (
    <div role="alert" aria-live="assertive">
      An error occurred. <button onClick={reset}>Please try again later.</button>
    </div>
  );
}

Static error UI renders immediately without blocking or extra data fetching, improving responsiveness.

📈 Performance GainNon-blocking render, reduces INP by 50-100 ms

Handling route errors with an error component

NextJS

'use client';

export default function Error({error, reset}) {
  // Heavy logic inside error component
  let data = 0;
  for(let i = 0; i < 10000000; i++) {
    data += i;
  }
  return <div>Error occurred: {data}</div>;
}

Running heavy synchronous logic inside the error component blocks rendering and delays error display.

📉 Performance CostBlocks rendering for 100+ ms depending on computation time, increases INP

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy synchronous logic in Error.tsx	Increased DOM nodes if rendering fetched data	Multiple reflows due to async updates	High paint cost due to delayed rendering	[X] Bad
Static, simple Error.tsx with ARIA roles	Minimal DOM nodes	Single reflow on initial render	Low paint cost with immediate display	[OK] Good

Rendering Pipeline

When a route error occurs, the Error.tsx component is rendered. If it contains heavy synchronous logic, it delays Style Calculation and Layout, blocking Paint and Composite stages.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckBlocking JavaScript execution delays Paint and Composite stages.

Core Web Vital Affected

INP

This affects how quickly error pages render during route failures, impacting user experience during navigation errors.

Optimization Tips

1Avoid heavy synchronous logic inside Error.tsx to prevent blocking rendering.

2Keep error components simple and static for fast display.

3Use ARIA roles like role="alert" and aria-live="assertive" for accessibility and immediate screen reader notification.

Performance Quiz - 3 Questions

What is the main performance issue with heavy logic inside Error.tsx for route errors?

A It improves Largest Contentful Paint.

B It reduces bundle size.

C It blocks rendering and delays error display.

D It decreases DOM node count.

DevTools: Performance

How to check: Record a session navigating to a route that triggers Error.tsx. Look for scripting time and time to first paint of the error component.

What to look for: Long scripting blocks before paint indicate blocking logic; quick paint with minimal scripting shows good performance.