Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

Dropdown menu arrow missing on dispatcher website

Avatar

Level 2

My dispatcher website, 10.0.0.4/content/.., is missing the down arrow for a dropdown menu that is visible on the publisher website, 10.0.0.5:4503/content/.

AEM_user25_1-1699041572852.png

 

 

 

Here is the source code for the element:

 

<a role="button" tabindex="0" aria-selected="false" aria-expanded="false" data-guide-toggle="accordion-tab" data-guide-id="guideContainer-rootPanel-panel-parentHowDoesItWorkPanel-howitworkspanel__">
<span class="guideSummary" data-guide-id="guideContainer-rootPanel-panel-parentHowDoesItWorkPanel-howitworkspanel__">How does it work?</span>

</a>

 

 

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

Hi @AEM_user25!

There's not much information provided to really give proper advice for the issue you are experiencing.Without more context and ideally a bit of prior investigation on your end, it's really hard to identify the root cause. Let me provide first steps for the analysis to gather more insights:

 

  • How should the missing icon be included into the page?
    The HTML extract you provided does not have any image tags, so it is probably added via either CSS or JavaScript.
  • Is the image requested when you load the page?
    The browser might be unable to load the image (e. g. because it is missing/blocked). You would see a request to the path of the image in your browser web developer tools that gets a response of e. g. HTTP 404 Not Found or 403 Forbidden status code. In this case, the image might be inaccessible, e. g. because it is not published / present on the publish server or because the access is blocked by Dispatcher filter rules.
  • If the image is not requested on page load, the resources (probably CSS or JS; see first point) responsible to load it might be missing or causing an issue.
  • Are there any resources missing when loading the page?
    You can check the "network" tab of your browsers web developer tools to verify if there are any issues when the page tries to load images, CSS or JavaScript files. Often times, you would see HTTP status codes like 404 Not Found, 403 Forbidden or 50x for server errors.

This should already guide you into the right direction to find the cause of the issue.

 

The most common reasons for this kind of issue have already been mentioned:

  • A resource is not published / available on the publish server
    (E. g. an asset has not been activated or a package has not been fully/correctly rolled out to the publish server.)
  • Access to a resource is blocked, e. g. due to permissions on the publish server or filter rules on the dispatcher server.
  • An old version of a resource is being delivered, e. g. because the expected version is not published or the cache has not been invalidated.

Please note that in the above list, the resource could either be the HTML page, the missing image, a CSS or JavaScript file or something else.

 

Further actions for debugging could be:

  • Checking direct access to the publish instance vs. access through Load Balancer and Dispatcher.
    If it works directly on the publish server but not through dispatcher, the issue is probably to be found on the Dispatcher (e. g. filter rules or caching). => Seems you already did this. Good!
  • Invalidating/deleting the cache - if this fixes the issue, then it's about caching and you need to check on your invalidation strategies (e. g. StatsFileLevel).
  • Checking the log files of Dispatcher (and Publish server) for incoming requests and errors. This would also include request.log, access.log and error.log. You might also consider raising the log level(s) to get more information.

Hope this helps!

 

View solution in original post

3 Replies

Avatar

Community Advisor

Track where the icon is coming from. Perhaps the resource (icon) is being blocked, or maybe you are viewing a cached version that is not accurate for your published instance. Please check both possibilities, flush cache and also see if there are any browser console error

 

Regards.



Esteban Bustamante

Avatar

Community Advisor

Hi @AEM_user25 There are multiple possibilities over here.

Couple of them are highlighted by @EstebanBustamante  over here i.e.

1. whether the icon is published or not

2. whether the page cached does not have the icon link

The other possibility could be the extension of the icon you are using over here, but the same is getting blocked via the dispatcher. So for that you can get it verified by check the dispatcher logs. The location to allow the extension is filter.any file located at the path <project-name>\dispatcher\src\conf.dispatcher.d\filters\default_filters.any

Hope this helps!

Thanks

 

Avatar

Correct answer by
Employee Advisor

Hi @AEM_user25!

There's not much information provided to really give proper advice for the issue you are experiencing.Without more context and ideally a bit of prior investigation on your end, it's really hard to identify the root cause. Let me provide first steps for the analysis to gather more insights:

 

  • How should the missing icon be included into the page?
    The HTML extract you provided does not have any image tags, so it is probably added via either CSS or JavaScript.
  • Is the image requested when you load the page?
    The browser might be unable to load the image (e. g. because it is missing/blocked). You would see a request to the path of the image in your browser web developer tools that gets a response of e. g. HTTP 404 Not Found or 403 Forbidden status code. In this case, the image might be inaccessible, e. g. because it is not published / present on the publish server or because the access is blocked by Dispatcher filter rules.
  • If the image is not requested on page load, the resources (probably CSS or JS; see first point) responsible to load it might be missing or causing an issue.
  • Are there any resources missing when loading the page?
    You can check the "network" tab of your browsers web developer tools to verify if there are any issues when the page tries to load images, CSS or JavaScript files. Often times, you would see HTTP status codes like 404 Not Found, 403 Forbidden or 50x for server errors.

This should already guide you into the right direction to find the cause of the issue.

 

The most common reasons for this kind of issue have already been mentioned:

  • A resource is not published / available on the publish server
    (E. g. an asset has not been activated or a package has not been fully/correctly rolled out to the publish server.)
  • Access to a resource is blocked, e. g. due to permissions on the publish server or filter rules on the dispatcher server.
  • An old version of a resource is being delivered, e. g. because the expected version is not published or the cache has not been invalidated.

Please note that in the above list, the resource could either be the HTML page, the missing image, a CSS or JavaScript file or something else.

 

Further actions for debugging could be:

  • Checking direct access to the publish instance vs. access through Load Balancer and Dispatcher.
    If it works directly on the publish server but not through dispatcher, the issue is probably to be found on the Dispatcher (e. g. filter rules or caching). => Seems you already did this. Good!
  • Invalidating/deleting the cache - if this fixes the issue, then it's about caching and you need to check on your invalidation strategies (e. g. StatsFileLevel).
  • Checking the log files of Dispatcher (and Publish server) for incoming requests and errors. This would also include request.log, access.log and error.log. You might also consider raising the log level(s) to get more information.

Hope this helps!