chromium/ash/webui/recorder_app_ui/resources/platforms/dev/error-view.ts

// Copyright 2024 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {
  css,
  html,
  LitElement,
  nothing,
  PropertyDeclarations,
} from 'chrome://resources/mwc/lit/index.js';

import * as localStorage from '../../core/utils/local_storage.js';
import {ValidationError} from '../../core/utils/schema.js';

import {devSettingsSchema} from './settings.js';

/**
 * Component for showing error message for dev server.
 */
export class ErrorView extends LitElement {
  static override styles = css`
    :host {
      align-items: center;
      display: flex;
      font-family: monospace;
      inset: 0;
      justify-content: center;
      pointer-events: none;
      position: absolute;
      z-index: 100;
    }

    div {
      background: var(--cros-sys-surface);
      border: 1px solid var(--cros-sys-outline);
      max-width: 960px;
      padding: 8px;
      pointer-events: auto;
    }
  `;

  static override properties: PropertyDeclarations = {
    error: {attribute: false},
  };

  error: unknown = null;

  override render(): RenderResult {
    if (this.error === null) {
      return nothing;
    }
    const errorDisplay = (() => {
      if (this.error instanceof Error) {
        return this.error.stack;
      } else {
        return this.error;
      }
    })();
    if (this.error instanceof ValidationError &&
        this.error.issue.schema === devSettingsSchema) {
      // This is caused by dev settings schema change, clear the localStorage
      // and refresh.
      console.error('Detected dev settings schema change...');
      localStorage.remove(localStorage.Key.DEV_SETTINGS);
      window.location.reload();
      return nothing;
    }
    return html`<div>
      Unexpected error happened.
      <pre>${errorDisplay}</pre>
    </div>`;
  }
}

window.customElements.define('error-view', ErrorView);

declare global {
  interface HTMLElementTagNameMap {
    'error-view': ErrorView;
  }
}