feat(react): add switch to provider to log errors

Because:

* We should allow users to control if reportErrors are reported or not.

This commit:

* Adds a class property to ReactLocalization to enable/disable logging
  in reportErrors.
* Allows <LocalizationProvider> to enable/disable error reporting

Closes: #411

Author: StaberindeZA

fluent-react/src/localization.ts

@@ -29,6 +29,7 @@ const reMarkup = /<|&#?\w+;/;
 export class ReactLocalization {
   public bundles: Iterable<FluentBundle>;
   public parseMarkup: MarkupParser | null;
+  private logErrors: boolean = true;
 
   constructor(
     bundles: Iterable<FluentBundle>,
@@ -228,11 +229,15 @@ export class ReactLocalization {
     return cloneElement(sourceElement, localizedProps, ...translatedChildren);
   }
 
-  // XXX Control this via a prop passed to the LocalizationProvider.
-  // See https://github.com/projectfluent/fluent.js/issues/411.
   reportError(error: Error): void {
-    /* global console */
-    // eslint-disable-next-line no-console
-    console.warn(`[@fluent/react] ${error.name}: ${error.message}`);
+    if (this.logErrors) {
+      /* global console */
+      // eslint-disable-next-line no-console
+      console.warn(`[@fluent/react] ${error.name}: ${error.message}`);
+    }
+  }
+
+  setLogErrors(logError: boolean): void {
+    this.logErrors = logError;
   }
 }

fluent-react/src/provider.ts

@@ -24,7 +24,12 @@ import { ReactLocalization } from "./localization.js";
 export function LocalizationProvider(props: {
   children: ReactNode;
   l10n: ReactLocalization;
+  logErrors?: boolean;
 }): ReactElement {
+  if (props.logErrors !== undefined) {
+    props.l10n.setLogErrors(props.logErrors);
+  }
+
   return createElement(
     FluentContext.Provider,
     { value: props.l10n },

fluent-react/test/localized_valid.test.js

@@ -114,4 +114,18 @@ describe("Localized - validation", () => {
       ]
     `);
   });
+
+  test("Does not have a warning when no id is provided", () => {
+    jest.spyOn(console, "warn").mockImplementation(() => {});
+    const renderer = TestRenderer.create(
+      <LocalizationProvider l10n={new ReactLocalization([])} logErrors={false}>
+        <Localized>
+          <div />
+        </Localized>
+      </LocalizationProvider>
+    );
+
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`<div />`);
+    expect(console.warn.mock.calls).toMatchInlineSnapshot(`[]`);
+  });
 });