Hi @Kamal_Kishor ,
Creating custom error pages in an AEM React SPA is possible and can be done without relying solely on redirect rules in the dispatcher configuration. Here's a structured approach to achieve this:
1. Create Custom Error Pages in AEM
First, create the custom error pages in AEM under a designated path, e.g., /content/your-site/en/errors/400 and /content/your-site/en/errors/500.
2. Configure Sling Mappings
Use Sling Resource Type Mappings to serve custom error pages for specific HTTP error codes. This configuration can be done via the OSGi console or by creating a custom Sling Error Handler.
OSGi Configuration:
- Apache Sling Error Handler Configuration:
- Go to the OSGi Configuration Manager: /system/console/configMgr.
- Find the Apache Sling Error Handler.
- Configure the mappings for your custom error pages. For example:
/errors/400 = /content/your-site/en/errors/400
/errors/500 = /content/your-site/en/errors/500
Sling Resource Type Mapping:
Overlay the Error Handler:
- Create a custom error handler component in your project, for example, /apps/your-site/components/errorhandler.
- Implement error-specific components for 400 and 500 errors.
Update sling:resourceType for the error pages:
- For each error page, set the sling:resourceType property to point to your custom error handler.
- Example for 400 error page
<jcr:root
xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
sling:resourceType="your-site/components/errorhandler/400">
3. React SPA Integration
Ensure your React SPA is configured to handle these error routes appropriately.
React Router Setup:
- Define routes for your custom error pages in your React application. For instance
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Custom400ErrorPage from './components/Custom400ErrorPage';
import Custom500ErrorPage from './components/Custom500ErrorPage';
function App() {
return (
<Router>
<Switch>
{/* Other routes */}
<Route path="/errors/400" component={Custom400ErrorPage} />
<Route path="/errors/500" component={Custom500ErrorPage} />
<Route component={DefaultErrorPage} />
</Switch>
</Router>
);
}
export default App;
Error Boundary Component:
- Implement an error boundary in React to catch and handle errors. This helps in displaying custom error components based on the error type.
import React, { Component } from 'react';
import Custom400ErrorPage from './components/Custom400ErrorPage';
import Custom500ErrorPage from './components/Custom500ErrorPage';
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false, errorCode: null };
}
static getDerivedStateFromError(error) {
// Update state to trigger fallback UI
return { hasError: true, errorCode: error.code };
}
componentDidCatch(error, errorInfo) {
// You can also log the error to an error reporting service
console.error('Error caught by ErrorBoundary:', error, errorInfo);
}
render() {
if (this.state.hasError) {
if (this.state.errorCode === 400) {
return <Custom400ErrorPage />;
} else if (this.state.errorCode === 500) {
return <Custom500ErrorPage />;
} else {
return <DefaultErrorPage />;
}
}
return this.props.children;
}
}
export default ErrorBoundary;
Use ErrorBoundary in your App:
- Wrap your application with the ErrorBoundary component to catch errors
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import ErrorBoundary from './ErrorBoundary';
ReactDOM.render(
<ErrorBoundary>
<App />
</ErrorBoundary>,
document.getElementById('root')
);
. Testing and Validation
- Deploy the changes to your AEM instance and ensure the custom error pages are published.
- Trigger different error scenarios to verify that the correct custom error pages are displayed without needing to modify the dispatcher configuration.
By following this approach, you can create and manage custom error pages for your AEM React SPA without relying on dispatcher rules. This ensures a more streamlined and maintainable setup.
