ErrorOverlay Class — astro Architecture

Source Code

packages/astro/src/core/errors/overlay.ts lines 613–792

class ErrorOverlay extends HTMLElement {
	root: ShadowRoot;

	constructor(err: AstroErrorPayload['err']) {
		super();
		this.root = this.attachShadow({ mode: 'open' });
		this.root.innerHTML = overlayTemplate;
		this.dir = 'ltr';

		// theme toggle logic
		const themeToggle = this.root.querySelector<HTMLInputElement>('.theme-toggle-checkbox');
		if (
			localStorage.astroErrorOverlayTheme === 'dark' ||
			(!('astroErrorOverlayTheme' in localStorage) &&
				window.matchMedia('(prefers-color-scheme: dark)').matches)
		) {
			this?.classList.add('astro-dark');
			localStorage.astroErrorOverlayTheme = 'dark';
			themeToggle!.checked = true;
		} else {
			this?.classList.remove('astro-dark');
			themeToggle!.checked = false;
		}
		themeToggle?.addEventListener('click', () => {
			const isDark =
				localStorage.astroErrorOverlayTheme === 'dark' || this?.classList.contains('astro-dark');
			this?.classList.toggle('astro-dark', !isDark);
			localStorage.astroErrorOverlayTheme = isDark ? 'light' : 'dark';
		});

		this.text('#name', err.name);
		this.text('#title', err.title);
		this.text('#message-content', err.message, true);

		const cause = this.root.querySelector<HTMLElement>('#cause');
		if (cause && err.cause) {
			if (typeof err.cause === 'string') {
				this.text('#cause-content', err.cause);
				cause.style.display = 'block';
			} else {
				this.text('#cause-content', JSON.stringify(err.cause, null, 2));
				cause.style.display = 'block';
			}
		}

		const hint = this.root.querySelector<HTMLElement>('#hint');
		if (hint && err.hint) {
			this.text('#hint-content', err.hint, true);
			hint.style.display = 'flex';
		}

		const docslink = this.root.querySelector<HTMLElement>('#message');
		if (docslink && err.docslink) {
			docslink.appendChild(this.createLink(`See Docs Reference${openNewWindowIcon}`, err.docslink));
		}

		const code = this.root.querySelector<HTMLElement>('#code');
		if (code && err.loc?.file) {
			code.style.display = 'block';
			const codeHeader = code.querySelector<HTMLHeadingElement>('#code header');
			const codeContent = code.querySelector<HTMLDivElement>('#code-content');

			if (codeHeader) {
				const separator = err.loc.file.includes('/') ? '/' : '\\';
				const cleanFile = err.loc.file.split(separator).slice(-2).join('/');
				const fileLocation = [cleanFile, err.loc.line, err.loc.column].filter(Boolean).join(':');
				const absoluteFileLocation = [err.loc.file, err.loc.line, err.loc.column]
					.filter(Boolean)
					.join(':');

				const codeFile = codeHeader.getElementsByTagName('h2')[0];
				codeFile.textContent = fileLocation;
				codeFile.title = absoluteFileLocation;

				const editorLink = this.createLink(`Open in editor${openNewWindowIcon}`, undefined);
				editorLink.onclick = () => {
					fetch('/__open-in-editor?file=' + encodeURIComponent(absoluteFileLocation));
				};

				codeHeader.appendChild(editorLink);
			}