Display error from shell and not editor so there's an error for UI in…

… prod mode (in addition to debug mode)
google · Feb 16, 2024 · 18c106d · 18c106d
1 parent 30c6ca2
commit 18c106d
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 22 deletions.
diff --git a/mesop/web/src/editor/editor.ng.html b/mesop/web/src/editor/editor.ng.html
@@ -1,9 +1,6 @@
 <mat-sidenav-container class="container">
   <mat-sidenav-content #sidenavContent class="content">
     <div class="content-frame-border">
-      @for(error of this.errors; track $index) {
-      <mesop-error-box *ngIf="error != null" [error]="error" />
-      }
       <mesop-shell></mesop-shell>
       <div #dragHandle class="resize-handle"></div>
       <div class="editor-button-container">

diff --git a/mesop/web/src/editor/editor.ts b/mesop/web/src/editor/editor.ts
@@ -1,7 +1,6 @@
 import {
   Component,
   ElementRef,
-  ErrorHandler,
   HostListener,
   Injectable,
   NgZone,
@@ -11,7 +10,6 @@ import {
 import {Router, RouterOutlet, Routes, provideRouter} from '@angular/router';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {
-  ServerError,
   Component as ComponentProto,
   ComponentConfig,
 } from 'mesop/mesop/protos/ui_jspb_proto_pb/mesop/protos/ui_pb';
@@ -29,7 +27,6 @@ import {
   HotReloadWatcher,
   IbazelHotReloadWatcher,
 } from '../services/hot_reload_watcher';
-import {GlobalErrorHandlerService} from '../services/global_error_handler';
 import {Shell} from '../shell/shell';
 import {EditorService, SelectionMode} from '../services/editor_service';
 import {Channel} from '../services/channel';
@@ -53,10 +50,7 @@ import {CommandDialogService} from '../dev_tools/command_dialog/command_dialog_s
     MatSidenavModule,
     Shell,
   ],
-  providers: [
-    {provide: ErrorHandler, useClass: GlobalErrorHandlerService},
-    {provide: HotReloadWatcher, useClass: IbazelHotReloadWatcher},
-  ],
+  providers: [{provide: HotReloadWatcher, useClass: IbazelHotReloadWatcher}],
   styleUrl: 'editor.css',
 })
 class Editor {
@@ -79,28 +73,17 @@ class Editor {
     private devToolsSettings: DevToolsSettings,
     iconRegistry: MatIconRegistry,
     private router: Router,
-    errorHandler: ErrorHandler,
     private editorService: EditorService,
     private channel: Channel,
   ) {
     iconRegistry.setDefaultFontSetClass('material-symbols-rounded');
-    (errorHandler as GlobalErrorHandlerService).setOnError((error) => {
-      const errorProto = new ServerError();
-      errorProto.setException(`JS Error: ${error.toString()}`);
-      this.errors.push(errorProto);
-    });
     this.renderer.setAttribute(
       this.hostElement.nativeElement,
       'tabindex',
       '-1',
     );
   }
 
-  get errors(): ServerError[] {
-    if (!this.shell) return [];
-    return this.shell.errors;
-  }
-
   ngAfterViewInit() {
     this.hostElement.nativeElement.focus();
 

diff --git a/mesop/web/src/shell/BUILD b/mesop/web/src/shell/BUILD
@@ -16,6 +16,7 @@ ng_module(
     deps = [
         "//mesop/protos:ui_jspb_proto",
         "//mesop/web/src/component_renderer",
+        "//mesop/web/src/error",
         "//mesop/web/src/services",
     ] + ANGULAR_CORE_DEPS + ANGULAR_CDK_TS_DEPS + ANGULAR_MATERIAL_TS_DEPS,
 )

diff --git a/mesop/web/src/shell/shell.ng.html b/mesop/web/src/shell/shell.ng.html
@@ -1,3 +1,6 @@
+@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
@@ -1,4 +1,10 @@
-import {Component, HostListener, NgZone, Renderer2} from '@angular/core';
+import {
+  Component,
+  ErrorHandler,
+  HostListener,
+  NgZone,
+  Renderer2,
+} from '@angular/core';
 import {Router, RouterOutlet, Routes, provideRouter} from '@angular/router';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
 import {
@@ -16,6 +22,8 @@ import {bootstrapApplication} from '@angular/platform-browser';
 import {MatIconModule, MatIconRegistry} from '@angular/material/icon';
 import {EditorService} from '../services/editor_service';
 import {MatSidenavModule} from '@angular/material/sidenav';
+import {ErrorBox} from '../error/error_box';
+import {GlobalErrorHandlerService} from '../services/global_error_handler';
 
 @Component({
   selector: 'mesop-shell',
@@ -27,7 +35,9 @@ import {MatSidenavModule} from '@angular/material/sidenav';
     MatProgressBarModule,
     MatIconModule,
     MatSidenavModule,
+    ErrorBox,
   ],
+  providers: [{provide: ErrorHandler, useClass: GlobalErrorHandlerService}],
   styleUrl: 'shell.css',
 })
 export class Shell {
@@ -41,8 +51,14 @@ export class Shell {
     private channel: Channel,
     iconRegistry: MatIconRegistry,
     private router: Router,
+    errorHandler: ErrorHandler,
   ) {
     iconRegistry.setDefaultFontSetClass('material-symbols-rounded');
+    (errorHandler as GlobalErrorHandlerService).setOnError((error) => {
+      const errorProto = new ServerError();
+      errorProto.setException(`JS Error: ${error.toString()}`);
+      this.errors.push(errorProto);
+    });
   }
 
   ngOnInit() {