AEM SPA (React) App not working though Dispatcher

[gregy68980908]

We are developing a SPA site in AEM and its come time to test the app on our testing dispatcher environment but the app doesn't load anything from the model on dispatcher.

There's no issues with it working on Author or Publisher.

I can see the call to "en.model.json" producing a 200 and can open the model url no problem and see the content but the app itself just produces a white page.

We have path shortening on via mappings and the dispatcher settings but I have it turned off for *.model.json as the React app is requesting the long path (/content/site/en.model.json).

Are we missing something here? Is there any way to troubleshoot this? Console is clean, error log is clean and dispatcher logs are all clean.

[arunpatidar]

Hi,

Could you please check the request log from publishers to make sure the mapping is correct and publishers receive the correct paths to return the content?

[gregy68980908]

Hey Arun,

I am seeing the correct paths in the request log.

25/May/2022:15:06:02 +0000 [1042466] -> GET /content/site/en/home.html HTTP/1.1
25/May/2022:15:06:03 +0000 [1042466] <- 200 text/html 22ms
25/May/2022:15:06:03 +0000 [1042467] -> GET /etc.clientlibs/spa-react/clientlibs/clientlib-base.min.b72fd4bed890c607fcab0dc95c19b899.css HTTP/1.1
25/May/2022:15:06:03 +0000 [1042467] <- 200 text/css 4ms
25/May/2022:15:06:03 +0000 [1042468] -> GET /etc.clientlibs/spa-react/clientlibs/clientlib-react.min.541d0b9976d8799f2945c68236649b5f.css HTTP/1.1
25/May/2022:15:06:03 +0000 [1042468] <- 200 text/css 8ms
25/May/2022:15:06:03 +0000 [1042469] -> GET /etc.clientlibs/spa-react/clientlibs/clientlib-react.min.6d8bd3eeb0d14aac8f797c3e89965792.js HTTP/1.1
25/May/2022:15:06:03 +0000 [1042470] -> GET /etc.clientlibs/core/wcm/components/commons/site/clientlibs/container.min.c8339545b501e3db3abc37c9a4cc2d6e.js HTTP/1.1
25/May/2022:15:06:03 +0000 [1042470] <- 200 application/javascript 4ms
25/May/2022:15:06:03 +0000 [1042471] -> GET /etc.clientlibs/spa-react/clientlibs/clientlib-base.min.8c8478a6b4b4001bb1a12c1172b4045c.js HTTP/1.1
25/May/2022:15:06:03 +0000 [1042471] <- 200 application/javascript 3ms
25/May/2022:15:06:03 +0000 [1042469] <- 200 application/javascript 46ms
25/May/2022:15:06:04 +0000 [1042472] -> GET /content/site/en.model.json HTTP/1.1
25/May/2022:15:06:05 +0000 [1042472] <- 200 application/json 916ms
25/May/2022:15:06:05 +0000 [1042473] -> GET /etc.clientlibs/spa-react/clientlibs/clientlib-react/resources/favicon.ico HTTP/1.1
25/May/2022:15:06:05 +0000 [1042473] <- 200 image/vnd.microsoft.icon 3ms
25/May/2022:15:06:11 +0000 [1042474] -> GET /content/ams/healthcheck/regent.html HTTP/1.1
25/May/2022:15:06:11 +0000 [1042474] <- 200 text/html;charset=UTF-8 7ms

The page loads an empty spa-root

<div id="spa-root"><div><div class=""><div></div></div></div></div>

[milind_bachani]

Hi @gregy68980908 ,

As you have turned on short urls, I doubt on the model.json response - can you please compare model.json response on Publisher(where page is loading) and on dispatcher(where page is not loading). I suspect the :children might be returning short urls as well. Can you turn off the url shortening for once and try fetching the page via dispatcher ?

Because, URL shortening is still pain area for SPA editor websites in AEM & generally, custom shortening lead to such issues.

Thanks,

Milind

[gregy68980908]

Hey @milind_bachani ,

It looks like the models for both publisher and dispatcher match, they use the long path for the children:

/content/site/en/home

Which i guess is fine for publisher but the dispatcher url is shortened to :

/en/home

I assume I need to shorten the paths inside the model as well to work? Is there a way to do this?

[milind_bachani]

ahh, so @gregy68980908  you model path and your actual URL path should match in order to work.
Either you override the model to give short path for all relevant properties, or remove the url shortening completely in order to make it work.

I hope you havent used any apache rewrites for shortening too!

Thanks,

Milind

[gregy68980908]

Thanks @milind_bachani for setting me in the right direction. Do you know if this is a JS model under aem-spa-page-model-manager that needs overridden to update the children or a Java model?

[gregy68980908]

I have the solution for this for anyone searching:

1. Create a HierarchyPage class in Java that extends HierarchyNodeExporter and ContainerExporter
2. Modify the methods that create:
   1. :children > path name
   2. :children > path name > :path 

to make the model match the shortened url. Then the model will load.

[snowwhite92]

@gregy68980908 I have come across similar issue. Are you able to share your implementation of HierarchyPage class.

[Julkar__Naim]

@gregy68980908 Could you please share the implementation details of your HierarchyNodeExporter.