Skip to main content
ShaneHCisco
New Member
October 7, 2026
Question

Figma Make preview's console.debug hook throws on circular objects (e.g. DOM nodes), breaking any app code that logs them

  • October 7, 2026
  • 0 replies
  • 5 views

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.