Is it possible to create custom error pages instead of 400 OR 500 for e.g. 400-error, 500-error?
If yes, can it be done without needing a redirect rule in dispatcher configuration?
Solved! Go to Solution.
Views
Replies
Total Likes
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:
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.
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:
/errors/400 = /content/your-site/en/errors/400
/errors/500 = /content/your-site/en/errors/500
Sling Resource Type Mapping:
Overlay the Error Handler:
Update sling:resourceType for the error pages:
<jcr:root
xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
sling:resourceType="your-site/components/errorhandler/400">
Ensure your React SPA is configured to handle these error routes appropriately.
React Router Setup:
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:
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:
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')
);
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.
Here is a documentation for customizing error pages
I'm some how felt like from the question, the requirement is to actually change the page node name(from 400 to 400-error) instead of actual page customization. If this is case, I'm very curios of the usecase why we need to change the HTTP response codes, if it is possible can you share it.
@gkalyan : Thanks for replying.
Ask is to use 400-error, 500-error (just an ex) node names for error pages due to some constraint.
Currently we have put a redirect in dispatcher from 400 -> 400-error etc.
We are still exploring if this can be done without that redirect rule.
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:
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.
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:
/errors/400 = /content/your-site/en/errors/400
/errors/500 = /content/your-site/en/errors/500
Sling Resource Type Mapping:
Overlay the Error Handler:
Update sling:resourceType for the error pages:
<jcr:root
xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
sling:resourceType="your-site/components/errorhandler/400">
Ensure your React SPA is configured to handle these error routes appropriately.
React Router Setup:
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:
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:
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')
);
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.
@Kamal_Kishor Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!
Views
Replies
Total Likes
@Kamal_Kishor Can you please mark the answer as correct for posterity? If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies