Add Reusable Error Page for multiple Error Types

[ParagGhatage]

Description

We need to create a single reusable React component that can dynamically handle multiple types of error scenarios across the application. The component should render different error messages and behaviors based on the provided error type, allowing for flexibility in managing various error cases. This component should be able to handle the following error scenarios gracefully:

Error Scenarios to Handle:

1. 404 Error Page:

   • Display a message when the page is not found.
   • Example message: "The page you're looking for doesn't exist or is unavailable."
   • Provide a redirect button to navigate the user back to the homepage or other relevant sections.

2. Infinite Loading/Error Page:

   • Display a message when content takes too long to load or an infinite loading state occurs.
   • Example message: "It’s taking longer than expected to load this content. Please try again later."
   • Include a retry button that triggers a reload attempt.

3. Network Error Page:

   • Display a message when there’s a network error.
   • Example message: "There was a problem with your network connection. Please check your connection or try again later."
   • Include a retry button to allow the user to retry the request.

4. Server Error Page:

   • Display a message for server-side errors.
   • Example message: "We’re experiencing issues on our end. Please try again later."
   • Optionally, include a retry button or suggest returning to a safe page, such as the homepage.

Acceptance Criteria:

• Single Component: The component should handle all the above error scenarios dynamically based on the errorCode or other relevant props.

• Flexible Props: The component should accept the following props:

  • errorCode: The error code (e.g., 404, 500, etc.).
  • errorMessage: The custom error message to be displayed.
  • details: Optional additional error details to display (e.g., network issues).
  • retryHandler: Optional function to retry an action (shown for retriable errors).
  • redirectPath: The path to redirect users to after an error (e.g., homepage).
  • redirectLabel: Custom label for the redirect button (e.g., "Go to Homepage").
  • currentRoute: To prevent redirecting to the current route (used for redirectPath logic).

• Consistent Styling: The component should maintain a consistent design across all error pages, ensuring a uniform error-handling experience across the app.

• Easy to Import and Use: The component should be simple to import and reusable across various parts of the application.

• Clear Documentation: Provide clear, descriptive comments within the code to help future developers understand the logic and allow easy modifications.

Tasks:

1. Create the ErrorPage Component:

   • Develop a single, dynamic component that conditionally renders the appropriate message, retry button, and redirect button based on the errorCode and other props passed.
   • The component should render:
     • Different messages for different errors (404, 500, network, etc.).
     • A retry button for retriable errors (like network or server errors).
     • A redirect button to navigate to a safe page (e.g., homepage).

2. Test the Component:

   • Write tests to ensure that the component renders correctly for each error scenario.
   • Ensure that the retry and redirect buttons work as expected when applicable.

3. Documentation:

   • Provide clear documentation on how to use the component and pass the relevant props.
   • Include examples for using the component in various error scenarios across the application.

[ParagGhatage]

Is this issue already solved?

@Amaymani ,
I have raised a PR for this.