From 72ca9c4495d7bcf97c2a5a495def5f64e22432c5 Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Thu, 9 May 2024 08:34:05 -0700
Subject: [PATCH] Improve error box developer experience (#202)

---
 mesop/web/src/shell/shell.ng.html | 3 +--
 mesop/web/src/shell/shell.ts      | 7 ++++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/mesop/web/src/shell/shell.ng.html b/mesop/web/src/shell/shell.ng.html
index 1eac126b7..ba51c1199 100644
--- a/mesop/web/src/shell/shell.ng.html
+++ b/mesop/web/src/shell/shell.ng.html
@@ -1,6 +1,5 @@
-@for(error of this.errors; track $index) {
 <mesop-error-box *ngIf="error != null" [error]="error" />
-}
+
 <div class="status">
   <mat-progress-bar
     data-testid="connection-progress-bar"
diff --git a/mesop/web/src/shell/shell.ts b/mesop/web/src/shell/shell.ts
index b4d70947b..cb806ea77 100644
--- a/mesop/web/src/shell/shell.ts
+++ b/mesop/web/src/shell/shell.ts
@@ -42,7 +42,7 @@ import {GlobalErrorHandlerService} from '../services/global_error_handler';
 })
 export class Shell {
   rootComponent!: ComponentProto;
-  errors: ServerError[] = [];
+  error: ServerError | undefined;
   componentConfigs: readonly ComponentConfig[] = [];
 
   constructor(
@@ -57,7 +57,7 @@ export class Shell {
     (errorHandler as GlobalErrorHandlerService).setOnError((error) => {
       const errorProto = new ServerError();
       errorProto.setException(`JS Error: ${error.toString()}`);
-      this.errors.push(errorProto);
+      this.error = errorProto;
     });
   }
 
@@ -67,12 +67,13 @@ export class Shell {
       onRender: (rootComponent, componentConfigs) => {
         this.rootComponent = rootComponent;
         this.componentConfigs = componentConfigs;
+        this.error = undefined;
       },
       onNavigate: (route) => {
         this.router.navigateByUrl(route);
       },
       onError: (error) => {
-        this.errors.push(error);
+        this.error = error;
       },
     });
   }