Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Reusable Error Page multiple Error Types #92

Open
ParagGhatage opened this issue Jan 10, 2025 · 1 comment
Open

Add Reusable Error Page multiple Error Types #92

ParagGhatage opened this issue Jan 10, 2025 · 1 comment

Comments

@ParagGhatage
Copy link
Contributor

ParagGhatage commented Jan 10, 2025

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 ParagGhatage changed the title Add Reusable Error Pages for 404, Infinite Loading, and Other Error Types Add Reusable Error Page multiple Error Types Jan 10, 2025
@ParagGhatage
Copy link
Contributor Author

Hey @Ronnieraj37 ,
This PR solves following issue: #93

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant