Error Handling

StarterKitPro implements graceful error handling for both client-side rendering issues and server-side API errors.

Client-Side Errors (app/error.tsx)

General JavaScript errors that occur during client-side rendering or hydration are caught by Next.js's file-based error handling mechanism.

• File: app/error.tsx
• Functionality: This high-level component acts as a global error boundary for the application.
• User Experience: When an uncaught client-side error occurs, a user-friendly error page is displayed instead of a broken UI or a blank screen.

This page typically includes:

• A message indicating an error occurred.
• A button to try reloading the page.
• A <SupportButton /> to allow users to easily contact support.

Not Found Errors - 404 (app/not-found.tsx)

Requests for pages or resources that do not exist are handled by a dedicated 'Not Found' component.

• File: app/not-found.tsx
• Functionality: This component renders when Next.js cannot find a matching route for the requested URL.
• User Experience: Displays a clear 404 error page, often with branding and navigation links, including a <SupportButton />.

Support Integration on Error Pages

Both the app/error.tsx and app/not-found.tsx components include the SupportButton component.

• Default Behavior: By default, clicking the support button will initiate an email to the configured support address (see Customer Support).
• Crisp Integration: If you have configured the Crisp Live Chat integration, the support button on these error pages will prioritize opening the Crisp chat window, providing users with immediate access to live support when they encounter issues.

API Error Handling (lib/api.ts - Centralized)

Server-side API calls made through the centralized API utility (likely found in lib/api.ts or similar) include built-in error handling.

• Centralized Logic: Instead of repeating try...catch blocks for every API call, the central utility handles common HTTP error statuses.
• Automatic Handling: It automatically manages errors like:
  • 401 Unauthorized: Often triggers redirection to login or displays an appropriate message.
  • 403 Forbidden: Prevents unauthorized actions.
  • Other 4xx/5xx errors: Catches server errors or bad requests, often displaying user-friendly notifications (e.g., via toasts) rather than crashing the application.
• Reduced Boilerplate: This approach simplifies your code when fetching data or performing mutations, as basic error handling is managed centrally.