Experiencing "Unable to fetch feature toggle" errors

[kevinprescottwong-Dev]

Describe the bug

Hello, I am seeing the "Unable to fetch feature toggle" error pop up with high frequency.

Here is a screenshot of our logs over a 4 hour period:

Technical

We are a React micro front end app that is loaded on to our websites pages. We are using the React SDK to connect to our self hosted Unleash Edge instance.

// package.json depedencies
"@unleash/proxy-client-react": "^4.2.4",
"unleash-proxy-client": "^3.4.0",

Here is our config for the React SDK:

  url: `${process.env.UNLEASH_API_URL}/frontend`, // Your front-end API URL or the Unleash proxy's URL (/proxy)
  clientKey: process.env.UNLEASH_API_ACCESS_TOKEN || '', // A client-side API token OR one of your proxy's designated client keys (previously known as proxy secrets)
  refreshInterval: 60, // How often (in seconds) the client should poll the proxy for updates
  appName: 'our-app', // The name of your application. It's only used for identifying your application
  environment: process.env.NODE_ENV === 'production' ? 'production' : 'development', // Only development and production environments are available in Unleash
  context: {
    properties: {
      BrowserCookieId: identifier.browserCookieId || '',
      DeviceId: identifier.DeviceId || '',
      UserId: getUserIdFromAuthCookie() || '',
    },
  },

Here are the images we are using for hosting the server

Image:      unleashorg/unleash-server:5.9.6
Image:      unleashorg/unleash-edge:v17.1.0

I have tried to use the custom fetch in the config to create a wrapper to catch any failed network requests and returned a fake Response object.

Steps to reproduce the bug

I cannot reproduce any of these errors when I am testing, except for the Unleash: unable to fetch feature toggles TypeError: Failed to fetch error. I can reproduce this one by blocking this network request, or disabling the network.

Expected behavior

No response

Logs, error output, etc.

No response

Screenshots

No response

Additional context

No response

Unleash version

No response

Subscription type

Open source

Hosting type

Self-hosted

SDK information (language and version)

No response

[ivarconr]

Hi @kevinprescottwong-Dev,

thanks for reaching out. Its a bit hard to say exactly whats going on here. A connection error can come from many things:

1. Edge might not be up/available.
2. Users might not be able to reach edge (firewall, network, etc)
3. Could there be new code changes causing the errors? (e.g. a client side redirect before flags have been loaded will cause an abort of the request in flight

Do you have server metrics for the edge service you can observe? Is it constantly receiving traffic? Are you able to observe any unstability there?

I see you are running a rather old Unleash Edge (and Unleash server), would you mind upgrading to Unleash Edge v19.1.3?

[kevinprescottwong-Dev]

I understand that this issue can be hard to pinpoint because there are many possibilities.

Is there any way to get more information about the failed XHR requests?.... How can I differentiate between an unreachable/unresponsive Server vs Client-side networking issues (firewall, network failure) ?

Honestly "3" might be the problem... We have had issues with other teams loading our MFE module multiple times, and SPA routing might also be causing the multiple loads.

I can talk with the team about upgrading our Edge and Server version.

Thanks for your suggestions @ivarconr

[ivarconr]

Hi again,

The error TypeError: Failed to Fetch and The error TypeError: Load failed` comes directly from fetch "fetch" implementation in the browsers. It basically says that the browser is unable to connect to the Unleash API.

There are some common things to validate in order to fix this issue (source):

1. Incorrect or Incomplete URL

• The URL passed to the fetch() method might be incorrect or incomplete.
• Ensure the URL includes the correct protocol (https:// or http://), and the path is accurate.
• E.g. your comment says http://unleash-edge.ngcp..., but I would hope you are actually running on https.

2. CORS (Cross-Origin Resource Sharing) Issues

• The server might not send back the correct CORS headers. If you’re not sure what CORS is, check out the MDN Docs.
• Server configuration should include appropriate Access-Control-Allow-* headers. Edge does set the wildcard cors header, but there might be a load-balancer removing them in your infra?

3. Incorrect Fetch Configuration

• Errors in the HTTP method or headers passed to the fetch() method.
• Verify the correct configuration, including URL, HTTP method, and headers.

4. Browser Extensions

• Sometimes, browser extensions can cause these errors. They might interfere with the API calls or modify the responses.

[kevinprescottwong-Dev]

Thanks for more clarification @ivarconr !

We have not seen anything wrong in the server logs... and I have had issues with redirects causing our MFE app to reinitialize... So client side redirects might be the root cause.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[UrbanChrisy]

We are seeing similar issues in out datadog tracking too. We see this happening randomly during a users session. I think this is more of a problem than unleash are giving credit to it.