Add error hook and handler

Author: XieX

src/asyncWithLDProvider.tsx

@@ -32,12 +32,13 @@ import { camelCaseKeys, fetchFlags, getFlattenedFlagsFromChangeset } from './uti
 export default async function asyncWithLDProvider(config: AsyncProviderConfig) {
   const { clientSideID, user, flags: targetFlags, options, reactOptions: userReactOptions } = config;
   const reactOptions = { ...defaultReactOptions, ...userReactOptions };
-  const { ldClient } = await initLDClient(clientSideID, user, reactOptions, options, targetFlags);
+  const { ldClient, error } = await initLDClient(clientSideID, user, reactOptions, options, targetFlags);
 
   const LDProvider = ({ children }: { children: ReactNode }) => {
     const [ldData, setLDData] = useState({
       flags: fetchFlags(ldClient, reactOptions, targetFlags),
       ldClient,
+      error,
     });
 
     useEffect(() => {

src/context.ts

@@ -18,6 +18,11 @@ interface LDContext {
    * @see https://docs.launchdarkly.com/sdk/client-side/javascript
    */
   ldClient?: LDClient;
+
+  /**
+   * LaunchDarkly client initialization error, if there was one.
+   */
+  error?: Error;
 }
 
 /**

src/index.ts

@@ -4,8 +4,18 @@ import asyncWithLDProvider from './asyncWithLDProvider';
 import withLDConsumer from './withLDConsumer';
 import useFlags from './useFlags';
 import useLDClient from './useLDClient';
+import useLDClientError from './useLDClientError';
 import { camelCaseKeys } from './utils';
 
 export * from './types';
 
-export { LDProvider, asyncWithLDProvider, camelCaseKeys, useFlags, useLDClient, withLDProvider, withLDConsumer };
+export {
+  LDProvider,
+  asyncWithLDProvider,
+  camelCaseKeys,
+  useFlags,
+  useLDClient,
+  useLDClientError,
+  withLDProvider,
+  withLDConsumer,
+};

src/initLDClient.test.ts

@@ -27,8 +27,11 @@ describe('initLDClient', () => {
   beforeEach(() => {
     mockLDClient = {
       on: (e: string, cb: () => void) => {
-        cb();
+        if (e === 'ready') {
+          cb();
+        }
       },
+      off: jest.fn(),
       allFlags: () => flags,
       variation: jest.fn(() => true),
     };
@@ -89,4 +92,31 @@ describe('initLDClient', () => {
     expect(mockLDClient.variation).toHaveBeenNthCalledWith(2, 'lonelier-flag', false);
     expect(flagsClient).toEqual({ flags: { lonelyFlag: true, lonelierFlag: true }, ldClient: mockLDClient });
   });
+
+  test('returns an error', async () => {
+    const error = new Error('Out of cheese');
+    mockLDClient.on = (e: string, cb: (err: Error) => void) => {
+      if (e === 'failed') {
+        cb(error);
+      }
+    };
+
+    const flagsClient = await initLDClient(clientSideID);
+
+    expect(flagsClient).toEqual({ flags: {}, ldClient: mockLDClient, error });
+  });
+
+  test('executes error handler', async () => {
+    const error = new Error('Out of cheese');
+    mockLDClient.on = (e: string, cb: (err: Error) => void) => {
+      if (e === 'failed') {
+        cb(error);
+      }
+    };
+    const clientInitializationErrorHandler = jest.fn();
+
+    await initLDClient(clientSideID, undefined, { clientInitializationErrorHandler });
+
+    expect(clientInitializationErrorHandler).toHaveBeenCalledWith(error);
+  });
 });

src/initLDClient.ts

@@ -26,10 +26,24 @@ const initLDClient = async (
   const ldClient = ldClientInitialize(clientSideID, user, allOptions);
 
   return new Promise<AllFlagsLDClient>((resolve) => {
-    ldClient.on('ready', () => {
+    function cleanup() {
+      ldClient.off('ready', handleReady);
+      ldClient.off('failed', handleFailure);
+    }
+    function handleFailure(error: Error) {
+      cleanup();
+      if (reactOptions.clientInitializationErrorHandler) {
+        reactOptions.clientInitializationErrorHandler(error);
+      }
+      resolve({ flags: {}, ldClient, error });
+    }
+    function handleReady() {
+      cleanup();
       const flags = fetchFlags(ldClient, reactOptions, targetFlags);
       resolve({ flags, ldClient });
-    });
+    }
+    ldClient.on('failed', handleFailure);
+    ldClient.on('ready', handleReady);
   });
 };
 

src/provider.tsx

@@ -65,14 +65,16 @@ class LDProvider extends Component<PropsWithChildren<ProviderConfig>, HocState>
     let ldClient = await this.props.ldClient;
     const reactOptions = this.getReactOptions();
     let fetchedFlags;
+    let error: Error | undefined;
     if (ldClient) {
       fetchedFlags = fetchFlags(ldClient, reactOptions, flags);
     } else {
       const initialisedOutput = await initLDClient(clientSideID, user, reactOptions, options, flags);
       fetchedFlags = initialisedOutput.flags;
       ldClient = initialisedOutput.ldClient;
+      error = initialisedOutput.error;
     }
-    this.setState({ flags: fetchedFlags, ldClient });
+    this.setState({ flags: fetchedFlags, ldClient, error });
     this.subscribeToChanges(ldClient);
   };
 

src/types.ts

@@ -21,6 +21,11 @@ export interface LDReactOptions {
    * @see https://docs.launchdarkly.com/sdk/client-side/react/react-web#flag-keys
    */
   useCamelCaseFlagKeys?: boolean;
+
+  /**
+   * Callback to pass a LaunchDarkly initialization error to, if one occurs.
+   */
+  clientInitializationErrorHandler?(error: Error): void;
 }
 
 /**
@@ -121,4 +126,9 @@ export interface AllFlagsLDClient {
    * @see https://docs.launchdarkly.com/sdk/client-side/javascript
    */
   ldClient: LDClient;
+
+  /**
+   * LaunchDarkly client initialization error, if there was one.
+   */
+  error?: Error;
 }

src/useLDClientError.tsx

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import context from './context';
+
+/**
+ * Provides the LaunchDarkly client initialization error, if there was one.
+ *
+ * @return The `launchdarkly-js-client-sdk` `LDClient` initialization error
+ */
+export default function useLDClientError() {
+  const { error } = useContext(context);
+
+  return error;
+}