[React] FlagsmithProvider throws error when flagsmith.init fails by some reason to fetch flags

[vik-buchinski]

Description:

The FlagsmithProvider is causing app crash(doesn't catch error from flagsmith.init), when we try to load app with the following options:
{ environmentID: 'FLAGSMITH_ID', api: 'https://flags.self hosted.com/api/v1', cacheFlags: false, onChange: [Function: onChange], enableLogs: true, state: undefined }

I'm writing the following test case:

1. user w/o cached flags open the website
2. The flagsmith server, for some reason, is unavailable, or throws any http error

Expected behaviour:

• The website works as expected, all flags are treated as 'disabled'. Some logs show that FS library failed to fetch the flags.

Actual behaviour:

• The website gets crashed

The reason for that:
When FS react logic tries to init FS instance there:
https://github.com/Flagsmith/flagsmith-js-client/blob/main/react.tsx#L49

And FS core fails to init because of the failed requests, it re-throws error:
https://github.com/Flagsmith/flagsmith-js-client/blob/main/flagsmith-core.ts#L565

Because of the FS React layer doesn't catch it, the error flies directly to the app code.

Actually, the FS library is 1 of the core libraries in any application, which could be responsible for very important logic.
And it is very important to keep this library as stable as possible. Even if it fails to fetch flags during initialization, it still should continue working and not block users from using the application.
What I suggest - if it fails to fetch flags, the lib should continue working and treat all flags as 'disabled', or work with the provided as 'default' flags.

[matthewelwell]

@vik-buchinski can you provide more information here please? We'd expect to see the full initialisation code, as well as the error details you're receiving from the crash. Thanks!

[vik-buchinski]

@matthewelwell
Sorry, I can't give you the code, since it is under NDA, but I can give you logs.
Anyway, not sure that you need my code to have, since I pointed to the root issue in the source code of the library.

Logs:

FLAGSMITH: 0 ms Initialising with properties {
environmentID: 'FLAGSMITH_ID',
api: 'https://flags.self-hosted.com/api/v1',
cacheFlags: false,
onChange: [Function: onChange],
enableLogs: true,
state: undefined
} t {
_trigger: [Function (anonymous)],
_triggerLoadingState: [Function (anonymous)],
timestamp: null,
isLoading: false,
eventSource: null,
getFlags: [Function (anonymous)],
analyticsFlags: [Function (anonymous)],
datadogRum: null,
loadingState: { isLoading: true, isFetching: true, error: null, source: 'NONE' },
canUseStorage: true,
analyticsInterval: null,
api: 'https://flags.self-hosted.com/api/v1/',
cacheFlags: false,
enableAnalytics: false,
enableLogs: true,
evaluationContext: { identity: undefined, environment: { apiKey: 'FLAGSMITH_ID' } },
evaluationEvent: null,
flags: {},
getFlagInterval: null,
headers: undefined,
identity: null,
initialised: true,
oldFlags: null,
onChange: [Function: onChange],
onError: [Function (anonymous)],
ticks: 10000,
timer: 1761299238052,
dtrum: null,
sentryClient: null,
withTraits: null,
cacheOptions: { ttl: 0, skipAPI: false, loadStale: false, storageKey: undefined },
getValue: [Function (anonymous)],
getTrait: [Function (anonymous)],
getAllTraits: [Function (anonymous)],
setContext: [Function (anonymous)],
getContext: [Function (anonymous)],
updateContext: [Function (anonymous)],
setTrait: [Function (anonymous)],
setTraits: [Function (anonymous)],
hasFeature: [Function (anonymous)],
getStorageKey: [Function (anonymous)],
getJSON: [Function (anonymous)],
evaluateFlag: [Function (anonymous)],
_onChange: [Function (anonymous)],
applicationMetadata: undefined
}

  at t.arguments [as log] (../../node_modules/flagsmith/src/flagsmith-core.ts:794:37)

console.log
FLAGSMITH: 38 ms Get Flags

  at t.arguments [as log] (../../node_modules/flagsmith/src/flagsmith-core.ts:794:37)

console.log
FLAGSMITH: 49 ms React - Initialising event listeners

  at t.arguments [as log] (../../node_modules/flagsmith/src/flagsmith-core.ts:794:37)

console.log
FLAGSMITH: 69 ms Fetch response: 500 GET0https://flags.self-hosted.com/api/v1/flags/

  at t.arguments [as log] (../../node_modules/flagsmith/src/flagsmith-core.ts:794:37)

console.log
FLAGSMITH: 69 ms Error during initialisation Error: API Response: 500
at status (/Users/vik.buchinski/Documents/github/******/node_modules/flagsmith/src/flagsmith-core.ts:868:56)
at processTicksAndRejections (node:internal/process/task_queues:105:5)

  at t.arguments [as log] (../../node_modules/flagsmith/src/flagsmith-core.ts:794:37)

console.log
FLAGSMITH: 75 ms Loading state changed {
isLoading: false,
isFetching: false,
error: Error: API Response: 500
at status (/Users/vik.buchinski/Documents/github/****/node_modules/flagsmith/src/flagsmith-core.ts:868:56)
at processTicksAndRejections (node:internal/process/task_queues:105:5),
source: 'NONE'
}

  at t.arguments [as log] (../../node_modules/flagsmith/src/flagsmith-core.ts:794:37)

● testFIle › should consider all flags as disabled when flagsmith is not available and cache disabled

API Response: 500

  at status (../../node_modules/flagsmith/src/flagsmith-core.ts:868:56)

[matthewelwell]

@vik-buchinski the most helpful thing for us will be a minimal example for us to reproduce the issue. If you are unable to share the code, can you please provide this?

[vik-buchinski]

@matthewelwell done:
https://github.com/vik-buchinski/FS-hello-world

Please, refer to this test:
https://github.com/vik-buchinski/FS-hello-world/blob/main/src/App.test.tsx#L122

[matthewelwell]

@vik-buchinski thanks for sharing the example, we'll take a look into this.