Fix package structure; capture client errors

Author: andrewbrook

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;

packages/telemetry/api-extractor.json

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

packages/telemetry/api-extractor.react.json

@@ -1,6 +1,6 @@
 {
   "extends": "../../config/api-extractor.json",
-  "mainEntryPointFilePath": "<projectFolder>/dist/react/index.d.ts",
+  "mainEntryPointFilePath": "<projectFolder>/dist/react/react/index.d.ts",
   "dtsRollup": {
     "enabled": true,
     "untrimmedFilePath": "<projectFolder>/dist/react/index.d.ts"

packages/telemetry/package.json

@@ -22,14 +22,14 @@
     "./react": {
       "types": "./dist/react/index.d.ts",
       "node": {
-        "import": "./dist/react-node-esm/index.node.esm.js",
-        "default": "./dist/react.node.cjs.js"
+        "import": "./dist/react/index.node.esm.js",
+        "default": "./dist/react/index.node.cjs.js"
       },
       "browser": {
-        "require": "./dist/react.cjs.js",
-        "import": "./dist/react.esm.js"
+        "require": "./dist/react/index.cjs.js",
+        "import": "./dist/react/index.esm.js"
       },
-      "default": "./dist/react.esm.js"
+      "default": "./dist/react/index.esm.js"
     },
     "./package.json": "./package.json"
   },

packages/telemetry/rollup.config.js

@@ -85,11 +85,7 @@ const reactBuilds = [
     plugins: [
       typescriptPlugin({
         typescript,
-        tsconfigOverride: {
-          compilerOptions: {
-            declarationDir: 'dist/react'
-          }
-        }
+        tsconfig: 'tsconfig.react.json'
       }),
       json()
     ],
@@ -106,11 +102,7 @@ const reactBuilds = [
     plugins: [
       typescriptPlugin({
         typescript,
-        tsconfigOverride: {
-          compilerOptions: {
-            declarationDir: 'dist/react'
-          }
-        }
+        tsconfig: 'tsconfig.react.json'
       }),
       json()
     ],
@@ -130,11 +122,7 @@ const reactNodeBuilds = [
     plugins: [
       typescriptPlugin({
         typescript,
-        tsconfigOverride: {
-          compilerOptions: {
-            declarationDir: 'dist/react'
-          }
-        }
+        tsconfig: 'tsconfig.react.json'
       }),
       json()
     ],
@@ -151,11 +139,7 @@ const reactNodeBuilds = [
     plugins: [
       typescriptPlugin({
         typescript,
-        tsconfigOverride: {
-          compilerOptions: {
-            declarationDir: 'dist/react'
-          }
-        }
+        tsconfig: 'tsconfig.react.json'
       }),
       json(),
       emitModulePackageFile()

packages/telemetry/src/react/index.ts

@@ -1,18 +1,37 @@
-import React from 'react';
+import { getApp } from '@firebase/app';
+import { captureError, getTelemetry } from '../api';
+import { Component, ReactNode } from 'react';
 
 export interface FirebaseTelemetryBoundaryProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
-export class FirebaseTelemetryBoundary extends React.Component<FirebaseTelemetryBoundaryProps> {
+export class FirebaseTelemetryBoundary extends Component<FirebaseTelemetryBoundaryProps> {
   constructor(public props: FirebaseTelemetryBoundaryProps) {
     super(props);
+  }
+
+  componentDidMount(): void {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    // TODO: This will be obsolete once the SDK has a default endpoint
+    process.env.OTEL_ENDPOINT = window.location.origin;
+
+    const telemetry = getTelemetry(getApp());
+
+    console.info(telemetry);
+
+    window.addEventListener('error', (event: ErrorEvent) => {
+      captureError(telemetry, event.error, {'example_attribute': 'hello'});
+    });
+
+    // TODO: add listener for unhandledrejection
 
-    console.info('init firebase telemetry boundary');
   }
 
-  render(): React.ReactNode {
-    console.info('abc');
+  render(): ReactNode {
     return this.props.children;
   }
 }