Hi @hoary portal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Surcharger l'object erreur
narrow steppeBOT
Pour personnaliser la gestion des erreurs dans Next.js, vous pouvez créer des pages d'erreur personnalisées et utiliser les Error Boundaries de React.
Côté serveur :
Next.js fournit une page d'erreur 500 par défaut. Pour personnaliser cette page, vous pouvez créer un fichier pages/500.js. Ce fichier est généré statiquement au moment de la construction.
export default function Custom500() {
return <h1>500 - Server-side error occurred</h1>
}
Source (https://nextjs.org/docs/pages/building-your-application/routing/custom-error)
De plus, vous pouvez gérer les erreurs 500 à la fois côté client et côté serveur avec le composant Error. Si vous souhaitez le remplacer, définissez le fichier pages/_error.js et ajoutez le code suivant :
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
Source (https://nextjs.org/docs/pages/building-your-application/routing/custom-error)
Côté client :
React propose les Error Boundaries pour gérer les erreurs JavaScript côté client. Pour utiliser les Error Boundaries dans votre application Next.js, vous devez créer un composant de classe ErrorBoundary et envelopper la prop Component dans le fichier pages/_app.js.
class ErrorBoundary extends React.Component {
constructor(props) {
super(props)
// Define a state variable to track whether is an error or not
this.state = { hasError: false }
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI
return { hasError: true }
}
componentDidCatch(error, errorInfo) {
// You can use your own error logging service here
console.log({ error, errorInfo })
}
render() {
// Check if the error is thrown
if (this.state.hasError) {
// You can render any custom fallback UI
return (
<div>
<h2>Oops, there is an error!</h2>
<button
type="button"
onClick={() => this.setState({ hasError: false })}
>
Try again?
</button>
</div>
)
}
// Return children components in case of no error
return this.props.children
}
}
export default ErrorBoundary
Source (https://nextjs.org/docs/pages/building-your-application/configuring/error-handling)