Flagsmith
[React] FlagsmithProvider throws error when flagsmith.init fails by some reason to fetch flags
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:
- user w/o cached flags open the website
- 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.
@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!
@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)
@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?
@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
@vik-buchinski thanks for sharing the example, we'll take a look into this.