WIP react support

Author: andrewbrook

config/webpack.test.js

@@ -94,7 +94,7 @@ module.exports = {
   resolve: {
     modules: ['node_modules', path.resolve(__dirname, '../../node_modules')],
     mainFields: ['browser', 'module', 'main'],
-    extensions: ['.js', '.ts'],
+    extensions: ['.js', '.ts', '.tsx'],
     symlinks: true
   },
   plugins: [

packages/telemetry/index.node.ts

@@ -29,3 +29,4 @@ registerTelemetry();
 export * from './src/api';
 export * from './src/public-types';
 export * from './src/next';
+export * from './src/react';

packages/telemetry/index.ts

@@ -22,3 +22,4 @@ registerTelemetry();
 export * from './src/api';
 export * from './src/public-types';
 export * from './src/next';
+export * from './src/react';

packages/telemetry/karma.conf.js

@@ -17,12 +17,15 @@
 
 const karmaBase = require('../../config/karma.base');
 
-const files = [`src/**/*.test.ts`];
+const files = [`src/**/*.test.ts*`];
 
 module.exports = function (config) {
   const karmaConfig = {
     ...karmaBase,
     files,
+    preprocessors: {
+      'src/**/*.test.ts*': ['webpack', 'sourcemap']
+    },
     frameworks: ['mocha']
   };
 

packages/telemetry/package.json

@@ -41,7 +41,9 @@
   },
   "peerDependencies": {
     "@firebase/app": "0.x",
-    "@firebase/app-types": "0.x"
+    "@firebase/app-types": "0.x",
+    "@types/react": "19.x",
+    "react": "19.x"
   },
   "dependencies": {
     "@firebase/component": "0.7.0",
@@ -52,15 +54,20 @@
     "@opentelemetry/otlp-transformer": "0.205.0",
     "@opentelemetry/resources": "2.0.1",
     "@opentelemetry/sdk-logs": "0.203.0",
-    "@opentelemetry/semantic-conventions": "1.36.0",
+    "@opentelemetry/semantic-conventions": "1.36.0",    
     "tslib": "^2.1.0"
   },
   "license": "Apache-2.0",
   "devDependencies": {
     "@firebase/app": "0.14.2",
     "@opentelemetry/sdk-trace-web": "2.1.0",
     "@rollup/plugin-json": "6.1.0",
+    "@testing-library/dom": "10.4.1",
+    "@testing-library/react": "16.3.0",
+    "@types/react": "19.1.13",
     "next": "15.5.2",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
     "rollup": "2.79.2",
     "rollup-plugin-replace": "2.2.0",
     "rollup-plugin-typescript2": "0.36.0",

packages/telemetry/src/react.test.tsx

@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { expect, use } from 'chai';
+import sinonChai from 'sinon-chai';
+import chaiAsPromised from 'chai-as-promised';
+import { restore, stub } from 'sinon';
+import * as app from '@firebase/app';
+import * as telemetry from './api';
+import { FirebaseApp } from '@firebase/app';
+import { Telemetry } from './public-types';
+import { FirebaseTelemetryBoundary } from './react';
+import React from 'react';
+import { render } from '@testing-library/react';
+
+use(sinonChai);
+use(chaiAsPromised);
+
+describe('firebaseTelemetryBoundary', () => {
+  let getTelemetryStub: sinon.SinonStub;
+  // let captureErrorStub: sinon.SinonStub;
+  let fakeApp: FirebaseApp;
+  let fakeTelemetry: Telemetry;
+
+  beforeEach(() => {
+    fakeApp = {} as FirebaseApp;
+    fakeTelemetry = {} as Telemetry;
+
+    stub(app, 'getApp').returns(fakeApp);
+    getTelemetryStub = stub(telemetry, 'getTelemetry').returns(fakeTelemetry);
+    // captureErrorStub = stub(telemetry, 'captureError');
+  });
+
+  afterEach(() => {
+    restore();
+  });
+
+  it('does something else', async () => {
+    render(<FirebaseTelemetryBoundary><span>here are my children</span></FirebaseTelemetryBoundary>);
+
+    expect(1).to.equal(1);
+  });
+});

packages/telemetry/src/react.tsx

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+console.log(React);
+
+
+export interface FirebaseTelemetryBoundaryProps {
+  children: React.ReactNode;
+}
+
+export class FirebaseTelemetryBoundary extends React.Component<FirebaseTelemetryBoundaryProps> {
+  constructor(public props: FirebaseTelemetryBoundaryProps) {
+    super(props);
+
+    console.info('init firebase telemetry boundary');
+  }
+
+  render(): React.ReactNode {
+    console.info('abc');
+    return this.props.children;
+  }
+}

packages/telemetry/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "../../config/tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "dist"
+    "outDir": "dist",
+    "jsx": "react"
   },
   "exclude": ["dist/**/*"]
 }