add custom headers to track web frameworks usage

Author: stephenarosaj

packages/data-connect/src/api/DataConnect.ts

@@ -92,6 +92,9 @@ export class DataConnect {
   private _transportOptions?: TransportOptions;
   private _authTokenProvider?: AuthTokenProvider;
   _isUsingGeneratedSdk: boolean = false;
+  _isUsingTanStackSdk: boolean = false;
+  _isUsingReactSdk: boolean = false;
+  _isUsingAngularFireSdk: boolean = false;
   private _appCheckTokenProvider?: AppCheckTokenProvider;
   // @internal
   constructor(
@@ -116,6 +119,24 @@ export class DataConnect {
       this._isUsingGeneratedSdk = true;
     }
   }
+  // @internal
+  _useTanStackSdk(): void {
+    if (!this._isUsingTanStackSdk) {
+      this._isUsingTanStackSdk = true;
+    }
+  }
+  // @internal
+  _useReactSdk(): void {
+    if (!this._isUsingReactSdk) {
+      this._isUsingReactSdk = true;
+    }
+  }
+  // @internal
+  _useAngularFireSdk(): void {
+    if (!this._isUsingAngularFireSdk) {
+      this._isUsingAngularFireSdk = true;
+    }
+  }
   _delete(): Promise<void> {
     _removeServiceInstance(
       this.app,
@@ -164,7 +185,10 @@ export class DataConnect {
       this._authTokenProvider,
       this._appCheckTokenProvider,
       undefined,
-      this._isUsingGeneratedSdk
+      this._isUsingGeneratedSdk,
+      this._isUsingTanStackSdk,
+      this._isUsingReactSdk,
+      this._isUsingAngularFireSdk
     );
     if (this._transportOptions) {
       this._transport.useEmulator(

packages/data-connect/src/network/fetch.ts

@@ -30,6 +30,27 @@ function getGoogApiClientValue(_isUsingGen: boolean): string {
   }
   return str;
 }
+function getWebFrameworkValue(
+  _isUsingTanStack: boolean,
+  _isUsingReact: boolean,
+  _isUsingAngularFire: boolean
+): string {
+  let str = '';
+  if (_isUsingTanStack) {
+    str += ' tanstack/';
+  }
+  if (_isUsingReact) {
+    str += ' react/';
+  }
+  if (_isUsingAngularFire) {
+    str += ' angularfire/';
+  }
+  // no framework SDK used
+  if (str === '') {
+    str = 'vanilla/';
+  }
+  return str.trim();
+}
 export interface DataConnectFetchBody<T> {
   name: string;
   operationName: string;
@@ -42,14 +63,22 @@ export function dcFetch<T, U>(
   appId: string | null,
   accessToken: string | null,
   appCheckToken: string | null,
-  _isUsingGen: boolean
+  _isUsingGen: boolean,
+  _isUsingTanStack: boolean,
+  _isUsingReact: boolean,
+  _isUsingAngularFire: boolean
 ): Promise<{ data: T; errors: Error[] }> {
   if (!connectFetch) {
     throw new DataConnectError(Code.OTHER, 'No Fetch Implementation detected!');
   }
   const headers: HeadersInit = {
     'Content-Type': 'application/json',
-    'X-Goog-Api-Client': getGoogApiClientValue(_isUsingGen)
+    'X-Goog-Api-Client': getGoogApiClientValue(_isUsingGen),
+    'X-Firebase-DataConnect-Web-Frameworks': getWebFrameworkValue(
+      _isUsingTanStack,
+      _isUsingReact,
+      _isUsingAngularFire
+    )
   };
   if (accessToken) {
     headers['X-Firebase-Auth-Token'] = accessToken;

packages/data-connect/src/network/transport/index.ts

@@ -45,5 +45,8 @@ export type TransportClass = new (
   authProvider?: AuthTokenProvider,
   appCheckProvider?: AppCheckTokenProvider,
   transportOptions?: TransportOptions,
-  _isUsingGen?: boolean
+  _isUsingGen?: boolean,
+  _isUsingTanStack?: boolean,
+  _isUsingReact?: boolean,
+  _isUsingAngularFire?: boolean
 ) => DataConnectTransport;

packages/data-connect/src/network/transport/rest.ts

@@ -43,7 +43,10 @@ export class RESTTransport implements DataConnectTransport {
     private authProvider?: AuthTokenProvider | undefined,
     private appCheckProvider?: AppCheckTokenProvider | undefined,
     transportOptions?: TransportOptions | undefined,
-    private _isUsingGen = false
+    private _isUsingGen = false,
+    private _isUsingReact = false,
+    private _isUsingAngularFire = false,
+    private _isUsingTanStack = false
   ) {
     if (transportOptions) {
       if (typeof transportOptions.port === 'number') {
@@ -180,7 +183,10 @@ export class RESTTransport implements DataConnectTransport {
         this.appId,
         this._accessToken,
         this._appCheckToken,
-        this._isUsingGen
+        this._isUsingGen,
+        this._isUsingTanStack,
+        this._isUsingReact,
+        this._isUsingAngularFire
       )
     );
     return withAuth;
@@ -205,7 +211,10 @@ export class RESTTransport implements DataConnectTransport {
         this.appId,
         this._accessToken,
         this._appCheckToken,
-        this._isUsingGen
+        this._isUsingGen,
+        this._isUsingTanStack,
+        this._isUsingReact,
+        this._isUsingAngularFire
       );
     });
     return taskResult;

packages/data-connect/test/unit/fetch.test.ts

@@ -51,6 +51,9 @@ describe('fetch', () => {
         null,
         null,
         null,
+        false,
+        false,
+        false,
         false
       )
     ).to.eventually.be.rejectedWith(message);
@@ -74,6 +77,9 @@ describe('fetch', () => {
         null,
         null,
         null,
+        false,
+        false,
+        false,
         false
       )
     ).to.eventually.be.rejectedWith(JSON.stringify(json));