404 Error handling in AEM-React Integration (model.json is not called on 404 error page)

We are on AEM-React SPA. We are implementing 404 error handling using Apache error directive. Here is the approach- When I make a request to non-existent page, publisher sends the default error page with 404 status to the Dispatcher for every Not Found resource, Dispatcher handover the error(404) processing to WebServer(Apache). The WebServer checks if the error page is in the cache, if not available then requests the custom error page from the publisher based on the ErrorDocument configurations and returns the error response to the users with the required 404 error code.

Issue Description

When a xyz page is not found, then apache internally makes the request to 404-error-page.html(based on error directive), and I see a request for xyz.model.json and en.model.json in the network tab, but I don’t see the request for 404-error-page.model.json (because html redirect is made internally by Apache). Due to which page is showing blank. And this is happening because react maps the url to the json. Is there any way to make a request to 404-error-page.model.json when the apache makes a request to 404-error-page.html internally.

Apache Error directive configuration

ErrorDocument 400 /404-error-page.html

@suraj_kamdi @vijayalakshmi_s @arunpatidar