web-vitals extension loads script from incorrect URL

[Jacksondr5]

Hello, I'm encountering an issue where PostHog is attempting to load the web-vitals script, but is using an incorrect URL: /ingest/ingest/static/web-vitals.js?v=1.154.2. This does proxy through to posthog.com (I see some ASCII art of a hedgehog), but returns a 404.

I'm running a NextJS app with rewrites as a reverse proxy. Specifically, these:

next.config.js

{
  source: '/ingest/static/:path*',
  destination: 'https://eu-assets.i.posthog.com/static/:path*',
},
{
  source: '/ingest/:path*',
  destination: 'https://eu.i.posthog.com/:path*',
},
{
  source: '/ingest/decide',
  destination: 'https://eu.i.posthog.com/decide',
},

My calls to the /ingest/decide and /ingest/e endpoints are working properly.

Looking through the code, I think the issue may be this call to endpointFor. When I run through the code in the Chrome debugger, I can see that endpointFor gets called and prepends the extra /ingest that's causing the issue:

Happy to contribute a PR to a solution. Not entirely sure what that solution should be.

My thoughts are to replace

posthog-js/src/extensions/web-vitals/index.ts

Lines 73 to 75 in f5a0d12

	this.instance.requestRouter.loadScript(
	this.instance.requestRouter.endpointFor('assets', `/static/web-vitals.js?v=${Config.LIB_VERSION}`),
	(err) => {

with

this.instance.requestRouter.loadScript(
    `/static/web-vitals.js?v=${Config.LIB_VERSION}`,

This would mean that endpointFor only gets called once, by loadScript.

There are other extensions that do this, instead of also calling endpointFor themselves (tracing-headers, toolbar, surveys). However, autocapture does make the same kind of call that web-vitals does, so I'm not sure if this is correct.

[junioryono]

+1

I am also receiving this error for web vitals. I have a NextJS app with rewrites as a reverse proxy.

[junioryono]

The simplest solution as of now is to add the path in your list of rewrites

next.config.js

async rewrites() {
    return [
      {
        source: "/ingest/ingest/static/:path*",
        destination: "https://us-assets.i.posthog.com/static/:path*",
      },
      {
        source: "/ingest/static/:path*",
        destination: "https://us-assets.i.posthog.com/static/:path*",
      },
      {
        source: "/ingest/:path*",
        destination: "https://us.i.posthog.com/:path*",
      },
      {
        source: "/ingest/decide",
        destination: "https://us.i.posthog.com/decide",
      },
    ];
  },

[pauldambra]

great write up @Jacksondr5 thank you! Super clear

really we should make endpointFor safe for multiple calls but in the meantime I've opened #1365 that will resolve this

[lyonz]

I just updated to newest version and still have this issue, has it been resolved? or do I need to use @junioryono workaround? Thank you