Expand my Community achievements bar.

SOLVED

AEM React SPA create custom error page name

Avatar

Community Advisor

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?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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:

  1. 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:

  1. 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.
  2. 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.

  1. 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

  1. Deploy the changes to your AEM instance and ensure the custom error pages are published.
  2. 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.





View solution in original post

5 Replies

Avatar

Community Advisor

@Kamal_Kishor 

 

Here is a documentation for customizing error pages

https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/dev...

 

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.

Avatar

Community Advisor

@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.

Avatar

Correct answer by
Community Advisor

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:

  1. 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:

  1. 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.
  2. 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.

  1. 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

  1. Deploy the changes to your AEM instance and ensure the custom error pages are published.
  2. 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.





Avatar

Administrator

@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!



Kautuk Sahni

Avatar

Administrator

@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!



Kautuk Sahni