You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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.
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.
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.
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:
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).
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.
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.
The text was updated successfully, but these errors were encountered:
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
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:
404 Error Page:
"The page you're looking for doesn't exist or is unavailable."
Infinite Loading/Error Page:
"It’s taking longer than expected to load this content. Please try again later."
Network Error Page:
"There was a problem with your network connection. Please check your connection or try again later."
Server Error Page:
"We’re experiencing issues on our end. Please try again later."
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 forredirectPath
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:
Create the ErrorPage Component:
errorCode
and other props passed.Test the Component:
Documentation:
The text was updated successfully, but these errors were encountered: