Return dummy trace & TracePanel during SSR

Author: Oblosys

packages/react-hook-tracer/src/components/TracePanel.tsx

@@ -1,4 +1,4 @@
-import { MutableRefObject, useCallback, useEffect, useState } from 'react'
+import { MutableRefObject, ReactNode, useCallback, useEffect, useState } from 'react'
 
 import { tracer } from '../Tracer'
 import { LogEntry, TraceOrigin, TraceOrigins } from '../types'
@@ -14,6 +14,13 @@ interface TracePanelProps {
   traceOrigins: TraceOrigins
   refreshTracePanelRef: MutableRefObject<(() => void) | null>
 }
+
+const TracePanelWrapper = ({ children }: { children?: ReactNode | undefined }) => (
+  <div className="trace-panel" data-testid="trace-panel">
+    {children}
+  </div>
+)
+
 export const TracePanel = ({
   componentLabel,
   props,
@@ -52,7 +59,7 @@ export const TracePanel = ({
   const traceOriginList: TraceOrigin[] = [mount, render, ...hooks, trace]
 
   return (
-    <div className="trace-panel" data-testid="trace-panel">
+    <TracePanelWrapper>
       <div className="component-label">
         <div>{componentLabel}</div>
       </div>
@@ -77,10 +84,12 @@ export const TracePanel = ({
           />
         ))}
       </div>
-    </div>
+    </TracePanelWrapper>
   )
 }
 
+export const TracePanelServerSide = () => <TracePanelWrapper />
+
 interface PropProps {
   propKey: string
   propValue: unknown

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

@@ -2,7 +2,7 @@ import React, { useCallback, useRef } from 'react'
 
 import { isTraceLogRegistered, logPendingToConsole, setTracerConfig, tracer } from '../Tracer'
 import * as componentRegistry from '../componentRegistry'
-import { TracePanel } from '../components/TracePanel'
+import { TracePanel, TracePanelServerSide } from '../components/TracePanel'
 import * as reactInternals from '../reactInternals'
 import { ShowProps } from '../types'
 import * as util from '../util'
@@ -27,6 +27,20 @@ export const useTracer = (
 ): {
   trace: (message: string) => void
   TracePanel: () => JSX.Element
+} => {
+  if (util.isServerRendered) {
+    return { trace: (_message: string) => {}, TracePanel: TracePanelServerSide }
+  } else {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useTracerClientSide(options)
+  }
+}
+
+const useTracerClientSide = (
+  options?: UseTracerOptions,
+): {
+  trace: (message: string) => void
+  TracePanel: () => JSX.Element
 } => {
   const showPropValue = mkShowPropValue(options?.showProps)
   const componentInfo = componentRegistry.registerCurrentComponent()