Unleash / unleash-client-nextjs

Unleash SDK for Next.js
28 stars 9 forks source link

"fetch" and "abortController" missing in Next.js middleware #76

Closed StillScripts closed 5 months ago

StillScripts commented 5 months ago

Describe the bug

When the flagsClient is initiated in Next.js edge middleware, it logs two errors due to the environment. I am uncertain what impacts this has on the functionality of Unleash, but it appears that the unleash-proxy-client is not supported in the Next.js edge middleware environment

Steps to reproduce the bug

  1. Clone this repo and deploy the example project on Vercel.
  2. Update env variables and flags to match a specific Unleash server.
  3. Visit /ab
  4. View Vercel logs

Expected behavior

I would expect to be able to pass something to the flagsClient to ensure that it works appropriately in Next.js edge middleware and that these error logs do not occur.

Logs, error output, etc.

Unleash: You must either provide your own "AbortController" implementation or run in an environment where "AbortController" is available.

Unleash: You must either provide your own "fetch" implementation or run in an environment where "fetch" is available.

Screenshots

Screenshot 2024-06-03 at 1 41 09 pm

Additional context

I am new to Unleash and exploring it for AB testing at our company. Edge middleware is a requirement so that we can have minimal impact on user experience.

Unleash version

Unleash 5.12.4

Subscription type

None

Hosting type

Self-hosted

SDK information (language and version)

"@unleash/nextjs": "^1.4.2"

kwasniew commented 5 months ago

Hi there! It appears that the Edge Runtime at https://vercel.com/docs/functions/runtimes/edge-runtime supports both the fetch and AbortController APIs. The underlying JavaScript client accesses these APIs through either the window or globalThis objects, as shown here: https://github.com/Unleash/unleash-proxy-client-js/blob/main/src/index.ts#L113. I assume that Vercel supports globalThis. Is there a chance that they use a different name for the global variable? By the way, the A/B testing example should still function despite these errors. Is that the case for you? Our NextJS SDK lead will be back from holidays next week, so I can discuss with him the possibility of omitting the fetch and AbortController API checks altogether when running in server-side middleware.

StillScripts commented 5 months ago

@kwasniew Thanks for looking into this. Yes, those methods seem to be available in the Edge runtime so I'm not exactly sure what would be causing the error logs.

Yes, I have verified that the A/B tests are working fine on the site we are testing it on. So it appears that the right approach will be omitting the fetch and AbortController API checks within the Edge middleware.

One separate issue we have is that the metrics are not being recorded in Unleash with how we are using it, but I believe this is already discussed here #50 and this is not a major issue for us as we are using external analytics providers to track this.

kwasniew commented 5 months ago

Correct. Next SDK server-side part does not support metrics as of today. The issue that you linked to will be updated once we come up with a solution to this.