Fix build error location reporting for MDX and aggregate plugin errors (#17757)

Co-authored-by: factory[bot] <factory[bot]@users.noreply.github.com>

Author: astro-factory[bot]

.changeset/gentle-regions-shave.md

@@ -0,0 +1,6 @@
+---
+'astro': patch
+'@astrojs/mdx': patch
+---
+
+Fixes build errors showing wrong file location, missing line:col, and misleading hints when a plugin error (e.g. from MDX) is wrapped by Vite's build error

packages/astro/src/core/errors/dev/utils.ts

@@ -23,8 +23,8 @@ export function collectErrorMetadata(e: any, rootFolder?: URL): ErrorWithMetadat
 		AggregateError.is(e) || Array.isArray(e.errors) ? (e.errors as SSRError[]) : [e as SSRError];
 
 	err.forEach((error) => {
-		if (e.stack) {
-			const stackInfo = collectInfoFromStacktrace(e);
+		if (error.stack) {
+			const stackInfo = collectInfoFromStacktrace(error);
 			try {
 				error.stack = stripVTControlCharacters(stackInfo.stack);
 			} catch {}
@@ -68,7 +68,7 @@ export function collectErrorMetadata(e: any, rootFolder?: URL): ErrorWithMetadat
 		}
 
 		// Generic error (probably from Vite, and already formatted)
-		error.hint = generateHint(e);
+		error.hint = generateHint(error);
 
 		// Strip ANSI for `message` property. Note that ESBuild errors may not have the property,
 		// but it will be handled and added below, which is already ANSI-free

packages/astro/test/units/errors/dev-utils.test.ts

@@ -1,6 +1,6 @@
 import * as assert from 'node:assert/strict';
 import { describe, it } from 'node:test';
-import { renderErrorMarkdown } from '../../../dist/core/errors/dev/utils.js';
+import { collectErrorMetadata, renderErrorMarkdown } from '../../../dist/core/errors/dev/utils.js';
 
 describe('renderErrorMarkdown', () => {
 	describe('html target', () => {
@@ -222,3 +222,70 @@ describe('renderErrorMarkdown', () => {
 		});
 	});
 });
+
+describe('collectErrorMetadata', () => {
+	it('uses sub-error properties when the parent error has an errors array', () => {
+		// Simulate how rolldown/Vite wraps a plugin error: the parent error has
+		// its own stack but no loc/plugin, while the sub-error carries the real info.
+		const subError = new Error('Something went wrong in component.astro');
+		subError.stack = `Error: Something went wrong in component.astro
+    at renderComponent (file:///project/src/components/Foo.astro:10:5)`;
+
+		const parentError = new Error('Build failed with 1 error');
+		parentError.stack = `Error: Build failed with 1 error
+    at buildEnvironment (file:///node_modules/vite/dist/node/chunks/node.js:33011:66)`;
+		// @ts-ignore - adding errors array like rolldown does
+		parentError.errors = [subError];
+
+		const result = collectErrorMetadata(parentError);
+
+		// The sub-error's own stack should be used, not the parent's
+		assert.ok(result.stack?.includes('renderComponent'));
+		assert.ok(!result.stack?.includes('buildEnvironment'));
+	});
+
+	it('preserves sub-error loc when parent error has no loc', () => {
+		const subError = new Error('Parse error');
+		// @ts-ignore
+		subError.loc = { file: '/project/src/pages/test.mdx', line: 10, column: 5 };
+		// @ts-ignore
+		subError.plugin = 'astro:mdx';
+		subError.stack = `Error: Parse error
+    at transform (file:///project/node_modules/@astrojs/mdx/dist/index.js:42:7)`;
+
+		const parentError = new Error('Build failed');
+		parentError.stack = `Error: Build failed
+    at buildEnvironment (file:///node_modules/vite/dist/node.js:100:20)`;
+		// @ts-ignore
+		parentError.errors = [subError];
+
+		const result = collectErrorMetadata(parentError);
+
+		assert.equal(result.loc?.file, '/project/src/pages/test.mdx');
+		assert.equal(result.loc?.line, 10);
+		assert.equal(result.loc?.column, 5);
+		assert.equal(result.plugin, 'astro:mdx');
+	});
+
+	it('does not generate misleading hints from parent error message', () => {
+		// The sub-error message has no browser API references, but the parent's
+		// stack/message might mention "window" or "document" incidentally.
+		const subError = new Error('Could not parse expression with oxc');
+		subError.stack = `Error: Could not parse expression with oxc
+    at transform (file:///project/node_modules/@astrojs/mdx/dist/index.js:42:7)`;
+
+		const parentError = new Error('Build failed - check document for details');
+		parentError.stack = `Error: Build failed
+    at build (file:///node_modules/vite/dist/node.js:100:20)`;
+		// @ts-ignore
+		parentError.errors = [subError];
+
+		const result = collectErrorMetadata(parentError);
+
+		// Should not get a "Browser APIs are not available" hint from the parent message
+		assert.ok(
+			!result.hint?.includes('Browser APIs'),
+			'Should not generate browser API hint from parent error',
+		);
+	});
+});

packages/integrations/mdx/src/vite-plugin-mdx.ts

@@ -72,7 +72,18 @@ export function vitePluginMdx(opts: VitePluginMdxOptions): Plugin {
 					// Surface compile failures as a dedicated MDX error with a source
 					// location so the dev overlay can point at the offending file.
 					err.name = 'MDXError';
-					err.loc = { file: id, line: e.line, column: e.column };
+					// Some parser errors (e.g. from oxc) embed line:col only in the
+					// message as a "line:col: ..." prefix instead of setting properties.
+					let line = e.line;
+					let column = e.column;
+					if (line == null || column == null) {
+						const match = /^(\d+):(\d+):/.exec(e.message);
+						if (match) {
+							line ??= Number(match[1]);
+							column ??= Number(match[2]);
+						}
+					}
+					err.loc = { file: id, line, column };
 					// Compiler errors may arrive without a JS stack; capture one here.
 					Error.captureStackTrace(err);
 					throw err;