@posthog/react 1.10.3 → 1.10.4

package/src/components/__tests__/PostHogErrorBoundary.test.tsx

@@ -24,7 +24,8 @@ describe('PostHogErrorBoundary component', () => {
 
     it('should call captureException with error message', () => {
         const { container } = renderWithError({ message: 'Test error', fallback: <div></div> })
-        expect(posthog.captureException).toHaveBeenCalledWith(new Error('Test error'), undefined)
+        expect(posthog.captureException).toHaveBeenCalledWith(expect.any(Error), undefined)
+        expectCapturedReactError()
         expect(container.innerHTML).toBe('<div></div>')
         expect(console.error).toHaveBeenCalledTimes(1)
         expect((console.error as any).mock.calls[0][1].message).toEqual('Test error')
@@ -32,14 +33,16 @@ describe('PostHogErrorBoundary component', () => {
 
     it('should warn user when fallback is null', () => {
         const { container } = renderWithError({ fallback: null })
-        expect(posthog.captureException).toHaveBeenCalledWith(new Error('Error'), undefined)
+        expect(posthog.captureException).toHaveBeenCalledWith(expect.any(Error), undefined)
+        expectCapturedReactError()
         expect(container.innerHTML).toBe('')
         expect(console.warn).toHaveBeenCalledWith(__POSTHOG_ERROR_MESSAGES.INVALID_FALLBACK)
     })
 
     it('should warn user when fallback is a string', () => {
         const { container } = renderWithError({ fallback: 'hello' })
-        expect(posthog.captureException).toHaveBeenCalledWith(new Error('Error'), undefined)
+        expect(posthog.captureException).toHaveBeenCalledWith(expect.any(Error), undefined)
+        expectCapturedReactError()
         expect(container.innerHTML).toBe('')
         expect(console.warn).toHaveBeenCalledWith(__POSTHOG_ERROR_MESSAGES.INVALID_FALLBACK)
     })
@@ -47,19 +50,40 @@ describe('PostHogErrorBoundary component', () => {
     it('should add additional properties before sending event (as object)', () => {
         const props = { team_id: '1234' }
         renderWithError({ message: 'Kaboom', additionalProperties: props })
-        expect(posthog.captureException).toHaveBeenCalledWith(new Error('Kaboom'), props)
+        expect(posthog.captureException).toHaveBeenCalledWith(expect.any(Error), props)
+        expectCapturedReactError()
     })
 
     it('should add additional properties before sending event (as function)', () => {
         const props = { team_id: '1234' }
         renderWithError({
             message: 'Kaboom',
-            additionalProperties: (err: Error) => {
+            additionalProperties: (err: Error, errorInfo: React.ErrorInfo) => {
                 expect(err.message).toBe('Kaboom')
+                expect(errorInfo.componentStack).toContain('PostHogErrorBoundary.test.tsx')
                 return props
             },
         })
-        expect(posthog.captureException).toHaveBeenCalledWith(new Error('Kaboom'), props)
+        expect(posthog.captureException).toHaveBeenCalledWith(expect.any(Error), props)
+        expectCapturedReactError()
+    })
+
+    it('should capture the component stack for primitive exceptions', () => {
+        render(
+            <PostHogErrorBoundary fallback={<div></div>}>
+                <ComponentWithUndefinedError />
+            </PostHogErrorBoundary>
+        )
+
+        expect(posthog.captureException).toHaveBeenCalledWith(expect.any(Error), undefined)
+        const capturedError = (posthog.captureException as jest.Mock).mock.calls[0][0]
+        expect(capturedError).toEqual(
+            expect.objectContaining({
+                message: 'Primitive value captured as exception: undefined',
+                name: 'React ErrorBoundary Error',
+                stack: expect.stringContaining('ComponentWithUndefinedError'),
+            })
+        )
     })
 
     it('should render children without errors', () => {
@@ -88,12 +112,39 @@ describe('captureException processing', () => {
         const captureCalls = (posthog.capture as jest.Mock).mock.calls
         expect(captureCalls.length).toBe(1)
         const exceptionList = captureCalls[0][1].$exception_list
-        expect(exceptionList.length).toBe(1)
+        expect(exceptionList.length).toBe(2)
         const stacktrace = exceptionList[0].stacktrace
         expect(stacktrace.frames.length).toBeGreaterThan(20)
+        expect(exceptionList[1].type).toBe('React ErrorBoundary Error')
+        expectComponentStackFrames(exceptionList[1].stacktrace.frames, 'PostHogErrorBoundary')
+    })
+
+    it('should parse the component stack for primitive exceptions', () => {
+        render(
+            <PostHogErrorBoundary fallback={<div></div>}>
+                <ComponentWithUndefinedError />
+            </PostHogErrorBoundary>
+        )
+
+        const captureCalls = (posthog.capture as jest.Mock).mock.calls
+        const exceptionList = captureCalls[0][1].$exception_list
+        expect(exceptionList).toHaveLength(1)
+        expect(exceptionList[0].type).toBe('React ErrorBoundary Error')
+        expectComponentStackFrames(exceptionList[0].stacktrace.frames, 'ComponentWithUndefinedError')
     })
 })
 
+function expectComponentStackFrames(frames: Array<{ function?: string }>, expectedFunction: string) {
+    expect(frames.length).toBeGreaterThan(0)
+    expect(frames.some((frame) => frame.function === expectedFunction)).toBe(true)
+}
+
+function expectCapturedReactError() {
+    const capturedError = (posthog.captureException as jest.Mock).mock.calls[0][0]
+    expect(capturedError.cause.name).toBe('React ErrorBoundary Error')
+    expect(capturedError.cause.stack).toContain('PostHogErrorBoundary.test.tsx')
+}
+
 function mockFunction(object: any, funcName: string) {
     const originalFunc = object[funcName]
 
@@ -110,6 +161,10 @@ function ComponentWithError({ message }: { message: string }): React.ReactElemen
     throw new Error(message)
 }
 
+function ComponentWithUndefinedError(): React.ReactElement {
+    throw undefined
+}
+
 function RenderWithError({ message = 'Error', fallback, additionalProperties }: any) {
     return (
         <PostHogErrorBoundary fallback={fallback} additionalProperties={additionalProperties}>

package/src/helpers/__tests__/error-helpers.test.ts

@@ -0,0 +1,43 @@
+import type { ErrorInfo } from 'react'
+import { setupReactErrorHandler } from '../error-helpers'
+
+describe('setupReactErrorHandler', () => {
+    it('captures the React component stack', () => {
+        const captureException = jest.fn()
+        const errorInfo: ErrorInfo = { componentStack: '\n    in CrashingComponent' }
+        const handler = setupReactErrorHandler({ captureException } as any)
+
+        handler(undefined, errorInfo)
+
+        expect(captureException).toHaveBeenCalledWith(
+            expect.objectContaining({
+                message: 'Primitive value captured as exception: undefined',
+                name: 'React ErrorBoundary Error',
+                stack: errorInfo.componentStack,
+            })
+        )
+    })
+
+    it('appends the React component stack after existing error causes', () => {
+        const captureException = jest.fn()
+        const errorInfo: ErrorInfo = { componentStack: '\n    in CrashingComponent' }
+        const handler = setupReactErrorHandler({ captureException } as any)
+        const error = new Error('outer error') as Error & { cause?: unknown }
+        const cause = new Error('inner error') as Error & { cause?: unknown }
+        const nestedCause = new Error('nested error') as Error & { cause?: unknown }
+        error.cause = cause
+        cause.cause = nestedCause
+
+        handler(error, errorInfo)
+
+        expect(captureException).toHaveBeenCalledWith(error)
+        expect(error.cause).toBe(cause)
+        expect(cause.cause).toBe(nestedCause)
+        expect(nestedCause.cause).toEqual(
+            expect.objectContaining({
+                name: 'React ErrorBoundary Error',
+                stack: errorInfo.componentStack,
+            })
+        )
+    })
+})

package/src/helpers/error-helpers.ts

@@ -1,13 +1,14 @@
 import type { ErrorInfo } from 'react'
 import { PostHog } from '../context'
 import type { CaptureResult } from 'posthog-js'
+import { addReactComponentStack } from './react-component-stack'
 
 export const setupReactErrorHandler = (
     client: PostHog,
     callback?: (event: CaptureResult | undefined, error: any, errorInfo: ErrorInfo) => void
 ) => {
     return (error: any, errorInfo: ErrorInfo): void => {
-        const event = client.captureException(error)
+        const event = client.captureException(addReactComponentStack(error, errorInfo.componentStack))
         if (callback) {
             callback(event, error, errorInfo)
         }

package/src/helpers/react-component-stack.ts

@@ -0,0 +1,53 @@
+import { isUndefined } from '../utils/type-utils'
+
+type ErrorWithCause = Error & { cause?: unknown }
+
+const isError = (value: unknown): value is ErrorWithCause => {
+    const tag = Object.prototype.toString.call(value)
+    return (
+        value instanceof Error ||
+        tag === '[object Error]' ||
+        tag === '[object Exception]' ||
+        tag === '[object DOMException]' ||
+        tag === '[object DOMError]'
+    )
+}
+
+const setCause = (error: ErrorWithCause, cause: ErrorWithCause): void => {
+    const seenErrors = new WeakSet<ErrorWithCause>()
+    let currentError = error
+
+    while (!seenErrors.has(currentError)) {
+        seenErrors.add(currentError)
+
+        if (!isError(currentError.cause)) {
+            if (!isUndefined(currentError.cause)) {
+                cause.cause = currentError.cause
+            }
+            currentError.cause = cause
+            return
+        }
+
+        currentError = currentError.cause
+    }
+}
+
+// Model React's component stack as a linked error so existing exception parsing and rendering can handle it.
+export const addReactComponentStack = (error: unknown, componentStack?: string | null): unknown => {
+    if (!componentStack) {
+        return error
+    }
+
+    const componentStackError = new Error(
+        isError(error) ? error.message : `Primitive value captured as exception: ${String(error)}`
+    )
+    componentStackError.name = `React ErrorBoundary ${isError(error) ? error.name : 'Error'}`
+    componentStackError.stack = componentStack
+
+    if (isError(error)) {
+        setCause(error, componentStackError)
+        return error
+    }
+
+    return componentStackError
+}

package/src/hooks/__tests__/featureFlags.test.tsx

@@ -66,7 +66,6 @@ describe('feature flag hooks', () => {
             } as unknown as PostHog['featureFlags'],
         } as unknown as PostHog
 
-        // eslint-disable-next-line react/display-name
         renderProvider = ({ children }) => <PostHogProvider client={posthog}>{children}</PostHogProvider>
     })
 
@@ -125,7 +124,6 @@ describe('feature flag hooks', () => {
             } as unknown as PostHog['featureFlags'],
         } as unknown as PostHog
 
-        // eslint-disable-next-line react/display-name
         const wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
             <PostHogProvider client={client}>{children}</PostHogProvider>
         )
@@ -197,7 +195,6 @@ describe('feature flag hooks', () => {
                 } as unknown as PostHog['featureFlags'],
             } as unknown as PostHog
 
-            // eslint-disable-next-line react/display-name
             const wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
                 <PostHogProvider client={client}>{children}</PostHogProvider>
             )
@@ -227,7 +224,6 @@ describe('feature flag hooks', () => {
                     } as unknown as PostHog['featureFlags'],
                 } as unknown as PostHog
 
-                // eslint-disable-next-line react/display-name
                 const wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
                     <PostHogProvider client={client}>{children}</PostHogProvider>
                 )
@@ -306,7 +302,6 @@ describe('feature flag hooks', () => {
                     } as unknown as PostHog['featureFlags'],
                 } as unknown as PostHog
 
-                // eslint-disable-next-line react/display-name
                 const wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
                     <PostHogProvider client={client}>{children}</PostHogProvider>
                 )
@@ -349,7 +344,6 @@ describe('feature flag hooks', () => {
                     } as unknown as PostHog['featureFlags'],
                 } as unknown as PostHog
 
-                // eslint-disable-next-line react/display-name
                 const wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
                     <PostHogProvider client={client}>{children}</PostHogProvider>
                 )

package/src/utils/type-utils.ts

@@ -11,6 +11,5 @@ export const isUndefined = function (x: unknown): x is undefined {
 }
 
 export const isNull = function (x: unknown): x is null {
-    // eslint-disable-next-line posthog-js/no-direct-null-check
     return x === null
 }