Upgraded to React 18 and our tracking code is causing our app to break

[anna-rusk]

React - "18.2.0"
React Native - "0.71.4"
React Tracking - "9.3.1"

Seeing this error - I confirmed that it was react-tracking code rather than hooks in general by removing all of our tracking code to find that our app works as expected there.

[tizmagik]

Closed via #201

[anna-rusk]

Full stack trace

[anna-rusk]

This issue has me stumped because we changed nothing else about our environment except upgrade react, react-dom, and react-native.

I have pin pointed it to react-tracking library by removing our use of react-tracking hooks/initialization and our app can start. Do we need to resolve react to our own version in a bundler? Is it because your package has a direct dependency on an older version of react?

[tizmagik]

Hi @anna-rusk thanks for reporting. Would you mind creating a new issue and sharing your App component, or as much as you can about how you’ve setup react-tracking? Thanks!

[tizmagik]

Oh sorry I realize now this was your original issue. Reopening.

If you could share any more context or a minimal reproduction, I’d be happy to take a look!

[anna-rusk]

React - "18.2.0"
React Native - "0.71.4"
React Tracking - "9.3.1"

export function useEventTrackingImpl(api: AxiosInstance, platform: IEventPlatform): IUseEventTracking {
  const { trackEvent: _trackEvent, Track } = useTracking<IEvent>({}, { dispatch: dispatchFunc });

  const trackScreenChange: (o: { page: string, pageGroup?: PageGroup }) => void = ({ page, pageGroup }) => {


    _trackEvent({
      page: page,
      section: null,
      action: EventAction.VIEW,
      target: null,
      pageGroup: pageGroup,
      timestamp: Date.now(),
    });
  };

  const trackEvent = (data: IEventPayload) => {
    /* throw an error if CLICK action doesn't have target */
    if (data.action === EventAction.CLICK && !data.target) {
      throw new Error(
        "trackEvent: action CLICK requires 'target' to be specified in the payload"
      );
    }

    if (DEBUG_EVENTS) console.log("trackEvent", data);

    _trackEvent({
      page: data.page,
      section: data.section || null,
      action: data.action,
      target: data.target || null,
      pageGroup: data.pageGroup,
      timestamp: Date.now(),
    });
  };

  const dispatchTrackedEvents = async () => {
    const events = EventStore.get();
    EventStore.clear();
    if (events.length > 0) {
      const query = serializeEventsToQuery(events, Date.now(), platform);
      // send event batch to bertha
      try {
        await api.get(`/bertha${query}`);
      } catch (err) {
        console.error(err);
      }
    }
  };
  return { Track, trackEvent, trackScreenChange, dispatchTrackedEvents };
}

And we use that hook in our App initialize the components/hooks that are in the return object

[anna-rusk]

And the reproduction occurs when I launch our app from Xcode - there's a runtime error with the stack trace above ^^

[anna-rusk]

It is important to note that the way we use react tracking has been working just fine until we upgrade react/react native

[tizmagik]

Is it possible you have more than one copy of React bundled?