Hi @late acorn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Error handling in production builds with the app directory
hearty mangoBOT
In Next.js, you can handle errors by using the error.js file. This file defines an error UI boundary for a route segment. When an error occurs, the error is contained, and the fallback component defined in the error.js file is rendered. This allows you to display user-friendly error messages in production.
Here's an example of how you can define 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's also a "Try again" button that attempts to recover from the error without a full page reload.
If you want to handle errors in the root layout, you can use a variation of error.js called app/global-error.js. This error boundary wraps the entire application, and its fallback component replaces the root layout when active. Here's an example:
'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, the global-error.js file defines its own <html> and <body> tags and displays a user-friendly error message when an error occurs.
Remember, the error.js and global-error.js files must be Client Components. Also, an error.js boundary will not handle errors thrown in a layout.js component in the same segment because the error boundary is nested inside that layouts component.
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) and file conventions (https://nextjs.org/docs/app/api-reference/file-conventions/error).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
Let me check the knowledge base for you. One moment! :books:
Yes, you can display dynamic error messages in production by customizing the 500 error page in Next.js. This allows you to control the experience for your users when an unhandled exception occurs.
Here's an example of how you can render a built-in error page by importing the Error component:
import Error from 'next/error'
export async function getServerSideProps() {
const res = await fetch('<https://api.github.com/repos/vercel/next.js'>)
const errorCode = res.ok ? false : res.status
const json = await res.json()
return {
props: { errorCode, stars: json.stargazers_count },
}
}
export default function Page({ errorCode, stars }) {
if (errorCode) {
return <Error statusCode={errorCode} />
}
return <div>Next stars: {stars}</div>
}
In this example, the Error component takes statusCode as a property. If there's an error (i.e., errorCode is not false), the Error component is rendered with the statusCode. Otherwise, a div is rendered with the number of stars.
The Error component also takes title as a property if you want to pass in a text message along with a statusCode. If you have a custom Error component, be sure to import that one instead. next/error exports the default component used by Next.js.
For more information, you can refer to the Next.js documentation on custom error handling (https://nextjs.org/docs/pages/building-your-application/routing/custom-error).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
late acorn
@hearty mango Is there a way to display dynamic error messages in production in the app directory?
hearty mangoBOT
Let me check the knowledge base for you. One moment! :books:
Yes, you can display dynamic error messages in production by using the error.js or global-error.js files in the app directory. These files allow you to define custom error boundaries and display user-friendly error messages when an error occurs.
Here's an example of how you can define 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's also a "Try again" button that attempts to recover from the error without a full page reload.
If you want to handle errors in the root layout, you can use a variation of error.js called app/global-error.js. This error boundary wraps the entire application, and its fallback component replaces the root layout when active. Here's an example:
'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, the global-error.js file defines its own <html> and <body> tags and displays a user-friendly error message when an error occurs.
Remember, the error.js and global-error.js files must be Client Components. Also, an error.js boundary will not handle errors thrown in a layout.js component in the same segment because the error boundary is nested inside that layouts component.