PR feedback

Author: ryanbrandenburg

src/Components/Blazor/Templates/src/content/BlazorWasm-CSharp/Client/wwwroot/index.html

@@ -15,8 +15,8 @@
 
     <div id="error-ui">
         An unhandled error has occurred.
-        <a href="#" class='reload'>Reload</a>
-        <a href="#" class='dismiss'>X</a>
+        <a href class='reload'>Reload</a>
+        <a href class='dismiss'>🗙</a>
     </div>
     <script src="_framework/blazor.webassembly.js"></script>
 </body>

src/Components/Web.JS/src/Boot.Server.ts

@@ -2,6 +2,7 @@ import '@dotnet/jsinterop';
 import './GlobalExports';
 import * as signalR from '@aspnet/signalr';
 import { MessagePackHubProtocol } from '@aspnet/signalr-protocol-msgpack';
+import { showErrorNotification } from './BootErrors';
 import { shouldAutoStart } from './BootCommon';
 import { RenderQueue } from './Platform/Circuits/RenderQueue';
 import { ConsoleLogger } from './Platform/Logging/Loggers';
@@ -102,33 +103,11 @@ async function initializeConnection(options: BlazorOptions, logger: Logger, circ
     renderQueue.processBatch(batchId, batchData, connection);
   });
 
-  const errorUiReloads = document.querySelectorAll<HTMLElement>("#error-ui .reload");
-  errorUiReloads.forEach(reload => {
-    reload.onclick = function (e) {
-      location.reload();
-      e.preventDefault();
-    };
-  });
-
-  let errorUiDismiss = document.querySelectorAll<HTMLElement>("#error-ui .dismiss");
-  errorUiDismiss.forEach(dismiss => {
-    dismiss.onclick = function (e) {
-      const errorUi = document.querySelector<HTMLElement>("#error-ui");
-      if (errorUi) {
-        errorUi.style.display = 'none';
-      }
-      e.preventDefault();
-    };
-  });
-
   connection.onclose(error => !renderingFailed && options.reconnectionHandler!.onConnectionDown(options.reconnectionOptions, error));
   connection.on('JS.Error', error => {
     renderingFailed = true;
     unhandledError(connection, error, logger);
-    let errorUi = document.querySelector("#error-ui") as HTMLElement;
-    if (errorUi) {
-      errorUi.style.display = 'block';
-    }
+    showErrorNotification();
   });
 
   window['Blazor']._internal.forceCloseConnection = () => connection.stop();

src/Components/Web.JS/src/BootErrors.ts

@@ -0,0 +1,30 @@
+let hasFailed = false;
+
+export async function showErrorNotification() {
+    let errorUi = document.querySelector('#error-ui') as HTMLElement;
+    if (errorUi) {
+        errorUi.style.display = 'block';
+    }
+
+    if (!hasFailed) {
+        hasFailed = true;
+        const errorUiReloads = document.querySelectorAll<HTMLElement>('#error-ui .reload');
+        errorUiReloads.forEach(reload => {
+            reload.onclick = function (e) {
+                location.reload();
+                e.preventDefault();
+            };
+        });
+
+        let errorUiDismiss = document.querySelectorAll<HTMLElement>('#error-ui .dismiss');
+        errorUiDismiss.forEach(dismiss => {
+            dismiss.onclick = function (e) {
+                const errorUi = document.querySelector<HTMLElement>('#error-ui');
+                if (errorUi) {
+                    errorUi.style.display = 'none';
+                }
+                e.preventDefault();
+            };
+        });
+    }
+}

src/Components/Web.JS/src/Platform/Mono/MonoPlatform.ts

@@ -233,18 +233,18 @@ function createEmscriptenModuleInstance(loadAssemblyUrls: string[], onReady: ()
 
   module.print = line => (suppressMessages.indexOf(line) < 0 && console.log(`WASM: ${line}`));
 
-  const errorUiReloads = document.querySelectorAll<HTMLElement>("#error-ui .reload");
+  const errorUiReloads = document.querySelectorAll<HTMLElement>('#error-ui .reload');
   errorUiReloads.forEach(reload => {
     reload.onclick = function (e) {
       location.reload();
       e.preventDefault();
     };
   });
 
-  let errorUiDismiss = document.querySelectorAll<HTMLElement>("#error-ui .dismiss");
+  let errorUiDismiss = document.querySelectorAll<HTMLElement>('#error-ui .dismiss');
   errorUiDismiss.forEach(dismiss => {
     dismiss.onclick = function (e) {
-      const errorUi = document.querySelector<HTMLElement>("#error-ui");
+      const errorUi = document.querySelector<HTMLElement>('#error-ui');
       if (errorUi) {
         errorUi.style.display = 'none';
       }
@@ -254,7 +254,7 @@ function createEmscriptenModuleInstance(loadAssemblyUrls: string[], onReady: ()
 
   module.printErr = line => {
     console.error(`WASM: ${line}`);
-    let errorUi = document.querySelector("#error-ui") as HTMLElement;
+    let errorUi = document.querySelector('#error-ui') as HTMLElement;
     if (errorUi) {
       errorUi.style.display = 'block';
     }

src/ProjectTemplates/Web.ProjectTemplates/content/BlazorServerWeb-CSharp/Pages/_Host.cshtml

@@ -24,8 +24,8 @@
         <environment include="Development">
             An unhandled exception has occurred. See browser dev tools for details.
         </environment>
-        <a href="#" class='reload'>Reload</a>
-        <a href="#" class='dismiss'>X</a>
+        <a href class='reload'>Reload</a>
+        <a href class='dismiss'>🗙</a>
     </div>
 
     <script src="_framework/blazor.server.js"></script>