Figma Make preview's console.debug hook throws on circular objects (e.g. DOM nodes), breaking any app code that logs them
Summary:
The Make preview iframe replaces console.debug with a wrapper that calls JSON.stringify on each argument. If any argument is circular, such as a DOM element with a React fiber attached, the wrapper throws a TypeError. The exception propagates into the calling code, so a harmless debug log can break app or library logic. The same code works outside the preview, for example in a plain Vite dev server.
Steps to reproduce
In a Make project, run this anywhere in app code or a dependency:
const el = document.createElement('div')
// or any DOM node rendered by React, which has a __reactFiber$ property
console.debug('mounted', el)
For a minimal repro, log an object with a self-reference:
const a = {}; a.self = a
console.debug(a)
Open the Make preview and check the console.
Expected: The log is recorded or safely ignored, and execution continues.
Actual: The hook throws:
TypeError: Converting circular structure to JSON
--> starting at object with constructor 'HTMLDivElement'
... property '__reactFiber$...' -> object with constructor 'FiberNode'
--- property 'stateNode' closes the circle
at JSON.stringify (<anonymous>)
at Array.map (<anonymous>)
at n (make_git_preview_ifr…min.js)
at Object.debug (make_git_preview_ifr…min.js)
The call to console.debug throws. Any code that doesn't expect logging to fail aborts at that point.
Real-world impact: A third-party component library logs a DOM node with console.debug inside a try block while drawing. The exception aborted the draw, the library reported a generic render error, and the component showed as an empty panel. Nothing in the console pointed to the preview as the cause, so it was hard to diagnose.
Workaround:
Wrap console.debug in the app entry file:
const originalDebug = console.debug.bind(console)
console.debug = (...args) => {
try { originalDebug(...args) } catch { /* ignore */ }
}
Environment: Figma Make preview (the make_git_preview_ifr… iframe), React 18, Vite, Chromium-based browser.