Refactor to use React component function

Author: andrewbrook

common/api-review/telemetry-react.api.md

@@ -0,0 +1,17 @@
+## API Report File for "@firebase/telemetry-react"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { FirebaseOptions } from '@firebase/app';
+
+// @public
+export function FirebaseTelemetry({ firebaseOptions }: {
+    firebaseOptions?: FirebaseOptions;
+}): null;
+
+
+// (No @packageDocumentation comment for this package)
+
+```

common/api-review/telemetry.api.md

@@ -6,6 +6,7 @@
 
 import { AnyValueMap } from '@opentelemetry/api-logs';
 import { FirebaseApp } from '@firebase/app';
+import { Instrumentation } from 'next';
 import { LoggerProvider } from '@opentelemetry/sdk-logs';
 
 // @public
@@ -17,13 +18,7 @@ export function flush(telemetry: Telemetry): Promise<void>;
 // @public
 export function getTelemetry(app?: FirebaseApp): Telemetry;
 
-// @public (undocumented)
-export namespace Instrumentation {
-    // Warning: (ae-forgotten-export) The symbol "InstrumentationOnRequestError" needs to be exported by the entry point index.d.ts
-    //
-    // (undocumented)
-    export type onRequestError = InstrumentationOnRequestError;
-}
+export { Instrumentation }
 
 // @public
 export const nextOnRequestError: Instrumentation.onRequestError;

docs-devsite/telemetry.instrumentation.md

@@ -0,0 +1,31 @@
+Project: /docs/reference/js/_project.yaml
+Book: /docs/reference/_book.yaml
+page_type: reference
+
+{% comment %}
+DO NOT EDIT THIS FILE!
+This is generated by the JS SDK team, and any local changes will be
+overwritten. Changes should be made in the source code at
+https://github.com/firebase/firebase-js-sdk
+{% endcomment %}
+
+# Instrumentation namespace
+<b>Signature:</b>
+
+```typescript
+export declare namespace Instrumentation 
+```
+
+## Type Aliases
+
+|  Type Alias | Description |
+|  --- | --- |
+|  [onRequestError](./telemetry.instrumentation.md#instrumentationonrequesterror) |  |
+
+## Instrumentation.onRequestError
+
+<b>Signature:</b>
+
+```typescript
+type onRequestError = InstrumentationOnRequestError;
+```

docs-devsite/telemetry.md

@@ -27,6 +27,12 @@ https://github.com/firebase/firebase-js-sdk
 |  --- | --- |
 |  [Telemetry](./telemetry.telemetry.md#telemetry_interface) | An instance of the Firebase Telemetry SDK.<!-- -->Do not create this instance directly. Instead, use [getTelemetry()](./telemetry.md#gettelemetry_cf608e1)<!-- -->. |
 
+## Namespaces
+
+|  Namespace | Description |
+|  --- | --- |
+|  [Instrumentation](./telemetry.instrumentation.md#instrumentation_namespace) |  |
+
 ## Variables
 
 |  Variable | Description |

packages/telemetry/api-extractor.json

@@ -7,5 +7,11 @@
     "untrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>.d.ts",
     "betaTrimmedFilePath": "<projectFolder>/dist/<unscopedPackageName>-public.d.ts"
   },
+  // "additionalEntryPoints": [
+  //     {
+  //       "modulePath": "react",
+  //       "filePath": "<projectFolder>/dist/react/index.d.ts"
+  //     }
+  //   ],
   "bundledPackages": ["next"]
 }

packages/telemetry/api-extractor.react.json

@@ -4,14 +4,14 @@
   "dtsRollup": {
     "enabled": true,
     "untrimmedFilePath": "<projectFolder>/dist/react/index.d.ts"
-  },
-  "apiReport": {
-    "enabled": false
-  },
-  "docModel": {
-    "enabled": false
-  },
-  "tsdocMetadata": {
-    "enabled": false
-  }
+  }//,
+  // "apiReport": {
+  //   "enabled": false
+  // },
+  // "docModel": {
+  //   "enabled": false
+  // },
+  // "tsdocMetadata": {
+  //   "enabled": false
+  // }
 }

packages/telemetry/package.json

@@ -22,8 +22,8 @@
     "./react": {
       "types": "./dist/react/index.d.ts",
       "node": {
-        "import": "./dist/react/index.node.esm.js",
-        "default": "./dist/react/index.node.cjs.js"
+        "import": "./dist/react/index.esm.js",
+        "default": "./dist/react/index.cjs.js"
       },
       "browser": {
         "require": "./dist/react/index.cjs.js",
@@ -48,9 +48,11 @@
     "test:browser": "karma start",
     "test:node": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' nyc --reporter lcovonly -- mocha **/*.test.ts src/**/*.test.ts --config ../../config/mocharc.node.js",
     "trusted-type-check": "tsec -p tsconfig.json --noEmit",
-    "api-report": "yarn api-report:main && yarn api-report:react",
-    "api-report:main": "api-extractor run --local --verbose",
-    "api-report:react": "api-extractor run --config api-extractor.react.json --local --verbose",
+    "api-report": "yarn api-report:react && yarn api-report:main",
+    "api-report:main": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' ts-node ../../repo-scripts/prune-dts/extract-public-api.ts --package telemetry --packageRoot . --typescriptDts ./dist/index.d.ts --rollupDts ./dist/index.d.ts --untrimmedRollupDts ./dist/index.d.ts --publicDts ./dist/index.d.ts",
+    "api-report:main1": "api-extractor run --local --verbose",
+    "api-report:react": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' ts-node ../../repo-scripts/prune-dts/extract-public-api.ts --package telemetry-react --packageRoot . --typescriptDts ./dist/src/react/index.d.ts --rollupDts ./dist/src/react/index.d.ts --untrimmedRollupDts ./dist/src/react/index.d.ts --publicDts ./dist/src/react/index.d.ts",
+    "api-report:react1": "api-extractor run --config api-extractor.react.json --local --verbose",
     "typings:public": "node ../../scripts/build/use_typings.js ./dist/telemetry-public.d.ts"
   },
   "peerDependencies": {

packages/telemetry/rollup.config.js

@@ -110,47 +110,8 @@ const reactBuilds = [
   }
 ];
 
-const reactNodeBuilds = [
-  {
-    input: 'src/react/index.ts',
-    output: {
-      file: pkg.exports['./react'].node.default,
-      format: 'cjs',
-      sourcemap: true,
-      banner: `'use client';`
-    },
-    plugins: [
-      typescriptPlugin({
-        typescript,
-        tsconfig: 'tsconfig.react.json'
-      }),
-      json()
-    ],
-    external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
-  },
-  {
-    input: 'src/react/index.ts',
-    output: {
-      file: pkg.exports['./react'].node.import,
-      format: 'es',
-      sourcemap: true,
-      banner: `'use client';`
-    },
-    plugins: [
-      typescriptPlugin({
-        typescript,
-        tsconfig: 'tsconfig.react.json'
-      }),
-      json(),
-      emitModulePackageFile()
-    ],
-    external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
-  }
-];
-
 export default [
   ...browserBuilds,
   ...nodeBuilds,
-  ...reactBuilds,
-  ...reactNodeBuilds
+  ...reactBuilds
 ];

packages/telemetry/src/react/index.test.tsx

@@ -30,10 +30,11 @@ import { render } from '@testing-library/react';
 use(sinonChai);
 use(chaiAsPromised);
 
-describe('FirebaseTelemetry', () => {
+describe.only('FirebaseTelemetry', () => {
   let getTelemetryStub: sinon.SinonStub;
   let captureErrorStub: sinon.SinonStub;
   let initializeAppStub: sinon.SinonStub;
+  let getAppStub: sinon.SinonStub;
   let fakeApp: FirebaseApp;
   let fakeTelemetry: Telemetry;
 
@@ -44,6 +45,7 @@ describe('FirebaseTelemetry', () => {
     initializeAppStub = stub(app, 'initializeApp').returns(fakeApp);
     getTelemetryStub = stub(telemetry, 'getTelemetry').returns(fakeTelemetry);
     captureErrorStub = stub(telemetry, 'captureError');
+    getAppStub = stub(app, 'getApp').returns(fakeApp);
   });
 
   afterEach(() => {
@@ -52,15 +54,13 @@ describe('FirebaseTelemetry', () => {
 
   it('gets telemetry with the default app if no firebaseOptions are provided', () => {
     render(<FirebaseTelemetry />);
-    expect(getTelemetryStub).to.have.been.called;
     expect(initializeAppStub).not.to.have.been.called;
   });
 
   it('initializes a new app and gets telemetry if firebaseOptions are provided', () => {
     const firebaseOptions = { apiKey: 'test' };
     render(<FirebaseTelemetry firebaseOptions={firebaseOptions} />);
     expect(initializeAppStub).to.have.been.calledWith(firebaseOptions);
-    expect(getTelemetryStub).to.have.been.calledWith(fakeApp);
   });
 
   it('captures window errors', done => {
@@ -71,6 +71,7 @@ describe('FirebaseTelemetry', () => {
     };
     window.addEventListener('error', (event: ErrorEvent) => {
       // Registers another listener (sequential) to confirm behaviour.
+      expect(getTelemetryStub).to.have.been.called;
       expect(captureErrorStub).to.have.been.calledWith(fakeTelemetry, error);
       done();
     });
@@ -85,24 +86,16 @@ describe('FirebaseTelemetry', () => {
     window.dispatchEvent(
       new PromiseRejectionEvent('unhandledrejection', { reason, promise })
     );
+    expect(getTelemetryStub).to.have.been.called;
     expect(captureErrorStub).to.have.been.calledWith(fakeTelemetry, reason);
   });
 
-  it('renders children', () => {
-    const { getByText } = render(
-      <FirebaseTelemetry>
-        <span>here are my children</span>
-      </FirebaseTelemetry>
-    );
-    expect(getByText('here are my children')).to.exist;
-  });
-
   it('fails silently when getTelemetry fails', () => {
     const error = new Error('getTelemetry failed');
-    getTelemetryStub.throws(error);
+    initializeAppStub.throws(error);
     const consoleWarnStub = stub(console, 'warn');
 
-    expect(() => render(<FirebaseTelemetry />)).not.to.throw();
+    expect(() => render(<FirebaseTelemetry firebaseOptions={{}}/>)).not.to.throw();
     expect(consoleWarnStub).to.have.been.calledWith(
       'Firebase Telemetry was not initialized:\n',
       error

packages/telemetry/src/react/index.ts

@@ -18,21 +18,43 @@
 import { FirebaseOptions, initializeApp } from '@firebase/app';
 import { registerTelemetry } from '../register';
 import { captureError, getTelemetry } from '../api';
-import { Component, ReactNode } from 'react';
+import { useEffect } from 'react';
 
 registerTelemetry();
 
-export interface FirebaseTelemetryProps {
-  firebaseOptions?: FirebaseOptions;
-  children?: ReactNode;
+function errorListener(event: ErrorEvent): void {
+  captureError(getTelemetry(), event.error, {});
 }
 
-export class FirebaseTelemetry extends Component<FirebaseTelemetryProps> {
-  constructor(public props: FirebaseTelemetryProps) {
-    super(props);
-  }
+function unhandledRejectionListener(event: PromiseRejectionEvent): void {
+  captureError(getTelemetry(), event.reason, {});
+}
 
-  componentDidMount(): void {
+/**
+ * Registers event listeners for uncaught errors.
+ *
+ * This should be installed near the root of your application. Caught errors, including those
+ * implicitly caught by Error Boundaries, will not be captured by this component.
+ *
+ * @example
+ * ```html
+ * <body>
+ *  <FirebaseTelemetry firebaseOptions={options} />
+ *  ... my app ...
+ * </body>
+ * ```
+ *
+ * @param firebaseOptions - Options to run {@link @firebase/app#initializeApp}. If this is not provided, initializeApp needs to be called explicitly elsewhere in your application.
+ * @returns The default {@link Telemetry} instance for the given {@link @firebase/app#FirebaseApp}.
+ *
+ * @public
+ */
+export function FirebaseTelemetry({
+  firebaseOptions
+}: {
+  firebaseOptions?: FirebaseOptions;
+}): null {
+  useEffect(() => {
     if (typeof window === 'undefined') {
       return;
     }
@@ -41,27 +63,23 @@ export class FirebaseTelemetry extends Component<FirebaseTelemetryProps> {
     process.env.OTEL_ENDPOINT = window.location.origin;
 
     try {
-      const telemetry = this.props.firebaseOptions
-        ? getTelemetry(initializeApp(this.props.firebaseOptions))
-        : getTelemetry();
-
-      window.addEventListener('error', (event: ErrorEvent) => {
-        captureError(telemetry, event.error, {});
-      });
-
-      window.addEventListener(
-        'unhandledrejection',
-        (event: PromiseRejectionEvent) => {
-          captureError(telemetry, event.reason, {});
-        }
-      );
+      if (firebaseOptions) {
+        initializeApp(firebaseOptions);
+      }
+      window.addEventListener('error', errorListener);
+      window.addEventListener('unhandledrejection', unhandledRejectionListener);
     } catch (error) {
       // Log the error here, but don't die.
       console.warn(`Firebase Telemetry was not initialized:\n`, error);
     }
-  }
+    return () => {
+      window.removeEventListener('error', errorListener);
+      window.removeEventListener(
+        'unhandledrejection',
+        unhandledRejectionListener
+      );
+    };
+  }, []);
 
-  render(): ReactNode {
-    return this.props.children;
-  }
+  return null;
 }