Class ErrorOverlay

src/utilities/piral-debug-utils/src/overlay.ts:222–317

if (typeof window !== 'undefined' && 'customElements' in window) {
  class ErrorOverlay extends HTMLElement {
    root: ShadowRoot;
    closeOnEsc: (e: KeyboardEvent) => void;
    closeOnReload: () => void;

    constructor(props: ErrorOverlayProps, links = true) {
      super();

      const { error, pilet, errorType } = props;

      this.root = this.attachShadow({ mode: 'open' });
      this.root.appendChild(createTemplate());

      codeframeRE.lastIndex = 0;
      const hasFrame = error.frame && codeframeRE.test(error.frame);
      const message = hasFrame ? error.message.replace(codeframeRE, '') : error.message;

      if (pilet) {
        this.text('.plugin', `[${pilet}] `);
      }

      this.text('.message-body', message.trim());

      const [file] = (error.loc?.file || error.id || 'unknown file').split(`?`);

      if (error.loc) {
        this.text('.file', `${file}:${error.loc.line}:${error.loc.column}`, links);
      } else if (error.id) {
        this.text('.file', file);
      }

      if (hasFrame) {
        this.text('.frame', error.frame!.trim());
      }

      this.text('.stack', error.stack.split('\n').slice(0, 15).join('\n'), links);

      convertError(error, 0, 15).then((newStack) => {
        this.text('.stack', newStack, links);
      });

      this.root.querySelector('.window')!.addEventListener('click', (e) => {
        e.stopPropagation();
      });

      this.addEventListener('click', () => {
        this.close();
      });

      this.closeOnEsc = (e: KeyboardEvent) => {
        if (e.key === 'Escape' || e.code === 'Escape') {
          this.close();
        }
      };

      this.closeOnReload = () => this.close();

      window.addEventListener('pilets-reloaded', this.closeOnReload);