Hi @strong sedge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#How to handle errors in production builds?
night mirageBOT
In Next.js, you can handle errors by using the error.js file. This file allows you to gracefully handle runtime errors and create a user-friendly error UI.
When an error is thrown during data fetching or inside a Server Component, Next.js will forward the resulting Error object to the nearest error.js file as the error prop. In production, a generic error message is forwarded to error along with a .digest which contains a hash of the error message. This hash can be used to correspond to server logs.
Here is an example of how you can create an error.js file:
'use client' // Error components must be Client Components
import { useEffect } from 'react'
export default function Error({
error,
reset,
}: {
error: Error
reset: () => void
}) {
useEffect(() => {
// Log the error to an error reporting service
console.error(error)
}, [error])
return (
<div>
<h2>Something went wrong!</h2>
<button
onClick={
// Attempt to recover by trying to re-render the segment
() => reset()
}
>
Try again
</button>
</div>
)
}
In this example, the error is logged to the console and a user-friendly message "Something went wrong!" is displayed. There is also a "Try again" button that attempts to recover by re-rendering the segment.
For more advanced error handling, you can define a custom pages/_error.js file. This file is used to handle 500 errors both client-side and server-side. Here is an example:
function Error({ statusCode }) {
return (
<p>
{statusCode
? `An error ${statusCode} occurred on server`
: 'An error occurred on client'}
</p>
)
}
Error.getInitialProps = ({ res, err }) => {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404
return { statusCode }
}
export default Error
In this example, the error message displayed depends on whether the error occurred on the server or the client.
Remember, pages/_error.js is only used in production. In development, you’ll get an error with the call stack to know where the error originated from.
For more information, you can refer to the Next.js documentation on error handling (https://nextjs.org/docs/app/building-your-application/routing/error-handling).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
strong sedge
@night mirage I use the app directory, not the pages directory
night mirageBOT
Let me check the knowledge base for you. One moment! :books:
In the app directory, you can handle errors by using the error.js or global-error.js file. The error.js file is used to handle errors at the route segment level, while the global-error.js file is used to handle errors at the root level.
Here is an example of how you can create a global-error.js file:
'use client'
export default function GlobalError({
error,
reset,
}: {
error: Error
reset: () => void
}) {
return (
<html>
<body>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</body>
</html>
)
}
In this example, a user-friendly message "Something went wrong!" is displayed when an error occurs. There is also a "Try again" button that attempts to recover by re-rendering the segment.
Remember, global-error.js replaces the root layout.js when active and so must define its own <html> and <body> tags.