Error Handling

ShipSecure comes with beautiful, pre-built error pages that are consistent with your application's design theme. This ensures that even when things go wrong, your users have a premium experience.

404 Not Found Page

The 404 page is displayed when a user attempts to navigate to a route that does not exist. It features a "Lost at Sea" theme with animations and helpful navigation.

Location

The file is located at @/app/not-found.tsx.

Customization

You can customize the 404 page by directly editing the component. Common changes might include:

• Changing the "Lost at Sea" text or "404" heading.
• Updating the icon or background effects.
• Adding more navigation links (e.g., to your documentation or support page).

// src/app/not-found.tsx
// ...
<h2 className="text-2xl sm:text-3xl font-semibold mb-4 text-white">
  Page Lost at Sea
</h2>
<p className="text-gray-400 text-lg mb-10 max-w-md mx-auto leading-relaxed">
  The page you are looking for seems to have drifted away.
</p>
// ...

Testing

We've included an End-to-End (E2E) test to ensure your 404 page works correctly. You can run it with:

npm run test:e2e

Error Boundary (500)

The Error Boundary captures unexpected runtime errors in your application (like a 500 Internal Server Error) and displays a friendly "System Malfunction" UI instead of crashing the entire app.

Location

The file is located at @/app/error.tsx.

How it Works

This component uses Next.js Error Boundaries. It receives two props:

• error: The error object containing details about what went wrong.
• reset: A function to attempt to recover by re-rendering the segment.

Customization

The error page uses a "Red Alert" theme to distinguish it from the 404 page. You can customize the message or add error reporting logic (like Sentry) inside the useEffect hook.

// src/app/error.tsx
useEffect(() => {
  // Log the error to an error reporting service
  console.error(error);
  // Example: Sentry.captureException(error);
}, [error]);

Testing

Because it's hard to trigger a real crash in E2E tests without breaking the app, we use Unit Tests for the Error Boundary.

npm run test

This verifies that the error message appears and the "Try Again" button works as expected.