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
20.58k stars 1.22k forks source link

MIME error on frontend apps #16152

Open andreivcodes opened 1 year ago

andreivcodes commented 1 year ago

Bug description

Frontend apps like the notification bar or the feedback form cannot load in proxied NextJS.

I have a self hosted instance of PostHog and a NextJS app on two different domains. Event ingestion between the two works fine but frontend apps don't.

I use the following NextJS configuration as proxy from the web app domain to the posthog domain.

async rewrites() {
    return [
      {
        source: "/ingest/:path*",
        destination: "https://posthog-domain.com/:path*",
      },
      {
        source: "/login/:path*",
        destination: "https://posthog-domain.com/login/",
      },
    ];
  },

I am using posthog-js for the web app like so

if (typeof window !== "undefined") {
  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY || "", {
    api_host: `${process.env.NEXT_PUBLIC_WEB_URL || ""}/ingest`,
    opt_in_site_apps: true,
    loaded: (posthog) => {
      if (process.env.NODE_ENV === "development") posthog.debug();
    },
  });
}

function HogProvider({ children }) {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  // Track pageviews
  useEffect(() => {
    if (pathname && searchParams) {
      let url = window.origin + pathname;
      if (searchParams.toString()) {
        url = url + `?${searchParams.toString()}`;
      }
      posthog.capture("$pageview", {
        $current_url: url,
      });
    }
  }, [pathname, searchParams]);

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

export default function RootProvider({ children }) {
  return (
    <Suspense fallback={<RootProviderInner>{children}</RootProviderInner>}>
      <HogProvider>
        <RootProviderInner>{children}</RootProviderInner>
      </HogProvider>
    </Suspense>
  );
}

The login script loads fine

Screenshot 2023-06-20 at 12 51 44 Screenshot 2023-06-20 at 12 53 22

But it does not get executed because it is loaded as text/html

Screenshot 2023-06-20 at 12 56 05

Environment

PostHog Hobby self-hosted with docker compose, version/commit: 1.43.0

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

Thanks for the awesome app you're building ❤️

matthewwong525 commented 1 year ago

Potential related Issues / PRs:

This message was generated by AI from www.triagetickets.com