Getting 400 error for this client libs in AEM cloud: /etc.clientlibs/clientlibs/index.js.map & /etc.clientlibs/joshltd/clientlibs/clientlib-target/resources/target-devtool.js.map

[vishal-bansal-sbr]

Hi Team,

We seen below client-lib 400 error in new relic dashboard & directly we are not creating this lib into the code, please suggest any solution for this issue.

1. /etc.clientlibs/clientlibs/index.js.map 

2. /etc.clientlibs/joshltd/clientlibs/clientlib-target/resources/target-devtool.js.map

Thanks & regard,
Vishal Bansal

[gkalyan]

@vishal-bansal-sbr 

In order for the client libraries under /apps to be accessible, a proxy servlet is used. The ACLs are still enforced on the client library folder, but the servlet allows for the content to be read via /etc.clientlibs/ if the "allowProxy" property is set to "true".

Try adding this property, for the clientlib node

allowProxy="{Boolean}true"

Refer to this - https://github.com/AdobeDocs/experience-manager-cloud-service.en/blob/main/help/implementing/develop...

[HrishikeshKa]

Hi @vishal-bansal-sbr ,

The 400 error for the client library files /etc.clientlibs/clientlibs/index.js.map and /etc.clientlibs/joshltd/clientlibs/clientlib-target/resources/target-devtool.js.map in AEM Cloud could be due to several reasons such as incorrect paths, missing files, or issues with the dispatcher configuration.

Understanding the Problem

The .map files are typically source maps used for debugging JavaScript. They allow developers to view the original source code in the browser's developer tools, even after the code has been minified or compiled. A 400 error indicates a bad request, which usually means the server couldn't understand the request due to malformed syntax or an invalid file path.

Possible Causes and Solutions

1. Missing Source Map Files: Ensure that the source map files actually exist in the specified locations. Since you mentioned that these libraries are not directly created in your code, it's possible they are generated as part of a build process.

   Solution:

   • Verify the build process and ensure that .map files are generated and placed correctly in the client library directories.
   • If they are missing, check your build configurations to generate these files.

2. Incorrect Path Configuration: Ensure that the paths specified for the client libraries are correct. Paths could be incorrect due to misconfiguration in the client library definitions.

   Solution:

   • Check the client library configurations in your AEM project, typically found under /apps/<your-project>/clientlibs.
   • Ensure that the paths for JavaScript and CSS files, including .map files, are correctly specified.

3. Dispatcher Configuration: The dispatcher might be blocking requests to these paths, resulting in a 400 error.

   Solution:

   • Check the dispatcher configuration and ensure that the paths to the .map files are allowed.

   • Update the filter rules in the dispatcher configuration to allow access to source map files. For example:

/filter {
    /0001 { /type "allow" /url "/etc.clientlibs/*" }
    ...
}

1. Check for Typographical Errors: A simple typo in the path or file name can result in a 400 error.

   Solution:

   • Double-check the file names and paths for any typographical errors.
   • Ensure consistency in naming conventions used in your client library configurations and actual file paths.

Steps to Debug and Resolve the Issue

1. Verify File Existence:

   • Navigate to CRXDE Lite (http://<aem-instance>:4502/crx/de) and check if the .map files exist in the expected paths.

2. Review Client Library Configuration:

   • Inspect the client library configurations in /apps/<your-project>/clientlibs.
   • Ensure that all referenced files, including .map files, are correctly specified and exist.

3. Update Dispatcher Configuration:

   • Ensure that your dispatcher configuration allows requests to /etc.clientlibs/*.
   • Restart the dispatcher after making changes to the configuration.

4. Check Build Process:

   • If using a front-end build tool (like Webpack, Grunt, or Gulp), ensure that source maps are being generated and placed correctly.

5. Review Logs:

   • Check the AEM error logs and dispatcher logs for more detailed error messages that can provide additional context.

Example Client Library Configuration

Here’s an example of a client library configuration in AEM that includes source maps:

<clientLibraryFolder
    jcr:primaryType="cq:ClientLibraryFolder"
    allowProxy="{Boolean}true"
    categories="[your-category]">
    <js>
        <js.txt><![CDATA[
            target.js
            target.js.map
        ]]></js.txt>
    </js>
    <css>
        <css.txt><![CDATA[
            target.css
            target.css.map
        ]]></css.txt>
    </css>
</clientLibraryFolder>

Ensure that the paths specified in js.txt and css.txt files are correct and that the referenced .map files exist.

By following these steps and verifying configurations, you should be able to resolve the 400 error for the client library files in AEM Cloud.

[kautuk_sahni]

@vishal-bansal-sbr 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!