[compiler] Show logged errors in playground (#33740)
In playground it's helpful to show all errors, even those that don't completely abort compilation. For example, to help demonstrate that the compiler catches things like setState in effects. This detects these errors and ensures we show them.
Joseph Savona committed
Jul 9, 2025 at 12:22 UTC
ec4374c3872b320af60f322289c30cd3d7066bdf
1 file changed
+11
-1
compiler/apps/playground/components/Editor/EditorImpl.tsx
+11
-1
@@ -44,6 +44,7 @@ import {
44
PrintedCompilerPipelineValue,
45
} from './Output';
46
import {transformFromAstSync} from '@babel/core';
47
+import {LoggerEvent} from 'babel-plugin-react-compiler/dist/Entrypoint';
48
49
function parseInput(
50
input: string,
@@ -143,6 +144,7 @@ const COMMON_HOOKS: Array<[string, Hook]> = [
144
function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
145
const results = new Map<string, Array<PrintedCompilerPipelineValue>>();
146
const error = new CompilerError();
147
+ const otherErrors: Array<CompilerErrorDetail> = [];
148
const upsert: (result: PrintedCompilerPipelineValue) => void = result => {
149
const entry = results.get(result.name);
150
if (Array.isArray(entry)) {
@@ -210,7 +212,11 @@ function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
212
},
213
logger: {
214
debugLogIRs: logIR,
213
- logEvent: () => {},
215
+ logEvent: (_filename: string | null, event: LoggerEvent) => {
216
+ if (event.kind === 'CompileError') {
217
+ otherErrors.push(new CompilerErrorDetail(event.detail));
218
+ }
219
+ },
220
},
221
});
222
transformOutput = invokeCompiler(source, language, opts);
@@ -237,6 +243,10 @@ function compile(source: string): [CompilerOutput, 'flow' | 'typescript'] {
243
);
244
}
245
}
246
+ // Only include logger errors if there weren't other errors
247
+ if (!error.hasErrors() && otherErrors.length !== 0) {
248
+ otherErrors.forEach(e => error.push(e));
249
+ }
250
if (error.hasErrors()) {
251
return [{kind: 'err', results, error: error}, language];
252
}