Merge branch 'withastro:main' into fix-lit-hydration

withastro · Jan 31, 2023 · b760e74 · b760e74
2 parents 59f0682 + 474ecc7
commit b760e74
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 265 deletions.
diff --git a/.changeset/clever-panthers-end.md b/.changeset/clever-panthers-end.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Error overlay will now show the error's `cause` if available.
diff --git a/.changeset/cuddly-donkeys-warn.md b/.changeset/cuddly-donkeys-warn.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/mdx': patch
+---
+
+Update MDX README
diff --git a/packages/astro/src/core/errors/dev/vite.ts b/packages/astro/src/core/errors/dev/vite.ts
@@ -118,6 +118,7 @@ export interface AstroErrorPayload {
 			line?: number;
 			column?: number;
 		};
+		cause?: unknown;
 	};
 }
 
@@ -174,6 +175,7 @@ export async function getViteErrorPayload(err: ErrorWithMetadata): Promise<Astro
 			},
 			plugin,
 			stack: err.stack,
+			cause: err.cause,
 		},
 	};
 

diff --git a/packages/astro/src/core/errors/errors-data.ts b/packages/astro/src/core/errors/errors-data.ts
@@ -419,7 +419,7 @@ See https://docs.astro.build/en/guides/server-side-rendering/ for more informati
 	 * @docs
 	 * @message
 	 * **Example error messages:**<br/>
-	 * InvalidComponentArgs: Invalid arguments passed to <MyAstroComponent> component.
+	 * InvalidComponentArgs: Invalid arguments passed to `<MyAstroComponent>` component.
 	 * @description
 	 * Astro components cannot be rendered manually via a function call, such as `Component()` or `{items.map(Component)}`. Prefer the component syntax `<Component />` or `{items.map(item => <Component {...item} />)}`.
 	 */

diff --git a/packages/astro/src/core/errors/overlay.ts b/packages/astro/src/core/errors/overlay.ts
@@ -321,7 +321,8 @@ const style = /* css */ `
 
 #message-hints,
 #stack,
-#code {
+#code,
+#cause {
   border-radius: var(--roundiness);
   background-color: var(--box-background);
 }
@@ -471,7 +472,8 @@ const style = /* css */ `
   color: var(--error-text);
 }
 
-#stack h2 {
+#stack h2,
+#cause h2 {
   color: var(--title-text);
   font-family: var(--font-normal);
   font-size: 22px;
@@ -480,14 +482,19 @@ const style = /* css */ `
   border-bottom: 1px solid var(--border);
 }
 
-#stack-content {
+#stack-content,
+#cause-content {
   font-size: 14px;
   white-space: pre;
   line-height: 21px;
   overflow: auto;
   padding: 24px;
   color: var(--stack-text);
 }
+
+#cause {
+  display: none;
+}
 `;
 
 const overlayTemplate = /* html */ `
@@ -552,6 +559,11 @@ ${style.trim()}
       <h2>Stack Trace</h2>
       <div id="stack-content"></div>
     </section>
+
+    <section id="cause">
+      <h2>Cause</h2>
+      <div id="cause-content"></div>
+    </section>
   </div>
 </div>
 `;
@@ -593,6 +605,17 @@ class ErrorOverlay extends HTMLElement {
 		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);

diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md
@@ -422,7 +422,10 @@ This can be helpful if you need to add preload links to a page's `<head>`.
 ---
 import { getImage } from '@astrojs/image';
 
-const { src } = await getImage({src: '../assets/hero.png'});
+const { src } = await getImage({
+    src: import('../assets/hero.png'),
+    alt: "My hero image"
+  });
 ---
 
 <html>