Fix: V7 - JavaScript V9 - set undefined for updateProd when not set

packages/core/src/js/options.ts

@@ -294,7 +294,7 @@ export interface ReactNativeClientOptions
 
 export interface ReactNativeWrapperOptions {
   /** Props for the root React profiler */
-  profilerProps?: ProfilerProps;
+  profilerProps?: Pick<Partial<ProfilerProps>, Exclude<keyof ProfilerProps, 'updateProps' | 'children' | 'name'>>;
 
   /** Props for the root touch event boundary */
   touchEventBoundaryProps?: TouchEventBoundaryProps;

packages/core/src/js/sdk.tsx

@@ -153,18 +153,18 @@ export function init(passedOptions: ReactNativeOptions): void {
  */
 export function wrap<P extends Record<string, unknown>>(
   RootComponent: React.ComponentType<P>,
-  options?: ReactNativeWrapperOptions
+  options?:  ReactNativeWrapperOptions
 ): React.ComponentType<P> {
   const profilerProps = {
-    ...(options?.profilerProps ?? {}),
+    ...(options?.profilerProps ?? { removeUpdateProps: true }),
     name: RootComponent.displayName ?? 'Root',
-    updateProps: {}
+    updateProps: options?.profilerProps
   };
 
   const RootApp: React.FC<P> = (appProps) => {
     return (
       <TouchEventBoundary {...(options?.touchEventBoundaryProps ?? {})}>
-        <ReactNativeProfiler {...profilerProps}>
+        <ReactNativeProfiler {...profilerProps }>
           <FeedbackWidgetProvider>
             <RootComponent {...appProps} />
           </FeedbackWidgetProvider>

packages/core/src/js/tracing/reactnativeprofiler.tsx

@@ -12,14 +12,29 @@ const ReactNativeProfilerGlobalState = {
   },
 };
 
+type ProfilerConstructorProps = ConstructorParameters<typeof Profiler>[0];
+type ReactNativeProfilerConstructorProps = ProfilerConstructorProps &
+{
+  /**
+   * Since we cannot modify the Profiler class directly, this flag is used to preserve its original behavior.
+   * When true, it indicates that `updateProps` were not passed in the options, signaling the code to remove `updateProps` from the parameters.
+   * Otherwise, it means `updateProps` were provided for use with the React Native profiler.
+   */
+  removeUpdateProps?: boolean
+};
+
 /**
  * Custom profiler for the React Native app root.
  */
 export class ReactNativeProfiler extends Profiler {
   public readonly name: string = 'ReactNativeProfiler';
 
-  public constructor(props: ConstructorParameters<typeof Profiler>[0]) {
+  public constructor(props: ReactNativeProfilerConstructorProps) {
     _setRootComponentCreationTimestampMs(timestampInSeconds() * 1000);
+    if (props.removeUpdateProps === true) {
+      delete props.updateProps;
+    }
+    delete props.removeUpdateProps;
     super(props);
   }
 

packages/core/test/tracing/reactnativeprofiler.test.ts

@@ -0,0 +1,79 @@
+import { Profiler } from '@sentry/react';
+import type { ProfilerProps } from '@sentry/react/build/types/profiler';
+import type { ReactNativeWrapperOptions } from 'src/js/options';
+
+import { ReactNativeProfiler } from '../../src/js/tracing';
+
+jest.mock('@sentry/react', () => ({
+  Profiler: jest.fn(),
+}));
+
+describe('ReactNativeProfiler', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('removes updateProps if removeUpdateProps is true', () => {
+    const props: ReactNativeWrapperOptions & { name: string; updateProps: undefined; removeUpdateProps: boolean } = {
+      name: 'Root',
+      updateProps: undefined,
+      removeUpdateProps: true,
+    };
+
+    new ReactNativeProfiler(props);
+
+    expect(Profiler).toHaveBeenCalledWith(
+      expect.not.objectContaining({
+        updateProps: expect.anything(),
+      }),
+    );
+
+    expect(Profiler).not.toHaveBeenCalledWith(
+      expect.objectContaining({
+        removeUpdateProps: expect.anything(),
+      }),
+    );
+  });
+
+  it('does not remove updateProps if removeUpdateProps is undefined', () => {
+    const props: ProfilerProps & { name: string } = {
+      name: 'Root',
+      updateProps: { prop: true },
+    };
+
+    new ReactNativeProfiler(props);
+
+    expect(Profiler).toHaveBeenCalledWith(
+      expect.objectContaining({
+        updateProps: { prop: true },
+      }),
+    );
+
+    expect(Profiler).not.toHaveBeenCalledWith(
+      expect.objectContaining({
+        removeUpdateProps: expect.anything(),
+      }),
+    );
+  });
+
+  it('does not remove updateProps if removeUpdateProps is false', () => {
+    const props: ProfilerProps & { name: string; removeUpdateProps: boolean } = {
+      name: 'Root',
+      updateProps: { prop: true },
+      removeUpdateProps: false,
+    };
+
+    new ReactNativeProfiler(props);
+
+    expect(Profiler).toHaveBeenCalledWith(
+      expect.objectContaining({
+        updateProps: { prop: true },
+      }),
+    );
+    expect(Profiler).not.toHaveBeenCalledWith(
+      expect.objectContaining({
+        removeUpdateProps: expect.anything(),
+      }),
+    );
+  });
+});

packages/core/test/wrap.test.tsx

@@ -1,12 +1,109 @@
+import { render } from '@testing-library/react-native';
 import * as React from 'react';
 
 import { wrap } from '../src/js/sdk';
 
+jest.mock('../src/js/touchevents', () => ({
+  TouchEventBoundary: ({ children }: { children: React.ReactNode }) => (
+    // eslint-disable-next-line react/no-unknown-property
+    <div testID={"touch-boundaryID"}>{children}</div>
+  ),
+}));
+
+jest.mock('../src/js/tracing', () => ({
+  ReactNativeProfiler: jest.fn(({ children }: { children: React.ReactNode }) => (
+    // eslint-disable-next-line react/no-unknown-property
+    <div testID="profilerID">{children}</div>
+  )),
+}));
+
+jest.mock('../src/js/feedback/FeedbackWidgetManager', () => ({
+  FeedbackWidgetProvider: ({ children }: { children: React.ReactNode }) => (
+    // eslint-disable-next-line react/no-unknown-property
+    <div testID="feedback-widgetID">{children}</div>
+  ),
+}));
+
+import type { ReactNativeWrapperOptions } from 'src/js/options';
+
+import { ReactNativeProfiler } from '../src/js/tracing';
 describe('Sentry.wrap', () => {
+
+  const DummyComponent: React.FC<{ value?: string }> = ({ value }) => <div>{value}</div>;
+
   it('should not enforce any keys on the wrapped component', () => {
     const Mock: React.FC<{ test: 23 }> = () => <></>;
     const ActualWrapped = wrap(Mock);
 
     expect(typeof ActualWrapped.defaultProps).toBe(typeof Mock.defaultProps);
   });
+
+  it('wraps components with Sentry wrappers', () => {
+    const Wrapped = wrap(DummyComponent);
+    const renderResult = render(<Wrapped value="wrapped" />);
+
+    expect(renderResult.toJSON()).toMatchInlineSnapshot(`
+  <div
+    testID="touch-boundaryID"
+  >
+    <div
+      testID="profilerID"
+    >
+      <div
+        testID="feedback-widgetID"
+      >
+        <div>
+          wrapped
+        </div>
+      </div>
+    </div>
+  </div>
+`);
+  });
+
+  describe('ReactNativeProfiler', () => {
+    it('uses given options when set', () => {
+      const options: ReactNativeWrapperOptions = {
+        profilerProps: { disabled: false, includeRender: true, includeUpdates: true },
+      };
+      const Wrapped = wrap(DummyComponent, options);
+      render(<Wrapped value="wrapped" />);
+
+      expect(ReactNativeProfiler).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: 'Root',
+          disabled: false,
+          includeRender: true,
+          includeUpdates: true
+        }),
+        expect.anything(),
+      );
+
+      expect(ReactNativeProfiler).not.toHaveBeenCalledWith(
+        expect.objectContaining({
+          updateProps: expect.anything(),
+        })
+      );
+
+      expect(ReactNativeProfiler).not.toHaveBeenCalledWith(
+        expect.objectContaining({
+          removeUpdateProps: expect.anything(),
+        })
+      );
+    });
+
+    it('updateProps and removeUpdateProps defined when updateProps is not provided', () => {
+      const Wrapped = wrap(DummyComponent);
+      render(<Wrapped value="wrapped" />);
+
+      expect(ReactNativeProfiler).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: 'Root',
+          updateProps: undefined,
+          removeUpdateProps: true,
+        }),
+        expect.anything(),
+      );
+    });
+  });
 });