logo by @sawaratsuki1004
React
v19.2
Learn
Reference
Community
Blog

Is this page useful?

On this page

  • Overview
  • Reference
  • logger
  • Usage
  • Basic logging
  • Detailed error logging

    react@19.2

  • Overview
  • Hooks
    • useActionState
    • useCallback
    • useContext
    • useDebugValue
    • useDeferredValue
    • useEffect
    • useEffectEvent
    • useId
    • useImperativeHandle
    • useInsertionEffect
    • useLayoutEffect
    • useMemo
    • useOptimistic
    • useReducer
    • useRef
    • useState
    • useSyncExternalStore
    • useTransition
  • المكونات
    • <Fragment> (<>)
    • <Profiler>
    • <StrictMode>
    • <Suspense>
    • <Activity>
    • <ViewTransition> - This feature is available in the latest Canary version of React
  • APIs
    • act
    • addTransitionType - This feature is available in the latest Canary version of React
    • cache
    • cacheSignal
    • captureOwnerStack
    • createContext
    • lazy
    • memo
    • startTransition
    • use
    • experimental_taintObjectReference - This feature is available in the latest Experimental version of React
    • experimental_taintUniqueValue - This feature is available in the latest Experimental version of React
  • react-dom@19.2

  • Hooks
    • useFormStatus
  • المكونات
    • Common (e.g. <div>)
    • <form>
    • <input>
    • <option>
    • <progress>
    • <select>
    • <textarea>
    • <link>
    • <meta>
    • <script>
    • <style>
    • <title>
  • APIs
    • createPortal
    • flushSync
    • preconnect
    • prefetchDNS
    • preinit
    • preinitModule
    • preload
    • preloadModule
  • Client APIs
    • createRoot
    • hydrateRoot
  • Server APIs
    • renderToPipeableStream
    • renderToReadableStream
    • renderToStaticMarkup
    • renderToString
    • resume
    • resumeToPipeableStream
  • Static APIs
    • prerender
    • prerenderToNodeStream
    • resumeAndPrerender
    • resumeAndPrerenderToNodeStream
  • React Compiler

  • Configuration
    • compilationMode
    • gating
    • logger
    • panicThreshold
    • target
  • Directives
    • "use memo"
    • "use no memo"
  • Compiling Libraries
  • React DevTools

  • React Performance tracks
  • eslint-plugin-react-hooks

  • Lints
    • exhaustive-deps
    • rules-of-hooks
    • component-hook-factories
    • config
    • error-boundaries
    • gating
    • globals
    • immutability
    • incompatible-library
    • preserve-manual-memoization
    • purity
    • refs
    • set-state-in-effect
    • set-state-in-render
    • static-components
    • unsupported-syntax
    • use-memo
  • Rules of React

  • Overview
    • Components and Hooks must be pure
    • React calls Components and Hooks
    • Rules of Hooks
  • React Server Components

  • Server Components
  • Server Functions
  • Directives
    • 'use client'
    • 'use server'
  • Legacy APIs

  • Legacy React APIs
    • Children
    • cloneElement
    • Component
    • createElement
    • createRef
    • forwardRef
    • isValidElement
    • PureComponent
API Reference
Configuration

logger

The logger option provides custom logging for React Compiler events during compilation.

{ logger: { logEvent(filename, event) { console.log(`[Compiler] ${event.kind}: ${filename}`); } } }

  • Reference
    • logger
  • Usage
    • Basic logging
    • Detailed error logging

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 compiled
  • CompileError: Function skipped due to errors
  • CompileDiagnostic: Non-fatal diagnostic information
  • CompileSkip: Function skipped for other reasons
  • PipelineError: Unexpected compilation error
  • Timing: 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); } } } } }

Previousgating
NextpanicThreshold

Copyright © Meta Platforms, Inc
no uwu plz
uwu?
Logo by@sawaratsuki1004
Learn React
Quick Start
Installation
Describing the UI
Adding Interactivity
Managing State
Escape Hatches
API Reference
React APIs
React DOM APIs
Community
Code of Conduct
Meet the Team
Docs Contributors
Acknowledgements
More
Blog
React Native
Privacy
Terms
{
logger: {
logEvent(filename, event) {
console.log(`[Compiler] ${event.kind}: ${filename}`);
}
}
}
{
logEvent: (filename: string | null, event: LoggerEvent) => void;
} | null
{
logger: {
logEvent(filename, event) {
switch (event.kind) {
case 'CompileSuccess': {
console.log(`✅ Compiled: ${filename}`);
break;
}
case 'CompileError': {
console.log(`❌ Skipped: ${filename}`);
break;
}
default: {}
}
}
}
}
{
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);
}
}
}
}
}