PostHog Next.js causing memory leaks

[mjad218]

Hi,
I have been using PostHog for a while and just discovered it is causing a serious memory leak.
I am using [email protected].

I solved the leak by lazily importing Posthog.

export const CSPostHogProvider = (props: IProps) => {
  const [client, setClient] = useState<PostHog | undefined>();

  useEffect(() => {
    const handler = async () => {
      const posthog = (await import("posthog-js")).posthog;

      const client = posthog.init(
        process.env["NEXT_PUBLIC_POSTHOG_KEY"] ?? "",
        {
          api_host: `${FRONT_END_URL}/ingest`,
          capture_pageview: false,
        },
      );
      setClient(client);
    };

    handler();
  }, []);

  if (!client) return props.children;
  return <PostHogProvider client={client}>{props.children}</PostHogProvider>;
};

The above code solved the leak on the server side, but the thing is I am worried the leak is happening on clients now.

Last 14 Days memory usage. cloud run instance

Last 1 Days memory usage. cloud run instance

You can observe from the above image that the memory usage is now constant at around 15% after I pushed the above code const posthog = (await import("posthog-js")).posthog;

How I was using PostHog before:

export const CSPostHogProvider = (props: IProps) => {
  const [client, setClient] = useState<PostHog | undefined>();

  useEffect(() => {
    const client = posthog.init(process.env["NEXT_PUBLIC_POSTHOG_KEY"] ?? "", {
      api_host: `${FRONT_END_URL}/ingest`,
      capture_pageview: false,
    });
    setClient(client);
  }, []);

  return <PostHogProvider client={client}>{props.children}</PostHogProvider>;
};

I tried this as well:

export const CSPostHogProvider = (props: IProps) => {
  const isClientSide = typeof window !== "undefined";
  if (isClientSide) {
    posthog.init(process.env["NEXT_PUBLIC_POSTHOG_KEY"] ?? "", {
      api_host: `${FRONT_END_URL}/ingest`,
      capture_pageview: false,
    });
  }

  return <PostHogProvider client={posthog}>{props.children}</PostHogProvider>;
};

I don't know if the leak is because of the way I configured PostHog or because of the library itself.

I am using [email protected]

Another concern is there are any plans about decreasing the size of the lib?
#65

[volfadar]

that's already states in their docs bro to do the dynamic import a.k.a lazy load the components.

[mjad218]

The photo or the screenshot is for loading the Page View component.

I clearly stated that the problem concerns the Provider component and initialization of the lib itself.

[mjad218]

And I don't think lazily loading the provider is good for performance.