feat: add networkTracking plugin to analytics-browser

Author: daniel-graham-amplitude

packages/analytics-browser/package.json

@@ -45,6 +45,7 @@
     "url": "https://github.com/amplitude/Amplitude-TypeScript/issues"
   },
   "dependencies": {
+    "@amplitude/plugin-network-capture-browser": "^1.0.0",
     "@amplitude/analytics-core": "^2.11.0",
     "@amplitude/analytics-remote-config": "^0.4.0",
     "@amplitude/plugin-autocapture-browser": "^1.2.0",

packages/analytics-browser/src/browser-client.ts

@@ -26,12 +26,14 @@ import {
   getAttributionTrackingConfig,
   getPageViewTrackingConfig,
   getElementInteractionsConfig,
+  getNetworkTrackingConfig,
   isAttributionTrackingEnabled,
   isSessionTrackingEnabled,
   isFileDownloadTrackingEnabled,
   isFormInteractionTrackingEnabled,
   isElementInteractionsEnabled,
   isPageViewTrackingEnabled,
+  isNetworkTrackingEnabled,
 } from './default-tracking';
 import { convertProxyObjectToRealObject, isInstanceProxy } from './utils/snippet-helper';
 import { Context } from './plugins/context';
@@ -44,6 +46,7 @@ import { detNotify } from './det-notification';
 import { networkConnectivityCheckerPlugin } from './plugins/network-connectivity-checker';
 import { createBrowserJoinedConfigGenerator } from './config/joined-config';
 import { autocapturePlugin } from '@amplitude/plugin-autocapture-browser';
+import { plugin as networkCapturePlugin } from '@amplitude/plugin-network-capture-browser';
 import { WebAttribution } from './attribution/web-attribution';
 
 /**
@@ -154,6 +157,11 @@ export class AmplitudeBrowser extends AmplitudeCore implements BrowserClient {
       await this.add(autocapturePlugin(getElementInteractionsConfig(this.config))).promise;
     }
 
+    if (isNetworkTrackingEnabled(this.config.defaultTracking)) {
+      this.config.loggerProvider.debug('Adding network tracking plugin');
+      await this.add(networkCapturePlugin(getNetworkTrackingConfig(this.config))).promise;
+    }
+
     this.initializing = false;
 
     // Step 6: Run queued dispatch functions

packages/analytics-browser/src/config.ts

@@ -24,6 +24,7 @@ import {
   TrackingOptions,
   AutocaptureOptions,
   CookieOptions,
+  NetworkTrackingOptions,
 } from '@amplitude/analytics-core';
 
 import { LocalStorage } from './storage/local-storage';
@@ -92,6 +93,7 @@ export class BrowserConfig extends Config implements IBrowserConfig {
     userId?: string,
     pageCounter?: number,
     debugLogsEnabled?: boolean,
+    public networkTrackingOptions?: NetworkTrackingOptions,
   ) {
     super({ apiKey, storageProvider, transportProvider: createTransport(transport) });
     this._cookieStorage = cookieStorage;
@@ -104,6 +106,7 @@ export class BrowserConfig extends Config implements IBrowserConfig {
     this.userId = userId;
     this.debugLogsEnabled = debugLogsEnabled;
     this.loggerProvider.enable(debugLogsEnabled ? LogLevel.Debug : this.logLevel);
+    this.networkTrackingOptions = networkTrackingOptions;
   }
 
   get cookieStorage() {
@@ -303,6 +306,7 @@ export const useBrowserConfig = async (
     userId,
     pageCounter,
     debugLogsEnabled,
+    options.networkTrackingOptions,
   );
 
   if (!(await browserConfig.storageProvider.isEnabled())) {

packages/analytics-browser/src/default-tracking.ts

@@ -6,6 +6,7 @@ import {
   BrowserOptions,
   AutocaptureOptions,
   AttributionOptions,
+  NetworkTrackingOptions,
 } from '@amplitude/analytics-core';
 
 /**
@@ -39,6 +40,9 @@ export const isPageViewTrackingEnabled = (autocapture: AutocaptureOptions | bool
 export const isSessionTrackingEnabled = (autocapture: AutocaptureOptions | boolean | undefined) =>
   isTrackingEnabled(autocapture, 'sessions');
 
+export const isNetworkTrackingEnabled = (autocapture: AutocaptureOptions | boolean | undefined) =>
+  isTrackingEnabled(autocapture, 'networkTracking');
+
 /**
  * Returns true if
  * 1. autocapture === true
@@ -72,6 +76,13 @@ export const getElementInteractionsConfig = (config: BrowserOptions): ElementInt
   return undefined;
 };
 
+export const getNetworkTrackingConfig = (config: BrowserOptions): NetworkTrackingOptions | undefined => {
+  if (isNetworkTrackingEnabled(config.autocapture) && config.networkTrackingOptions) {
+    return config.networkTrackingOptions;
+  }
+  return;
+};
+
 export const getPageViewTrackingConfig = (config: BrowserOptions): PageTrackingOptions => {
   let trackOn: PageTrackingTrackOn | undefined = () => false;
   let trackHistoryChanges: PageTrackingHistoryChanges | undefined = undefined;

packages/analytics-core/src/types/browser-config.ts

@@ -159,6 +159,11 @@ export interface AutocaptureOptions {
    * @defaultValue `false`
    */
   elementInteractions?: boolean | ElementInteractionsOptions;
+  /**
+   * Enables/disables network request tracking.
+   * @defaultValue `false`
+   */
+  networkTracking?: boolean;
 }
 
 export interface TrackingOptions {