404 for a bunch of components like /elements/apply-shim.min.js.map

[onnozweers]

I'm testing the latest dCacheView in dCache 6.0.37. Unfortunately the Javascript console shows that a few components can't be loaded. Not sure how severe this is; might be cosmetic but even then it makes troubleshooting other issues harder.

These files got a 404 status code:

• /elements/apply-shim.min.js.map
• /elements/custom-style-interface.min.js.map
• /elements/web-animations-next-lite.min.js.map
• /elements/md5.min.js.map

Some more logging:

DevTools failed to load SourceMap: Could not load content for https://dcacheview.grid.surfsara.nl:22881/elements/apply-shim.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for https://dcacheview.grid.surfsara.nl:22881/elements/custom-style-interface.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
3elements.html-58.js:128 paper-header-panel is deprecated. Please use app-layout instead!
ready @ elements.html-58.js:128
ready @ elements.html-40.js:343
_enableProperties @ elements.html-9.js:307
connectedCallback @ elements.html-14.js:204
connectedCallback @ elements.html-15.js:576
connectedCallback @ elements.html-32.js:146
connectedCallback @ elements.html-39.js:91
window.Polymer._polymerFn @ elements.html-41.js:32
window.Polymer @ elements.html.js:20
(anonymous) @ elements.html-58.js:23
(anonymous) @ elements.html-58.js:234
4elements.html-59.js:42 paper-toolbar is deprecated. Please use app-layout instead!
ready @ elements.html-59.js:42
ready @ elements.html-40.js:343
_enableProperties @ elements.html-9.js:307
connectedCallback @ elements.html-14.js:204
connectedCallback @ elements.html-15.js:576
connectedCallback @ elements.html-32.js:146
connectedCallback @ elements.html-39.js:91
window.Polymer._polymerFn @ elements.html-41.js:32
window.Polymer @ elements.html.js:20
(anonymous) @ elements.html-59.js:2
2elements.html-70.js:195 paper-drawer-panel is deprecated. Please use app-layout instead!
ready @ elements.html-70.js:195
ready @ elements.html-40.js:343
_enableProperties @ elements.html-9.js:307
connectedCallback @ elements.html-14.js:204
connectedCallback @ elements.html-15.js:576
connectedCallback @ elements.html-32.js:146
connectedCallback @ elements.html-39.js:91
window.Polymer._polymerFn @ elements.html-41.js:32
window.Polymer @ elements.html.js:20
(anonymous) @ elements.html-70.js:20
(anonymous) @ elements.html-70.js:489
elements.html-86.js:137 paper-scroll-header-panel is deprecated. Please use app-layout instead!
ready @ elements.html-86.js:137
ready @ elements.html-40.js:343
_enableProperties @ elements.html-9.js:307
connectedCallback @ elements.html-14.js:204
connectedCallback @ elements.html-15.js:576
connectedCallback @ elements.html-32.js:146
connectedCallback @ elements.html-39.js:91
window.Polymer._polymerFn @ elements.html-41.js:32
window.Polymer @ elements.html.js:20
(anonymous) @ elements.html-86.js:6
(anonymous) @ elements.html-86.js:414
DevTools failed to load SourceMap: Could not load content for https://dcacheview.grid.surfsara.nl:22881/elements/web-animations-next-lite.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load SourceMap: Could not load content for https://dcacheview.grid.surfsara.nl:22881/elements/md5.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

[onnozweers]

Testing with Chrome 90.0.4430.85 and 90.0.4430.93 on MacOS. In Firefox I don't see these 404 statuses.

[onnozweers]

A bit earlier in the log I can see this:

html-imports.js:189 XHR finished loading: GET "https://dcacheview.grid.surfsara.nl:22881/elements/elements.html".

At least one element appears to be loaded. 🙂

[onnozweers]

A listing of the /elements dir show this:

Name  ⇧ | Last Modified | Size
-- | -- | --
Parent Directory | - | -
elements.html | Apr 23, 2021, 1:11:02 PM | 2,940,786 bytes

[paulmillar]

Hi Onno,

Thanks for reporting this.

I haven't been able to reproduce the problems myself. I've tested these both with Firefox and Chrome, both under Linux. In neither case do I see failed attempts to access /elements/apply-shim.min.js.map. I suspect that either you're doing something "special" or this is somehow a platform-related issue.

The 404 response itself is not a surprise. As you reported, the directory /usr/share/dcache/dcache-view/elements/ contains only one file elements.html. The other resources (such as apply-shim.min.js.map) simply doesn't exist in that directory.

The problem doesn't appear to be a regression. dCache v6.0.37 includes a newer version of dCacheView: v1.6.3. The previous version of dCache, v6.0.36, included an earlier version of dCacheView: v1.6.1. In both cases, the dcache-view/elements/ directory contains only one file: elements.html.

Do you see any problems with the UI, or is this problem limited to the errors shown in the console?

[paulmillar]

OK, I think I have some idea what's happening here.

The file elements/elements.html is something of a Frankenstein's monster. It's built by combining many different parts into a single file. This (presumably) provides some performance benefits: avoiding HTTP overheads when fetching many files.

The elements.html file includes some specially formatted JavaScript comments that describe this process; in particular, the comment provides a URL where the browser may obtain information about the original code (before it was combined within elements.html). For example, the file apply-shim.min.js.map is mentioned in elements/elements.html (and only in elements/elements.html) in a single comment:

//# sourceMappingURL=apply-shim.min.js.map

The following links provide more details on sourceMappingURL:

https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/
https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map

So, my conclusion is that dCacheView is broken because the generated elements.html file contains specially formatted JavaScript comments that point to URLs that do not exist.

To fix this, we should either include the source map files with dCacheView, or update elements.html so that it no longer includes these sourceMappingURL comments.

The good news is that this affects debugging only. The actual user interface of dCacheView should be unaffected.

[onnozweers]

Hi Paul, thanks for looking into this!
I ran into these errors while investigating CORS issues. Glad to see it's unrelated. I'll probably submit a separate ticket for that.