search

PostHog / posthog

🦔 PostHog provides open-source product analytics, session recording, feature flagging and A/B testing that you can self-host.
https://posthog.com
Other
21.13k stars 1.25k forks source link

undefined is not a function in PostHogProvider in React Native SDK #21239

Closed Bi0max closed 5 months ago

Bi0max commented 6 months ago

Bug description

Hello, I have the following problem on some Android devices (does not happen on iOS): 

TypeError
undefined is not a function
anonymous(posthog-react-native/lib/posthog-react-native/src/PostHogProvider)

I cannot find any pattern why and when it happends. It happened a few times on my own test device and Sentry reports errors on users' devices from time to time.

This is where it happened (from one of the Sentry errors):

node_modules/posthog-react-native/lib/posthog-react-native/src/PostHogProvider.js in anonymous at line 1:3865

{snip} ct.useEffect)(function(){if(!posthog){return;}posthog.debug(debug);},[debug,posthog]);var onTouch=(0,_react.useCallback)(function(type,e){if {snip}

This is the full stack:

TypeError: undefined is not a function
  at anonymous(node_modules/posthog-react-native/lib/posthog-react-native/src/PostHogProvider.js:1:3865)
  at commitHookEffectListMount(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:5875:35)
  at flushPassiveEffects(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7562:48)
  at performSyncWorkOnRoot(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:6972:22)
  at flushSyncCallbacks(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:2145:31)
  at scheduleUpdateOnFiber(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:6650:58)
  at dispatchSetState(node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:3985:28)
  at resolve(node_modules/@react-navigation/native/src/useThenable.tsx:26:19)
  at next(native)
  at asyncGeneratorStep(node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
  at _next(node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:27)
  at tryCallOne(node_modules/promise/setimmediate/core.js:37:14)
  at setImmediate$argument_0(node_modules/promise/setimmediate/core.js:123:25)
  at apply(native)
  at queueReactNativeMicrotask(node_modules/react-native/Libraries/Core/Timers/JSTimers.js:247:23)
  at _callTimer(node_modules/react-native/Libraries/Core/Timers/JSTimers.js:111:15)
  at _callReactNativeMicrotasksPass(node_modules/react-native/Libraries/Core/Timers/JSTimers.js:161:15)
  at callReactNativeMicrotasks(node_modules/react-native/Libraries/Core/Timers/JSTimers.js:415:42)
  at __callReactNativeMicrotasks(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:393:44)
  at __guard$argument_0(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:132:39)
  at __guard(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:368:11)
  at flushedQueue(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:131:17)
  at invokeCallbackAndReturnFlushedQueue(node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:127:29)

Components stack:

 in PostHogProvider
    in PushNotificationsProvider
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner
    in NavContainer
    in RCTView
    in Unknown
    in RCTView
    in Unknown
    in NotificationsProvider
    in ScrollPermissionProvider
    in ThemeProvider
    in AppInner
    in VideoScreenContextProvider
    in SingleKeyStorageProvider
    in SingleKeyStorageProvider
    in SingleKeyStorageProvider
    in SingleKeyStorageProvider
    in SingleKeyStorageProvider
    in SingleKeyStorageProvider
    in SingleKeyStorageProvider
    in SingleKeyStorageProvider
    in SingleKeyStorageProvider
    in SingleKeyStorageProvider
    in SingleKeyStorageProvider
    in SingleKeyStorageProvider
    in SingleKeyStorageProvider
    in StorageProvider
    in QueryClientProvider
    in MyQueryClientProvider
    in App
    in RCTView
    in Unknown
    in RCTView
    in Unknown
    in AppContainer

How to reproduce

Posthog async client initialization:

export const posthogAsync: Promise<PostHog> = PostHog.initAsync(Config.POSTHOG_API_KEY, {
  host: "https://eu.posthog.com",
  persistence: "file",
  captureNativeAppLifecycleEvents: true,
});

PostHog provider:

<PostHogProvider
          client={posthogAsync}
          autocapture={{
            captureLifecycleEvents: false,
            captureScreens: true,
            captureTouches: true,
          }}
        >
  ...
</PostHogProvider>

Environment

package.json

"dependencies": {
    "@config-plugins/react-native-branch": "^7.0.0",
    "@dev-plugins/async-storage": "^0.0.1",
    "@dev-plugins/react-navigation": "^0.0.5",
    "@dev-plugins/react-query": "^0.0.5",
    "@expo-google-fonts/roboto": "^0.2.2",
    "@expo/config-plugins": "~7.8.0",
    "@expo/webpack-config": "~19.0.1",
    "@formatjs/intl-datetimeformat": "^6.10.0",
    "@formatjs/intl-displaynames": "^6.6.6",
    "@formatjs/intl-getcanonicallocales": "^2.1.0",
    "@formatjs/intl-locale": "^3.1.1",
    "@formatjs/intl-numberformat": "^8.9.2",
    "@formatjs/intl-pluralrules": "^5.1.10",
    "@formatjs/intl-relativetimeformat": "^11.1.10",
    "@material/material-color-utilities": "^0.2.4",
    "@react-native-async-storage/async-storage": "1.21.0",
    "@react-native-community/blur": "^4.3.2",
    "@react-native-community/netinfo": "11.1.0",
    "@react-native-community/slider": "4.4.2",
    "@react-native-firebase/analytics": "^18.9.0",
    "@react-native-firebase/app": "^18.9.0",
    "@react-native-firebase/crashlytics": "^18.9.0",
    "@react-native-firebase/perf": "^18.9.0",
    "@react-native-google-signin/google-signin": "^10.0.1",
    "@react-native-masked-view/masked-view": "0.3.0",
    "@react-navigation/material-bottom-tabs": "^6.2.15",
    "@react-navigation/material-top-tabs": "^6.6.2",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/native-stack": "^6.9.12",
    "@sentry/react-native": "^5.20.0",
    "@shopify/restyle": "^2.4.2",
    "@tanstack/eslint-plugin-query": "^4.14.2",
    "@tanstack/react-query": "^4.14.1",
    "axios": "^1.1.3",
    "check-password-strength": "^2.0.7",
    "chroma-js": "^2.4.2",
    "color": "^4.2.3",
    "expo": "^50.0.14",
    "expo-apple-authentication": "~6.3.0",
    "expo-application": "~5.8.3",
    "expo-auth-session": "~5.4.0",
    "expo-av": "~13.10.5",
    "expo-build-properties": "~0.11.1",
    "expo-clipboard": "~5.0.1",
    "expo-constants": "~15.4.5",
    "expo-dev-client": "~3.3.11",
    "expo-device": "~5.9.3",
    "expo-file-system": "~16.0.6",
    "expo-font": "~11.10.3",
    "expo-image": "~1.10.6",
    "expo-linear-gradient": "~12.7.2",
    "expo-linking": "~6.2.2",
    "expo-localization": "~14.8.3",
    "expo-mail-composer": "~12.7.1",
    "expo-navigation-bar": "~2.8.1",
    "expo-notifications": "~0.27.6",
    "expo-random": "~13.6.0",
    "expo-screen-orientation": "~6.4.1",
    "expo-secure-store": "~12.8.1",
    "expo-splash-screen": "~0.26.4",
    "expo-status-bar": "~1.11.1",
    "expo-updates": "~0.24.12",
    "expo-web-browser": "~12.8.2",
    "i18next": "^21.10.0",
    "i18next-chained-backend": "^4.2.0",
    "i18next-resources-to-backend": "^1.1.3",
    "intl-pluralrules": "^1.3.1",
    "lodash": "^4.17.21",
    "luxon": "^3.4.1",
    "posthog-react-native": "^2.11.5",
    "radash": "^10.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "^7.39.1",
    "react-i18next": "^11.18.6",
    "react-native": "0.73.5",
    "react-native-branch": "^6.0.0",
    "react-native-builder-bob": "^0.20.4",
    "react-native-circular-progress": "^1.3.9",
    "react-native-date-picker": "^4.2.13",
    "react-native-pager-view": "6.2.3",
    "react-native-paper": "^5.12.3",
    "react-native-purchases": "^7.6.0",
    "react-native-reanimated": "~3.6.2",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-smartlook-analytics": "^2.1.14",
    "react-native-svg": "14.1.0",
    "react-native-tab-view": "^3.3.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "~0.19.6",
    "react-native-webview": "13.6.4",
    "socket.io-client": "^4.5.4",
    "type-fest": "^3.4.0",
    "victory-native": "^36.6.8"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@cypress/code-coverage": "^3.10.0",
    "@types/chroma-js": "^2.4.0",
    "@types/color": "^3.0.3",
    "@types/jest": "^29.2.1",
    "@types/lodash": "^4.14.191",
    "@types/luxon": "^3.3.1",
    "@types/react": "~18.2.45",
    "@types/react-native-vector-icons": "^6.4.12",
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "@typescript-eslint/parser": "^5.62.0",
    "babel-plugin-istanbul": "^6.1.1",
    "babel-plugin-module-resolve": "^1.4.3",
    "cross-env": "^7.0.3",
    "cypress": "^12.2.0",
    "eslint": "^8.2.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "jest": "^29.5.0",
    "jest-expo": "~50.0.4",
    "lint-staged": "^13.0.3",
    "prettier": "2.7.1",
    "typescript": "^5.3.0"
  },

Additional context

Thank you for your bug report – we love squashing them!

marandaneto commented 5 months ago

@Bi0max try out the latest version https://github.com/PostHog/posthog-js-lite/blob/main/posthog-react-native/CHANGELOG.md#310---2024-03-27 there was a major refactoring and this issue might have been fixed already. Feel free to reopen if you still experience this issue after upgrading, sorry about that, and thanks.

Bi0max commented 5 months ago

Yes, it was fixed in 3.1.0