Auto merge of #3044 - Turbo87:fallback, r=jtgeibel

Show error message when JS code fails to load

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

<img width="942" alt="Bildschirmfoto 2020-11-25 um 00 31 31" src="https://user-images.githubusercontent.com/141300/100163272-a0671300-2eb5-11eb-8f43-480e803e5b79.png">

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

r? `@jtgeibel`

app/app.js

@@ -7,6 +7,8 @@ import config from './config/environment';
 import * as Sentry from './sentry';
 
 if (typeof FastBoot === 'undefined') {
+  // eslint-disable-next-line unicorn/prefer-add-event-listener
+  window.onerror = undefined;
   Sentry.init();
 }
 

app/index.html

@@ -28,6 +28,8 @@
 
     {{content-for 'body'}}
 
+    <!-- if you change the following inline script make sure to change the CSP settings of nginx! -->
+    <script>window.onerror=function(){document.body.innerHTML='<p style="width: 70%;background: var(--main-bg);padding: 10px;">Sorry, it looks like we were not able to load the page. Please make sure your network connection works and you are using an up-to-date browser. If the issue persists, please visit our <a href="https://github.com/rust-lang/crates.io/issues/new/choose">issue tracker</a> to report the problem.</p>'}</script>
     <script src="{{rootURL}}assets/vendor.js"></script>
     <script src="{{rootURL}}assets/cargo.js"></script>
 

config/nginx.conf.erb

@@ -211,7 +211,7 @@ http {
 		add_header X-Frame-Options "SAMEORIGIN";
 		add_header X-XSS-Protection "1; mode=block";
 
-		add_header Content-Security-Policy "default-src 'self'; connect-src 'self' *.ingest.sentry.io https://docs.rs https://<%= s3_host(ENV) %>; script-src 'self' 'unsafe-eval' https://www.gstatic.com; style-src 'self' 'unsafe-inline' https://www.gstatic.com https://code.cdn.mozilla.net; font-src https://code.cdn.mozilla.net; img-src *; object-src 'none'";
+		add_header Content-Security-Policy "default-src 'self'; connect-src 'self' *.ingest.sentry.io https://docs.rs https://<%= s3_host(ENV) %>; script-src 'self' 'unsafe-eval' https://www.gstatic.com 'sha256-n1+BB7Ckjcal1Pr7QNBh/dKRTtBQsIytFodRiIosXdE='; style-src 'self' 'unsafe-inline' https://www.gstatic.com https://code.cdn.mozilla.net; font-src https://code.cdn.mozilla.net; img-src *; object-src 'none'";
 		add_header Access-Control-Allow-Origin "*";
 
 		add_header Strict-Transport-Security "max-age=31536000" always;