Show an error dialog if web component is not registered

mesop/web/src/component_renderer/component_renderer.ts

@@ -40,6 +40,7 @@ import {MatTooltipModule} from '@angular/material/tooltip';
 import {TemplatePortal} from '@angular/cdk/portal';
 import {jsonParse} from '../utils/strict_types';
 import {MESOP_EVENT_NAME, MesopEvent} from './mesop_event';
+import {ErrorDialogService} from '../services/error_dialog_service';
 
 export const COMPONENT_RENDERER_ELEMENT_NAME = 'component-renderer-element';
 
@@ -84,6 +85,7 @@ export class ComponentRenderer {
     private elementRef: ElementRef,
     private overlay: Overlay,
     private viewContainerRef: ViewContainerRef,
+    private errorDialogService: ErrorDialogService,
   ) {
     this.isEditorMode = this.editorService.isEditorMode();
   }
@@ -303,6 +305,17 @@ export class ComponentRenderer {
       const customElementName = typeName
         .getFnName()!
         .slice(WEB_COMPONENT_PREFIX.length);
+
+      // Check if the custom element is already defined
+      if (!customElements.get(customElementName)) {
+        const error = new Error(
+          `Expected web component '${customElementName}' to be registered by the JS module.
+
+Make sure the web component name is spelled the same between Python and JavaScript.`,
+        );
+        this.errorDialogService.showError(error);
+      }
+
       this.customElement = document.createElement(customElementName);
       this.updateCustomElement(this.customElement);
 

mesop/web/src/editor/editor.ts

@@ -31,6 +31,10 @@ import {Shell, registerComponentRendererElement} from '../shell/shell';
 import {EditorService, SelectionMode} from '../services/editor_service';
 import {Channel} from '../services/channel';
 import {isMac} from '../utils/platform';
+import {
+  DebugErrorDialogService,
+  ErrorDialogService,
+} from '../services/error_dialog_service';
 // Keep the following comment to ensure there's a hook for adding TS imports in the downstream sync.
 // ADD_TS_IMPORT_HERE
 
@@ -260,6 +264,7 @@ export async function bootstrapApp() {
       provideAnimations(),
       provideRouter(routes),
       {provide: EditorService, useClass: EditorServiceImpl},
+      {provide: ErrorDialogService, useClass: DebugErrorDialogService},
     ],
   });
   registerComponentRendererElement(app);

mesop/web/src/services/BUILD

@@ -1,4 +1,4 @@
-load("//build_defs:defaults.bzl", "ANGULAR_CORE_DEPS", "ng_module")
+load("//build_defs:defaults.bzl", "ANGULAR_CORE_DEPS", "ANGULAR_MATERIAL_TS_DEPS", "ng_module")
 
 package(
     default_visibility = ["//build_defs:mesop_internal"],
@@ -13,5 +13,5 @@ ng_module(
         "//mesop/protos:ui_jspb_proto",
         "//mesop/web/src/dev_tools/services",
         "//mesop/web/src/utils",
-    ] + ANGULAR_CORE_DEPS,
+    ] + ANGULAR_CORE_DEPS + ANGULAR_MATERIAL_TS_DEPS,
 )

mesop/web/src/services/error_dialog_service.ts

@@ -0,0 +1,62 @@
+import {Component, Inject, Injectable, Input} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogModule,
+} from '@angular/material/dialog';
+
+export abstract class ErrorDialogService {
+  abstract showError(error: any): void;
+}
+
+export class ProdErrorDialogService implements ErrorDialogService {
+  showError(error: any): void {
+    console.error(error);
+  }
+}
+
+@Injectable()
+export class DebugErrorDialogService implements ErrorDialogService {
+  constructor(private dialog: MatDialog) {}
+
+  showError(error: any): void {
+    console.error(error);
+    this.dialog.open(ErrorDialogComponent, {
+      width: '400px',
+      data: {error: error},
+    });
+  }
+}
+
+@Component({
+  selector: 'mesop-error-dialog',
+  template: `
+    <h3 mat-dialog-title>Mesop Developer Error</h3>
+    <mat-dialog-content class="mat-typography">
+      <div class="error-content">{{ data.error }}</div>
+    </mat-dialog-content>
+    <mat-dialog-actions align="end">
+      <button mat-button color="warn" [mat-dialog-close]="true" cdkFocusInitial>
+        OK
+      </button>
+    </mat-dialog-actions>
+  `,
+  styles: `
+    :host {
+      display: block;
+      background: #f6dfe3;
+      --mdc-dialog-supporting-text-size: 16px;
+      --mdc-dialog-supporting-text-line-height: 1.5;
+    }
+
+    .error-content {
+      white-space: break-spaces;
+    }
+  `,
+  standalone: true,
+  imports: [MatDialogModule, MatButtonModule],
+})
+export class ErrorDialogComponent {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: {error: Error}) {}
+}

mesop/web/src/shell/shell.ts

@@ -40,6 +40,10 @@ import {debounceTime} from 'rxjs/operators';
 import {ThemeService} from '../services/theme_service';
 import {getQueryParams} from '../utils/query_params';
 import {query} from '@angular/animations';
+import {
+  ErrorDialogService,
+  ProdErrorDialogService,
+} from '../services/error_dialog_service';
 
 @Component({
   selector: 'mesop-shell',
@@ -258,7 +262,12 @@ class MesopApp {}
 
 export async function bootstrapApp() {
   const app = await bootstrapApplication(MesopApp, {
-    providers: [provideAnimations(), provideRouter(routes), EditorService],
+    providers: [
+      provideAnimations(),
+      provideRouter(routes),
+      EditorService,
+      {provide: ErrorDialogService, useClass: ProdErrorDialogService},
+    ],
   });
   registerComponentRendererElement(app);
 }

scripts/cli_prod.sh

@@ -0,0 +1,2 @@
+(lsof -t -i:32123 | xargs kill) || true && \
+bazel run //mesop/cli -- --path=mesop/mesop/example_index.py --prod