error overlay: show cause if available (#6052)

* show `cause` in error overlay

* add extra check for string

* add changeset
This commit is contained in:
Mayank 2023-01-31 04:12:42 -05:00 committed by GitHub
parent 43ec7f374a
commit 9793f19ecd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 3 deletions

View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Error overlay will now show the error's `cause` if available.

View file

@ -118,6 +118,7 @@ export interface AstroErrorPayload {
line?: number; line?: number;
column?: number; column?: number;
}; };
cause?: unknown;
}; };
} }
@ -174,6 +175,7 @@ export async function getViteErrorPayload(err: ErrorWithMetadata): Promise<Astro
}, },
plugin, plugin,
stack: err.stack, stack: err.stack,
cause: err.cause
}, },
}; };

View file

@ -321,7 +321,8 @@ const style = /* css */ `
#message-hints, #message-hints,
#stack, #stack,
#code { #code,
#cause {
border-radius: var(--roundiness); border-radius: var(--roundiness);
background-color: var(--box-background); background-color: var(--box-background);
} }
@ -471,7 +472,8 @@ const style = /* css */ `
color: var(--error-text); color: var(--error-text);
} }
#stack h2 { #stack h2,
#cause h2 {
color: var(--title-text); color: var(--title-text);
font-family: var(--font-normal); font-family: var(--font-normal);
font-size: 22px; font-size: 22px;
@ -480,7 +482,8 @@ const style = /* css */ `
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
} }
#stack-content { #stack-content,
#cause-content {
font-size: 14px; font-size: 14px;
white-space: pre; white-space: pre;
line-height: 21px; line-height: 21px;
@ -488,6 +491,10 @@ const style = /* css */ `
padding: 24px; padding: 24px;
color: var(--stack-text); color: var(--stack-text);
} }
#cause {
display: none;
}
`; `;
const overlayTemplate = /* html */ ` const overlayTemplate = /* html */ `
@ -552,6 +559,11 @@ ${style.trim()}
<h2>Stack Trace</h2> <h2>Stack Trace</h2>
<div id="stack-content"></div> <div id="stack-content"></div>
</section> </section>
<section id="cause">
<h2>Cause</h2>
<div id="cause-content"></div>
</section>
</div> </div>
</div> </div>
`; `;
@ -593,6 +605,17 @@ class ErrorOverlay extends HTMLElement {
this.text('#title', err.title); this.text('#title', err.title);
this.text('#message-content', err.message, true); 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'); const hint = this.root.querySelector<HTMLElement>('#hint');
if (hint && err.hint) { if (hint && err.hint) {
this.text('#hint-content', err.hint, true); this.text('#hint-content', err.hint, true);