feat(react): Allow user provided reportError function (#619)

Because:

* We should allow users the ability to provide a reportError function.

This commit:

* Adds a class property, reportError, to ReactLocalization that allows
  consumers to provide a function on initialization to report errors.
  By default the errors will console.warn.

Closes: #411

fluent-react/src/localization.ts

@@ -15,6 +15,12 @@ import voidElementTags from "../vendor/voidElementTags.js";
 // &, &, &.
 const reMarkup = /<|&#?\w+;/;
 
+const defaultReportError = (error: Error): void => {
+  /* global console */
+  // eslint-disable-next-line no-console
+  console.warn(`[@fluent/react] ${error.name}: ${error.message}`);
+};
+
 /**
  * `ReactLocalization` handles translation formatting and fallback.
  *
@@ -29,13 +35,16 @@ const reMarkup = /<|&#?\w+;/;
 export class ReactLocalization {
   public bundles: Iterable<FluentBundle>;
   public parseMarkup: MarkupParser | null;
+  public reportError: (error: Error) => void;
 
   constructor(
     bundles: Iterable<FluentBundle>,
-    parseMarkup: MarkupParser | null = createParseMarkup()
+    parseMarkup: MarkupParser | null = createParseMarkup(),
+    reportError?: (error: Error) => void
   ) {
     this.bundles = CachedSyncIterable.from(bundles);
     this.parseMarkup = parseMarkup;
+    this.reportError = reportError || defaultReportError;
   }
 
   getBundle(id: string): FluentBundle | null {
@@ -227,12 +236,4 @@ 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}`);
-  }
 }

fluent-react/test/localized_valid.test.js

@@ -114,4 +114,20 @@ describe("Localized - validation", () => {
       ]
     `);
   });
+
+  test("Calls provided logger function, instead of default, when no id is provided", () => {
+    jest.spyOn(console, "warn").mockImplementation(() => {});
+    const mockReportError = jest.fn();
+    const renderer = TestRenderer.create(
+      <LocalizationProvider l10n={new ReactLocalization([], null, mockReportError)}>
+        <Localized>
+          <div />
+        </Localized>
+      </LocalizationProvider>
+    );
+
+    expect(renderer.toJSON()).toMatchInlineSnapshot(`<div />`);
+    expect(console.warn.mock.calls).toMatchInlineSnapshot(`[]`);
+    expect(mockReportError).toHaveBeenCalledWith(new Error('No string id was provided when localizing a component.'));
+  });
 });