The logger option provides custom logging for React Compiler events during compilation.
{ logger: { logEvent(filename, event) { console.log(`[Compiler] ${event.kind}: ${filename}`); } } }
Reference
logger
Configures custom logging to track compiler behavior and debug issues.
Type
{ logEvent: (filename: string | null, event: LoggerEvent) => void; } | null
Default value
null
Methods
logEvent: Called for each compiler event with the filename and event details
Event types
CompileSuccess: Function successfully compiledCompileError: Function skipped due to errorsCompileDiagnostic: Non-fatal diagnostic informationCompileSkip: Function skipped for other reasonsPipelineError: Unexpected compilation errorTiming: Performance timing information
Caveats
- Event structure may change between versions
- Large codebases generate many log entries
Usage
Basic logging
Track compilation success and failures:
{ logger: { logEvent(filename, event) { switch (event.kind) { case 'CompileSuccess': { console.log(`✅ Compiled: ${filename}`); break; } case 'CompileError': { console.log(`❌ Skipped: ${filename}`); break; } default: {} } } } }
Detailed error logging
Get specific information about compilation failures:
{ logger: { logEvent(filename, event) { if (event.kind === 'CompileError') { console.error(`\nCompilation failed: ${filename}`); console.error(`Reason: ${event.detail.reason}`); if (event.detail.description) { console.error(`Details: ${event.detail.description}`); } if (event.detail.loc) { const { line, column } = event.detail.loc.start; console.error(`Location: Line ${line}, Column ${column}`); } if (event.detail.suggestions) { console.error('Suggestions:', event.detail.suggestions); } } } } }