Global-error.tsx for root errors in NextJS - Performance & Optimization

Performance: Global-error.tsx for root errors

MEDIUM IMPACT

This affects the page's error handling responsiveness and visual stability during root-level errors.

Handling root-level errors in a Next.js app

NextJS

export default function GlobalError({ error }) {
  return (
    <main role="alert" aria-live="assertive" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
      <section>
        <h1>Something went wrong</h1>
        <p>{error.message}</p>
      </section>
    </main>
  );
}

Using semantic HTML with fixed layout and ARIA roles ensures stable layout and accessible error reporting.

📈 Performance Gainprevents layout shifts and improves CLS by reserving space and reducing reflows

Handling root-level errors in a Next.js app

NextJS

export default function GlobalError({ error }) {
  return <div style={{ minHeight: '100vh' }}>{error.message}</div>;
}

Using inline styles with dynamic height can cause layout shifts and delays in rendering error content.

📉 Performance Costtriggers multiple reflows and causes CLS due to layout instability

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Inline styled error div with dynamic height	Low (few nodes)	Multiple reflows due to dynamic height	Medium paint cost	[X] Bad
Semantic main and section with fixed flex layout	Low (few nodes)	Single reflow with fixed layout	Low paint cost	[OK] Good

Rendering Pipeline

The global error component renders during error states, affecting layout and paint stages by providing fallback UI.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout due to dynamic content size and style recalculations

Core Web Vital Affected

CLS

This affects the page's error handling responsiveness and visual stability during root-level errors.

Optimization Tips

1Reserve fixed space for error UI to prevent layout shifts.

2Use semantic HTML and ARIA roles for accessible and stable error rendering.

3Avoid dynamic inline styles that affect layout during error display.

Performance Quiz - 3 Questions

What is the main performance issue with using dynamic inline styles for a global error component?

A It blocks network requests

B It increases JavaScript bundle size significantly

C It causes layout shifts and multiple reflows

D It disables browser caching

DevTools: Performance

How to check: Record a session while triggering a root error, then analyze layout shifts and paint events in the flame chart.

What to look for: Look for layout shift events and long layout recalculations indicating CLS issues during error rendering.