Acs commons error page handler not working for AEMaaCS for react SPA project

[SRC_AEM_DEV]

Hi,

In my react spa based project the ACS commons error page handler not working. I have created my xml file like below:

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"

          jcr:primaryType="sling:OsgiConfig"

          enabled="{Boolean}true"

          vanity.dispatch.enabled="{Boolean}true"

          serve-authenticated-from-cache="{Boolean}true"

          ttl="{Long}300"

          error-page.system-path="/content/myProject/en/error/404"

          error-page.fallback-name="500"

/>

Path I searched for: http://localhost:4502/content/myProject/siteName/en/xyz.html
(xyz is not from my site)

When I search for a page which is not in my site the error page is not getting loaded, then I checked the page on inspect mode, I could see the xyz.model.json is getting 404.

NOTE: This configuration is working fine for other project which is not SPA based.

Thanks.

@arunpatidar @lukasz-m @BrianKasingli 

[TarunKumar]

Hi @SRC_AEM_DEV ,

Can you check if you have followed the below mentioned steps:

In AEM Dispatcher Config, set DispatcherPassError to ‘0’. This allows erring requests to be sent back to AEM.

• Create the proxy overlays for Sling errorhandler scripts (404.jsp and default.jsp) which include the acs-commons counterparts.

Create the overlay for 404.jsp

/apps/sling/servlet/errorhandler/404.jsp

<%@page session="false"%><%
%><%@include file="/apps/acs-commons/components/utilities/errorpagehandler/404.jsp" %>

Then create the overlay for the default.jsp

/apps/sling/servlet/errorhandler/default.jsp

<%@page session="false"%><%
%><%@include file="/apps/acs-commons/components/utilities/errorpagehandler/default.jsp" %>

• In your base page implementation, add the following cq:Widget to the Page Properties dialog

<errorpages
    jcr:primaryType="cq:Widget"
    path="/apps/acs-commons/components/utilities/errorpagehandler/dialog/errorpages.infinity.json"
    xtype="cqinclude"/>

OR create a your own custom pathfield widget

<errorpages
    jcr:primaryType="cq:Widget"
    fieldLabel="Error Pages"
    fieldDescription="Error pages for this content tree"
    name="./errorPages"
    xtype="pathfield"/>

• Create a sling:OsgiConfig node to enable the Error Page Handler

  /apps/myapp/config/com.adobe.acs.commons.errorpagehandler.impl.ErrorPageHandlerImpl.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="sling:OsgiConfig"
    enabled="{Boolean}true"
    cache.serve-authenticated="{Boolean}true"
    cache.ttl="{Long}300"/>

[SRC_AEM_DEV]

Yes, I have followed the same steps as above. It is working for my HTL based project but not for SPA based project.

[arunpatidar]

Hi @SRC_AEM_DEV 
Please check https://github.com/Adobe-Marketing-Cloud/aem-guides-wknd-events/issues/80 

[kautuk_sahni]

@SRC_AEM_DEV Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.