NextJS handling of network error

[BRB3D]

Describe the feature request

Handling Unleash Network Errors in NextJS Applications

Background

Current Situation

In our project, we wrap the app with the Unleash provider/flagProvider. While this generally works well, there's a critical issue:

• If there's a network error when fetching from Unleash, the app crashes due to lack of response.

Current Solution

The current approach to handle this is:

• Create an error wrapper that displays an error screen when a network issue occurs.

Solution suggestions

Proposed Improvement

A more robust solution could involve:

1. Implementing a fallback mechanism for useFlags() hook:

   • Return false for all flags if there's no connection
   • OR
   • Return a predetermined object of feature flags (some true, some false)

2. This approach would prevent app crashes and allow for graceful degradation.

Implementation Concept

import { FlagProvider, useFlags } from 'your-unleash-library';

// Fallback flags object
const fallbackFlags = {
  featureA: false,
  featureB: true,
  featureC: false,
  // ... other flags
};

// In your app
const App = () => {
  return (
    <FlagProvider config={/* your config */} fallBack={fallbackFlags}>
      <YourAppComponents />
    </FlagProvider>
  );
};

[Tymek]

Can you please provide a reproducible example of an app crashing? We already have a way of providing "fallback" flags (bootstrap config, with <FlagProvider config={{ bootstrap: [...] }} >), and rendering before flags are resolved (const { flagsReady } = useFlagsStatus();).

[BRB3D]

Hello Unleash team,

I apologize for the delayed response. As a new member of the project, I've discovered some important information regarding the recent incident:

1. Root cause: The app crash was not due to Unleash, as initially thought. Instead, it was caused by an error we throw in a file where we check if unleash is returning flags. So when we had a network error with unleash we threw the error.

2. Current limitation: We currently don't have a mechanism to detect when these network errors occur although very rear they do happen.

3. Suggested improvement: It would be beneficial to implement a sort of catch method were it allows to extract hey this is happening because there was a network error?

I appreciate your patience as I've just started on the project and honestly thought it was coming from unleash. Please let me know if you need any further clarification or have any questions.

Thank you for your understanding.

[Tymek]

Please provide an example causing an app crash. I couldn't reproduce your issue. Network errors are caught in code and printed to the console. There is an option to get errors with listeners (https://docs.getunleash.io/reference/sdks/react#listening-to-events).

[FredrikOseberg]

Hello Unleash team,

I apologize for the delayed response. As a new member of the project, I've discovered some important information regarding the recent incident:

1. Root cause: The app crash was not due to Unleash, as initially thought. Instead, it was caused by an error we throw in a file where we check if unleash is returning flags. So when we had a network error with unleash we threw the error.
2. Current limitation: We currently don't have a mechanism to detect when these network errors occur although very rear they do happen.
3. Suggested improvement: It would be beneficial to implement a sort of catch method were it allows to extract hey this is happening because there was a network error?

I appreciate your patience as I've just started on the project and honestly thought it was coming from unleash. Please let me know if you need any further clarification or have any questions.

Thank you for your understanding.

@BRB3D

The SDKs are designed to not throw errors but instead allow clients to hook into events and listen to errors and decide how to act upon them themselves. Like Tymek said, you can listen on the error events emitted from the SDK and decide what you do with them when you receive an error. I will close this issue for now, but let me know if that works for you.

[BRB3D]

A bit more of context, we create the flag provider just like the unleash website. but we have a function that basically evaluatesFlags(getDefinitions, context) if that didnt return the array we threw an error. It usually works, but if there is a network error in unleash then thats why our app was crashing. Now I would love to create a banner that says to users hey some features might not be working. But because its a server-side function I havent found a way to pass it to a client-side Provider. Is there such feature? I mean we will listen when we mount the component but after that not sure?