Use more robust showValue instead of JSON.stringify

Fixes crash on DOM refs & other cyclic hook values.

Author: Oblosys

packages/react-hook-tracer/src/hooks/useContext.ts

@@ -24,7 +24,7 @@ const useContextTraced = <T>(context: Context<T>, traceOptions?: UseContextTrace
   const traceOrigin = componentRegistry.registerHook('context', traceOptions?.label)
   const componentLabel = componentRegistry.getCurrentComponentLabel()
 
-  const show = traceOptions?.show ?? ((context: T) => JSON.stringify(context))
+  const show = traceOptions?.show ?? util.showValue
 
   const contextValue = React.useContext(context)
 

packages/react-hook-tracer/src/hooks/useMemo.ts

@@ -30,7 +30,7 @@ const useMemoTraced = <T>(
 ): T => {
   const traceOrigin = componentRegistry.registerHook('memo', traceOptions?.label)
   const componentLabel = componentRegistry.getCurrentComponentLabel()
-  const show = traceOptions?.show ?? ((value: T) => JSON.stringify(value))
+  const show = traceOptions?.show ?? util.showValue
 
   const isInitialized = useRef(false)
 

packages/react-hook-tracer/src/hooks/useRef.test.tsx

@@ -0,0 +1,133 @@
+import { act, render, screen } from '@testing-library/react'
+
+import { TraceLog } from '../components/TraceLog'
+import { getLogEntries, getPanelTraceOrigins, setupUser } from '../test/util'
+import { useRef } from './useRef'
+import { useTracer } from './useTracer'
+
+test('handles ref-value update', async () => {
+  const user = setupUser()
+  const Test = () => {
+    const { TracePanel } = useTracer()
+    const ref = useRef(42)
+    return (
+      <div>
+        <span data-testid="ref">{ref.current}</span>
+        <input type="button" value="inc" onClick={() => (ref.current += 1)} />
+        <TracePanel />
+        <TraceLog />
+      </div>
+    )
+  }
+  expect(getLogEntries()).toHaveLength(0)
+  render(<Test />)
+  act(() => jest.runOnlyPendingTimers())
+
+  expect(getLogEntries()).toContainEqual({
+    componentLabel: 'Test-1',
+    origin: 'ref',
+    message: 'init:42',
+  })
+  expect(screen.getByTestId('ref').textContent).toBe('42')
+  expect(getPanelTraceOrigins()).toContain('ref:42')
+
+  await user.click(screen.getByText('inc'))
+  act(() => jest.runOnlyPendingTimers())
+
+  expect(getLogEntries()).toContainEqual({
+    componentLabel: 'Test-1',
+    origin: 'ref',
+    message: 'update:43',
+  })
+  expect(getPanelTraceOrigins()).toContain('ref:43')
+})
+
+test('allows missing ref value', () => {
+  const Test = () => {
+    const { TracePanel } = useTracer()
+    useRef()
+    return <TracePanel />
+  }
+
+  render(<Test />)
+  expect(getPanelTraceOrigins()).toContain('ref:undefined')
+})
+
+test('supports custom label', () => {
+  const Test = () => {
+    const { TracePanel } = useTracer()
+    useRef(42, { label: 'answer' })
+    return <TracePanel />
+  }
+
+  render(<Test />)
+  expect(getPanelTraceOrigins()).toContain('ref«answer»:42')
+})
+
+test('supports custom show', () => {
+  const Test = () => {
+    const { TracePanel } = useTracer()
+    useRef({ p: 42 }, { show: (v) => `[${v.p}]` })
+    return <TracePanel />
+  }
+
+  render(<Test />)
+  expect(getPanelTraceOrigins()).toContain('ref:[42]')
+})
+
+test('can handle DOM element', () => {
+  const Test = () => {
+    useTracer()
+    const ref = useRef(null)
+    return (
+      <div ref={ref}>
+        <TraceLog />
+      </div>
+    )
+  }
+
+  render(<Test />)
+  act(() => jest.runOnlyPendingTimers())
+
+  expect(getLogEntries()).toContainEqual({
+    componentLabel: 'Test-1',
+    origin: 'ref',
+    message: 'init:null',
+  })
+  expect(getLogEntries()).toContainEqual({
+    componentLabel: 'Test-1',
+    origin: 'ref',
+    message: 'update:[object HTMLDivElement]',
+  })
+})
+
+test('can handle cyclic object', () => {
+  const cyclicObject: { cycle?: unknown } = {}
+  cyclicObject.cycle = cyclicObject
+
+  const Test = () => {
+    useTracer()
+
+    const ref = useRef<{ cycle?: unknown }>()
+    ref.current = cyclicObject
+    return (
+      <div>
+        <TraceLog />
+      </div>
+    )
+  }
+
+  render(<Test />)
+  act(() => jest.runOnlyPendingTimers())
+
+  expect(getLogEntries()).toContainEqual({
+    componentLabel: 'Test-1',
+    origin: 'ref',
+    message: 'init:undefined',
+  })
+  expect(getLogEntries()).toContainEqual({
+    componentLabel: 'Test-1',
+    origin: 'ref',
+    message: 'update:[object Object]',
+  })
+})

packages/react-hook-tracer/src/hooks/useRef.ts

@@ -45,7 +45,7 @@ const useRefTraced = <T>(
   const componentLabel = componentRegistry.getCurrentComponentLabel()
   const componentInfo = getCurrentComponentInfo()
 
-  const showDefinedValue = traceOptions?.show ?? ((value: T) => JSON.stringify(value))
+  const showDefinedValue = traceOptions?.show ?? util.showValue
 
   const showValue = util.showWithUndefined(showDefinedValue)
 

packages/react-hook-tracer/src/hooks/useState.test.tsx

@@ -76,7 +76,7 @@ test('supports custom label', () => {
   expect(getPanelTraceOrigins()).toContain('state«answer»:42')
 })
 
-test('supports custom showState', () => {
+test('supports custom show', () => {
   const Test = () => {
     const { TracePanel } = useTracer()
     useState({ p: 42 }, { show: (s) => `[${s.p}]` })

packages/react-hook-tracer/src/hooks/useState.ts

@@ -39,7 +39,7 @@ const useStateTraced = <S>(
   const traceOrigin = componentRegistry.registerHook('state', traceOptions?.label)
   const componentLabel = componentRegistry.getCurrentComponentLabel()
 
-  const showDefinedState = traceOptions?.show ?? ((state: S) => JSON.stringify(state))
+  const showDefinedState = traceOptions?.show ?? util.showValue
 
   const showState = util.showWithUndefined(showDefinedState)
 

packages/react-hook-tracer/src/hooks/useTracer.tsx

@@ -19,7 +19,7 @@ const mkShowPropValue: (showProps?: ShowProps) => (propKey: string, propValue: u
         return showProp(propValue)
       }
     }
-    return util.showPropValue(propKey, propValue)
+    return util.showValue(propValue)
   }
 
 export const useTracer = (

packages/react-hook-tracer/src/test/setup.ts

@@ -1,6 +1,7 @@
 import '@testing-library/jest-dom/extend-expect'
 import { cleanup } from '@testing-library/react'
 
+import { clearLog } from '../Tracer'
 import { resetComponentRegistry } from '../componentRegistry'
 
 jest.useFakeTimers()
@@ -9,4 +10,5 @@ afterEach(() => {
   cleanup()
   jest.runAllTimers()
   resetComponentRegistry()
+  clearLog()
 })

packages/react-hook-tracer/src/util.ts

@@ -25,21 +25,36 @@ export const showWithUndefined =
   (x: T | undefined) =>
     x === undefined ? 'undefined' : show(x)
 
-export const showPropValue = (_propKey: string, value: unknown): string => {
+export const showValue = (value: unknown): string => {
   switch (typeof value) {
     case 'bigint':
     case 'boolean':
     case 'number':
     case 'string':
-    case 'object':
     case 'symbol': {
       return JSON.stringify(value)
     }
     case 'undefined': {
       return 'undefined'
     }
-    case 'function':
+    case 'function': {
       return '<function>'
+    }
+    case 'object': {
+      if (value === null) {
+        return 'null'
+      }
+      // For DOM elements, toString is just fine.
+      if (value instanceof HTMLElement) {
+        return value.toString()
+      }
+      // For other objects, try to stringify first.
+      try {
+        return JSON.stringify(value)
+      } catch (error) {
+        return value.toString()
+      }
+    }
   }
 }