Error Handling

Overview

Error handling is a crucial aspect of programming and data processing. Properly managing errors helps prevent system crashes and enhances the user experience. In the Next.js Supabase SaaS template, error notifications are implemented using Toast Notifications for real-time feedback on API requests, form submissions, and other operations.

Toast Notifications Overview

Toast Notifications in this template are used to display both error and success messages to the user. These notifications ensure that users are promptly informed of issues like API failures or successful form submissions.

Error Handling with Toast Notifications

• Errors due to API failures or form submissions are notified using Toast Notifications.
• To add Toast Notifications for API failures, utilize internationalization (i18n) to display localized error messages.
• You can also use toast notifications to display messages for API success or failure calls, as well as for form submission responses.

Example: Error Handling on API Failure

When handling an API failure, the following code shows how to display an error message using a Toast Notification:

onError(error) {
  const message = error.message!;
  toast.error(message);
}

In this implementation, the error message from the API is captured and displayed to the user using toast.error().

Example: Success Handling on Form Submission

For successful form submissions, you can notify users with a success message using the following code:

onSuccess() {
  form.reset();
  toast.success(dictionary.users("success_message_update_password_form")!);
}

This code resets the form and shows a success message using the toast.success() method, with the message being retrieved from the dictionary for localization.

Handling 404 and 500 Pages

Next.js provides built-in functionality to display custom pages for various error scenarios, including 404 (Not Found) and 500 (Internal Server Error) pages.

Customizing the 404 (Not Found) Page

In the Next.js Supabase SaaS template, you can customize the 404 page by modifying the not-found.js file located in the /app/ folder. This file handles unmatched URLs throughout your application, ensuring that users who navigate to a non-existent page are presented with a helpful 404 message.

For more information on customizing 404 pages, refer to the Next.js Not Found documentation.

Customizing the 500 (Internal Server Error) Page

Similarly, you can handle 500 (Internal Server Error) notifications by customizing the 500.js file. The 500 error is managed both client-side and server-side by the Error component, providing a consistent user experience across different environments.

To learn more about handling 500 errors, consult the Next.js Error Documentation.