Merge pull request #66 from launchdarkly/christie/sc-164279/unearth-ld-client-init-errors-in-react-sdk

Add error hook

Author: XieX

src/__snapshots__/provider.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`LDProvider render app 1`] = `
 <Provider
   value={
     Object {
+      "error": undefined,
       "flagKeyMap": Object {},
       "flags": Object {},
       "ldClient": undefined,

src/__snapshots__/withLDProvider.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`withLDProvider render app 1`] = `
 <Provider
   value={
     Object {
+      "error": undefined,
       "flagKeyMap": Object {},
       "flags": Object {},
       "ldClient": undefined,

src/asyncWithLDProvider.tsx

@@ -33,7 +33,7 @@ import getFlagsProxy from './getFlagsProxy';
 export default async function asyncWithLDProvider(config: AsyncProviderConfig) {
   const { clientSideID, user, flags: targetFlags, options, reactOptions: userReactOptions } = config;
   const reactOptions = { ...defaultReactOptions, ...userReactOptions };
-  const { ldClient, flags: fetchedFlags } = await initLDClient(clientSideID, user, options, targetFlags);
+  const { ldClient, flags: fetchedFlags, error } = await initLDClient(clientSideID, user, options, targetFlags);
 
   const LDProvider = ({ children }: { children: ReactNode }) => {
     const [ldData, setLDData] = useState({
@@ -69,7 +69,7 @@ export default async function asyncWithLDProvider(config: AsyncProviderConfig) {
 
     const { flags, flagKeyMap } = ldData;
 
-    return <Provider value={{ flags, flagKeyMap, ldClient }}>{children}</Provider>;
+    return <Provider value={{ flags, flagKeyMap, ldClient, error }}>{children}</Provider>;
   };
 
   return LDProvider;

src/context.ts

@@ -25,6 +25,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

@@ -29,8 +29,11 @@ describe('initLDClient', () => {
   beforeEach(() => {
     mockLDClient = {
       on: (e: string, cb: () => void) => {
-        cb();
+        if (e === 'ready') {
+          cb();
+        }
       },
+      off: jest.fn(),
       allFlags: () => flags,
       variation: jest.fn(() => true),
     };
@@ -69,4 +72,17 @@ describe('initLDClient', () => {
     ]);
     expect(mockLDClient.variation).toHaveBeenCalledTimes(0);
   });
+
+  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 });
+  });
 });

src/initLDClient.ts

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

src/provider.tsx

@@ -78,14 +78,16 @@ class LDProvider extends Component<PropsWithChildren<ProviderConfig>, LDHocState
     let ldClient = await this.props.ldClient;
     const reactOptions = this.getReactOptions();
     let unproxiedFlags;
+    let error: Error | undefined;
     if (ldClient) {
       unproxiedFlags = fetchFlags(ldClient, flags);
     } else {
       const initialisedOutput = await initLDClient(clientSideID, user, options, flags);
       unproxiedFlags = initialisedOutput.flags;
       ldClient = initialisedOutput.ldClient;
+      error = initialisedOutput.error;
     }
-    this.setState({ unproxiedFlags, ...getFlagsProxy(ldClient, unproxiedFlags, reactOptions, flags), ldClient });
+    this.setState({ unproxiedFlags, ...getFlagsProxy(ldClient, unproxiedFlags, reactOptions, flags), ldClient, error });
     this.subscribeToChanges(ldClient);
   };
 
@@ -107,9 +109,9 @@ class LDProvider extends Component<PropsWithChildren<ProviderConfig>, LDHocState
   }
 
   render() {
-    const { flags, flagKeyMap, ldClient } = this.state;
+    const { flags, flagKeyMap, ldClient, error } = this.state;
 
-    return <Provider value={{ flags, flagKeyMap, ldClient }}>{this.props.children}</Provider>;
+    return <Provider value={{ flags, flagKeyMap, ldClient, error }}>{this.props.children}</Provider>;
   }
 }
 

src/types.ts

@@ -24,7 +24,7 @@ export interface LDReactOptions {
 
   /**
    * Whether to send flag evaluation events when a flag is read from the `flags` object
-   * retured by the `useFlags` hook. This is true by default, meaning flag evaluation
+   * returned by the `useFlags` hook. This is true by default, meaning flag evaluation
    * events will be sent by default.
    */
   sendEventsOnFlagRead?: boolean;
@@ -129,6 +129,11 @@ 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;
+}