Show error message when JS code fails to load

[Turbo87]

This should resolve #2984, by adding a short error message when something fails to load before the Ember app has booted up:

This does use an inline script though, so we might have to adjust the CSP for this 😞

r? @jtgeibel

[Turbo87]

I've added a hash of the inline script to the CSP config for nginx, deployed it to staging, and it appears to work :)

[jtgeibel]

This works for me locally in Firefox and Chrome when I block the vendor-*.js resource, but this does not work (i.e. blank page only) if I block cargo-*.js.

Additionally, in Firefox only, I see the error None of the “sha512” hashes in the integrity attribute match the content of the subresource. in my console. This is confusing because I don't have CSP enabled in my local environment, and the error seems to be referring to Subresource Integrity. Otherwise the behavior between Chrome and Firefox appears the same, so this may be unrelated.

I don't understand why this appears to rely on cargo.js loading.

My test setup is to run ember build --prod followed by cargo run --bin server and then accessing via http://localhost:8888. This is similar to our production enviornment, sans nginx configuration (like CORS).

[Turbo87]

I've managed to reproduce your issue and I think I understand what's going on:

At least in Chrome, it looks like blocking a URL through the devtools does not cause the onerror handler to be called, instead the request is just silently ignored. The reason why blocking the vendor.js file "worked" is that the cargo.js file depends on code in the vendor.js file, and since that code wasn't there it caused an "Uncaught ReferenceError: define is not defined" error visible on the devtools console.

In other words: blocking the URL through the devtools does not seem to create a realistic failure scenario. The thing we want to test here is having a syntax error in the JS file, so what I did to test this is prefix the content of one of the JS files with e.g. an @ sign so that the browser can't parse it as valid JS anymore. This worked for both cargo.js and vendor.js, so I assume that this is still working as intended.

[jtgeibel]

Well it sounds like my test steps were fatally flawed then. Thanks for investigating further and adding the comment.

@bors r+

[bors]

📌 Commit d425ab5 has been approved by jtgeibel

[bors]

⌛ Testing commit d425ab5 with merge 437f5a9...

[bors]

☀️ Test successful - checks-actions
Approved by: jtgeibel
Pushing 437f5a9 to master...