What happens when getServerSideProps throws an error? How do you handle it gracefully?

Question

Accepted Answer

When an unhandled error occurs in `getServerSideProps`, Next.js's default behavior depends on the environment. In development, you'll see an error overlay with detailed debugging information. In production, Next.js shows a generic 500 Internal Server Error page to the user (customizable via `pages/500.js` or `app/global-error.js`). The request fails, no page is rendered, and the error is logged to the server console. However, this default behavior often provides poor user experience—a broken page instead of partial content or a graceful fallback. Proper error handling in `getServerSideProps` is essential for building resilient applications that can recover from API failures, database timeouts, or authentication issues. // pages/products/[id].js // ❌ This throws an unhandled error if API fails export async function getServerSideProps({ params }) { // If this fetch fails, it throws an unhandled rejection const res = await fetch(`https://api.example.com/products/${params.id}`); const product = await res.json(); // If product is null, this throws if (!product) { throw new Error('Product not found'); } return { props: { product } }; } // In production, user sees Next.js default 500 page // In development, they see an error overlay // Neither provides a good user experience Try-catch with fallback props: Catch errors and return partial data or empty states with a flag indicating an error occurred. Return notFound: When data is missing (404 case), return `{ notFound: true }` to show the custom 404 page. Return redirect: For authorization failures, redirect to login or an error page. Custom error page: Use `pages/_error.js` or `app/global-error.js` to create branded 500 pages. Error boundary: In the App Router, wrap client components in error boundaries to handle rendering errors separately. // pages/products/[id].js // ✅ Graceful error handling with fallback export async function getServerSideProps({ params }) { try { // Attempt to fetch product data const res = await fetch(`https://api.example.com/products/${params.id}`, { // Set timeout to avoid hanging requests signal: AbortSignal.timeout(5000) }); if (!res.ok) { throw new Error(`API responded with ${res.status}`); } const product = await res.json(); return { props: { product, error: null // No error } }; } catch (error) { // Log error for monitoring console.error('Failed to fetch product:', error); // Return fallback data with error flag return { props: { product: null, error: { message: 'Unable to load product at this time', code: 'FETCH_ERROR' } } }; } } // Page component handles the error state export default function ProductPage({ product, error }) { if (error) { return (

Something went wrong

{error.message}

); } return (

{product.name}

{/* product details */}

); } // pages/products/[id].js // ✅ Return 404 for missing products export async function getServerSideProps({ params }) { try { const product = await getProductById(params.id); if (!product) { // Shows custom 404 page (pages/404.js) return { notFound: true }; } return { props: { product } }; } catch (error) { // For server/database errors, show 500 instead of 404 console.error('Database error:', error); // Let Next.js show 500 page throw error; } } // pages/404.js - Custom 404 page // This page is shown when getServerSideProps returns { notFound: true } export default function Custom404() { return (

Product Not Found

The product you're looking for doesn't exist or has been removed.

Browse all products

); } // pages/dashboard.js // ✅ Redirect to login on auth failure export async function getServerSideProps({ req }) { try { const session = await getSession(req); if (!session) { return { redirect: { destination: '/login', permanent: false // Temporary redirect (307) } }; } const dashboardData = await fetchDashboardData(session.userId); return { props: { user: session.user, data: dashboardData } }; } catch (error) { console.error('Dashboard error:', error); // Redirect to an error page return { redirect: { destination: '/error?type=dashboard', permanent: false } }; } } Next.js allows you to create custom error pages that match your brand. In the Pages Router, `pages/_error.js` handles both 404 and 500 errors.

What happens when getServerSideProps throws an error? How do you handle it gracefully?

When getServerSideProps throws an error, Next.js by default shows a 500 error page in production, but you can implement custom error handling with try-catch blocks, return notFound, or use custom error pages for graceful degradation

What happens when getServerSideProps throws an error? How do you handle it gracefully?

When getServerSideProps throws an error, Next.js by default shows a 500 error page in production, but you can implement custom error handling with try-catch blocks, return notFound, or use custom error pages for graceful degradation

Scenario Questions

Follow-up Questions