Unleash logs many errors at scale

[maqnus]

Describe the bug

When @unleash/proxy-client-react is unable to fetch feature toggles, it throws an error but does not log sufficient information about the failure. This makes it difficult to diagnose and troubleshoot the issue.

Steps to reproduce the bug

1. Set up @unleash/proxy-client-react in your project.
2. Simulate a scenario where the proxy server is unreachable or returns an error. ie. block app.unleash-hosted.com/silver/api/frontend/client/metrics from the browser side
3. Observe the lack of detailed logging information in the browser console.

Expected behavior

The library should log detailed information about the failure to fetch feature toggles, including the error message and any relevant context, to aid in diagnosing and troubleshooting the issue.

Logs, error output, etc.

• Unleash: unable to fetch feature toggles TypeError: Failed to fetch (reproducible in example project)

• Error: console.error: Unleash: unable to fetch feature toggles TypeError: Failed to fetch at ? (https://cdn....

• Error: console.error: Unleash: unable to fetch feature toggles TypeError: Load failed at ? (https://cdn...

• Error: console.error: Unleash: unable to send feature metrics TypeError: Load failed at ? (https://cdn...

• Error: console.error: Unleash: unable to send feature metrics TypeError: Failed to fetch at ? (https://cdn..

• Error: console.error: Unleash: unable to send feature metrics TypeError: NetworkError when attempting to fetch resource. at ? (https://cdn...

The full stacktrace:
Error: console.error: Unleash: unable to send feature metrics TypeError: Load failed at ? (<cdn-server-hostname>/node_modules/@grafana/faro-web-sdk/dist/esm/instrumentations/console/instrumentation.js:20:53) at ? (<cdn-server-hostname>/node_modules/unleash-proxy-client/build/main.esm.js:1:5671) at t (<cdn-server-hostname>/node_modules/unleash-proxy-client/build/main.esm.js:1:1758) at t (<cdn-server-hostname>/node_modules/unleash-proxy-client/build/main.esm.js:1:555) at ? (<cdn-server-hostname>/node_modules/zone.js/fesm2015/zone.js:111:49) at delegate (<cdn-server-hostname>/node_modules/zone.js/fesm2015/zone.js:2538:43) at ? (<cdn-server-hostname>/node_modules/zone.js/fesm2015/zone.js:159:57) at task (<cdn-server-hostname>/node_modules/zone.js/fesm2015/zone.js:581:42)

Screenshots

Additional context

Example project with @unleash/proxy-client-react implemented, where you are able to add your own example configs as search params:
https://unleash-feature-toggle-exception-example-v5qh.vercel.app/?appName=example-project-name>&unleashUrl=https://app.unleash-hosted.com/silver/api/frontend&unleashToken=default:development.unleash-insecure-api-token&featureFlag=example-feature-flag

See example repo here: https://github.com/maqnus/unleash-feature-toggle-exception-example

Unleash version

4.4.0

Subscription type

Pro

Hosting type

Hosted by Unleash

SDK information (language and version)

No response

[FredrikOseberg]

@maqnus

Thanks for the report. This library is a wrapper around another library that is the core of all of our javascript SDKs. In this SDK we emit an event on error that contains the status code and the error message, which you can listen to in order to receive the error object:

https://github.com/Unleash/unleash-proxy-client-js/blob/main/src/index.ts#L605-L618

If you hit this block, it means that there was something in the network preventing the response from reaching Unleash. It would not help you to know the context here because the request never reaches Unleash. The failure is on the network layer and usually hard to debug because it may be any number of reasons why this happens. For example the user may be on a network that blocks the request from reaching Unleash, and all the SDK knows is that the request failed.

I'm open to ideas, but I'm not sure adding the context here would be helpful.

[FredrikOseberg]

Closing this for now, feel free to re-open if you think there is something we can do in this area.