Skipping posthog.init in dev causes useFeatureFlags to crash application

[bard]

As per docs, I have this in my index.tsx to avoid sending data during development and to keep the dev environment self-contained:

if (!window.location.href.includes('127.0.0.1')) {
    posthog.init("<ph_project_api_key>", {api_host: '<ph_instance_address>'})
}

Thus, an uninitialized PostHog client is passed down via <PostHogProvider client={posthog}>. Calls to posthog.capture don't seem to mind too much, but a call to useFeatureFlags crashes the application:

const Component: React.FC = () => {
  const flags = useFeatureFlags({ refreshInterval: 60, sendEvent: false })
// ...

Error:

Uncaught TypeError: Cannot read properties of undefined (reading 'addFeatureFlagsHandler')
    at PostHogLib2.PostHogLib.onFeatureFlags (posthog-js.js?v=403464e9:4147)
    at posthog-js_react.js?v=403464e9:82
    at invokePassiveEffectCreate (chunk-S22EOZLY.js?v=403464e9:16757)
    at HTMLUnknownElement.callCallback2 (chunk-S22EOZLY.js?v=403464e9:3671)
    at Object.invokeGuardedCallbackDev (chunk-S22EOZLY.js?v=403464e9:3696)
    at invokeGuardedCallback (chunk-S22EOZLY.js?v=403464e9:3730)

Any idea how to work around it? Simply wrapping useFeatureFlags in a try/catch makes no difference.

[skabbes]

Hey @bard I recently ran into a very similar issue, likely the solution for my issue and the solution for yours will be the same:

My original issue: https://github.com/PostHog/posthog-js/issues/281

My suggested fix: https://github.com/PostHog/posthog-js/pull/282

FYI - I am not a member of the posthog team, just a developer trying to use posthog same as you.

[bard]

@skabbes thanks for the pointer! Indeed it's most likely the same problem.

[bard]

@mariusandra @skabbes thanks for merging #282. I just updated and, though I think the mechanism of the crash is the same, the triggered code path for feature flags is different:

Uncaught TypeError: Cannot read properties of undefined (reading 'addFeatureFlagsHandler')
    at PostHogLib2.PostHogLib.onFeatureFlags (posthog-js.js?v=c982ec7f:4154)
    at posthog-js_react.js?v=c982ec7f:82
    at invokePassiveEffectCreate (chunk-S22EOZLY.js?v=c982ec7f:16757)
    at HTMLUnknownElement.callCallback2 (chunk-S22EOZLY.js?v=c982ec7f:3671)
    at Object.invokeGuardedCallbackDev (chunk-S22EOZLY.js?v=c982ec7f:3696)
    at invokeGuardedCallback (chunk-S22EOZLY.js?v=c982ec7f:3730)
    at flushPassiveEffectsImpl (chunk-S22EOZLY.js?v=c982ec7f:16819)
    at unstable_runWithPriority (chunk-S22EOZLY.js?v=c982ec7f:346)
    at runWithPriority$1 (chunk-S22EOZLY.js?v=c982ec7f:8468)
    at flushPassiveEffects (chunk-S22EOZLY.js?v=c982ec7f:16723)

[PeterKow]

You can use __loaded to check if init is done e.g. if (posthog?.isFeatureEnabled && posthog?.__loaded) {