@microsoft/applicationinsights-react-js 3.3.0-beta.2203-10 → 3.3.0-beta.2203-11

package/src/ReactPlugin.ts

@@ -3,13 +3,14 @@
  * @copyright Microsoft 2019
  */
 
+import dynamicProto from "@microsoft/dynamicproto-js";
 import {
     IConfig, IPageViewTelemetry, IMetricTelemetry, IAppInsights, IEventTelemetry, IExceptionTelemetry, ITraceTelemetry
 } from "@microsoft/applicationinsights-common";
 import {
     IPlugin, IConfiguration, IAppInsightsCore,
     ITelemetryPlugin, BaseTelemetryPlugin, ITelemetryItem, IProcessTelemetryContext,
-    ITelemetryPluginChain, _InternalMessageId, LoggingSeverity, ICustomProperties, safeGetCookieMgr, ICookieMgr, arrForEach
+    ITelemetryPluginChain, _InternalMessageId, LoggingSeverity, ICustomProperties, safeGetCookieMgr, ICookieMgr, arrForEach, proxyFunctions, IProcessTelemetryUnloadContext, ITelemetryUnloadState, isFunction, objDefineAccessors
 } from "@microsoft/applicationinsights-core-js";
 import { IReactExtensionConfig } from './Interfaces/IReactExtensionConfig';
 import { History, Location, Update } from "history";
@@ -18,43 +19,129 @@ export default class ReactPlugin extends BaseTelemetryPlugin {
     public priority = 185;
     public identifier = 'ReactPlugin';
 
-    private _analyticsPlugin: IAppInsights;
-    private _extensionConfig: IReactExtensionConfig;
+    constructor() {
+        super();
+        let _analyticsPlugin: IAppInsights;
+        let _extensionConfig: IReactExtensionConfig;
+        let _unlisten: any;
+        let _pageViewTimer: any;
+
+        dynamicProto(ReactPlugin, this, (_self, _base) => {
+            _initDefaults();
+
+            _self.initialize = (config: IConfiguration & IConfig, core: IAppInsightsCore, extensions: IPlugin[], pluginChain?:ITelemetryPluginChain) => {
+                super.initialize(config, core, extensions, pluginChain);
+                _extensionConfig =
+                    config.extensionConfig && config.extensionConfig[_self.identifier]
+                        ? (config.extensionConfig[_self.identifier] as IReactExtensionConfig)
+                        : { history: null };
+        
+                arrForEach(extensions, ext => {
+                    const identifier = (ext as ITelemetryPlugin).identifier;
+                    if (identifier === 'ApplicationInsightsAnalytics') {
+                        _analyticsPlugin = (ext as any) as IAppInsights;
+                    }
+                });
+                if (_extensionConfig.history) {
+                    _addHistoryListener(_extensionConfig.history);
+                    const pageViewTelemetry: IPageViewTelemetry = {
+                        uri: _extensionConfig.history.location.pathname
+                    };
+                    _self.trackPageView(pageViewTelemetry);
+                }
+            };
 
-    initialize(config: IConfiguration & IConfig, core: IAppInsightsCore, extensions: IPlugin[], pluginChain?:ITelemetryPluginChain) {
-        super.initialize(config, core, extensions, pluginChain);
-        this._extensionConfig =
-            config.extensionConfig && config.extensionConfig[this.identifier]
-                ? (config.extensionConfig[this.identifier] as IReactExtensionConfig)
-                : { history: null };
-
-        arrForEach(extensions, ext => {
-            const identifier = (ext as ITelemetryPlugin).identifier;
-            if (identifier === 'ApplicationInsightsAnalytics') {
-                this._analyticsPlugin = (ext as any) as IAppInsights;
+            _self.getCookieMgr = (): ICookieMgr => {
+                return safeGetCookieMgr(_self.core);
+            };
+        
+            _self.getAppInsights = _getAnalytics;
+        
+            _self.processTelemetry = (event: ITelemetryItem, itemCtx?: IProcessTelemetryContext) => {
+                _self.processNext(event, itemCtx);
+            };
+        
+            _self._doTeardown = (unloadCtx?: IProcessTelemetryUnloadContext, unloadState?: ITelemetryUnloadState, asyncCallback?: () => void): void | boolean => {
+                if (isFunction(_unlisten)) {
+                    _unlisten();
+                }
+
+                if (_pageViewTimer) {
+                    clearTimeout(_pageViewTimer);
+                }
+
+                _initDefaults();
+            };
+
+            // Proxy the analytics functions
+            proxyFunctions(_self, _getAnalytics, [
+                "trackMetric",
+                "trackPageView",
+                "trackEvent",
+                "trackException",
+                "trackTrace",
+            ]);
+        
+            function _initDefaults() {
+                _analyticsPlugin = null;
+                _extensionConfig = null;
+                _unlisten = null;
+                _pageViewTimer = null;
+            }
+
+            function _getAnalytics() {
+                if (!_analyticsPlugin) {
+                    _self.diagLog().throwInternal(
+                        LoggingSeverity.CRITICAL, _InternalMessageId.TelemetryInitializerFailed, "Analytics plugin is not available, React plugin telemetry will not be sent: ");
+                }
+
+                return _analyticsPlugin;
             }
+
+            function _addHistoryListener(history: History): void {
+                const locationListener = (arg: Location | Update): void => {
+                    // v4 of the history API passes "location" as the first argument, while v5 passes an object that contains location and action 
+                    let locn: Location = null;
+                    if ("location" in arg) {
+                        // Looks like v5
+                        locn = arg["location"];
+                    } else {
+                        locn = arg as Location;
+                    }
+        
+                    // Timeout to ensure any changes to the DOM made by route changes get included in pageView telemetry
+                    _pageViewTimer = setTimeout(() => {
+                        _pageViewTimer = null;
+                        const pageViewTelemetry: IPageViewTelemetry = { uri: locn.pathname };
+                        _self.trackPageView(pageViewTelemetry);
+                    }, 500);
+                };
+
+                _unlisten = history.listen(locationListener);
+            }
+            
+            objDefineAccessors(_self, "_extensionConfig", () => _extensionConfig);
         });
-        if (this._extensionConfig.history) {
-            this.addHistoryListener(this._extensionConfig.history);
-            const pageViewTelemetry: IPageViewTelemetry = {
-                uri: this._extensionConfig.history.location.pathname
-            };
-            this.trackPageView(pageViewTelemetry);
-        }
+    }
+
+    initialize(config: IConfiguration & IConfig, core: IAppInsightsCore, extensions: IPlugin[], pluginChain?:ITelemetryPluginChain) {
+        // @DynamicProtoStub -- DO NOT add any code as this will be removed during packaging
     }
 
     /**
      * Get the current cookie manager for this instance
      */
     getCookieMgr(): ICookieMgr {
-        return safeGetCookieMgr(this.core);
+        // @DynamicProtoStub -- DO NOT add any code as this will be removed during packaging
+        return null;
     }
 
     /**
      * Get application insights instance.
      */
     getAppInsights(): IAppInsights {
-        return this._analyticsPlugin;
+        // @DynamicProtoStub -- DO NOT add any code as this will be removed during packaging
+        return null;
     }
 
     /**
@@ -62,76 +149,26 @@ export default class ReactPlugin extends BaseTelemetryPlugin {
      * @param event The event that needs to be processed
      */
     processTelemetry(event: ITelemetryItem, itemCtx?: IProcessTelemetryContext) {
-        this.processNext(event, itemCtx);
+        // @DynamicProtoStub -- DO NOT add any code as this will be removed during packaging
     }
 
     trackMetric(metric: IMetricTelemetry, customProperties: ICustomProperties) {
-        if (this._analyticsPlugin) {
-            this._analyticsPlugin.trackMetric(metric, customProperties);
-        } else {
-            this.diagLog().throwInternal(
-                LoggingSeverity.CRITICAL, _InternalMessageId.TelemetryInitializerFailed, "Analytics plugin is not available, React plugin telemetry will not be sent: ");
-        }
+        // @DynamicProtoStub -- DO NOT add any code as this will be removed during packaging
     }
 
     trackPageView(pageView: IPageViewTelemetry) {
-        if (this._analyticsPlugin) {
-            this._analyticsPlugin.trackPageView(pageView);
-        } else {
-            this.diagLog().throwInternal(
-                LoggingSeverity.CRITICAL, _InternalMessageId.TelemetryInitializerFailed, "Analytics plugin is not available, React plugin telemetry will not be sent: ");
-        }
+        // @DynamicProtoStub -- DO NOT add any code as this will be removed during packaging
     }
 
     trackEvent(event: IEventTelemetry, customProperties?: ICustomProperties) {
-        if (this._analyticsPlugin) {
-            this._analyticsPlugin.trackEvent(event, customProperties);
-        } else {
-            this.diagLog().throwInternal(
-                LoggingSeverity.CRITICAL, _InternalMessageId.TelemetryInitializerFailed, "Analytics plugin is not available, React plugin telemetry will not be sent: ");
-        }
+        // @DynamicProtoStub -- DO NOT add any code as this will be removed during packaging
     }
 
-    trackException(exception: IExceptionTelemetry, customProperties?: {
-        [key: string]: any;
-    }) {
-        if (this._analyticsPlugin) {
-            this._analyticsPlugin.trackException(exception, customProperties);
-        } else {
-            this.diagLog().throwInternal(
-                LoggingSeverity.CRITICAL, _InternalMessageId.TelemetryInitializerFailed, "Analytics plugin is not available, React plugin telemetry will not be sent: ");
-        }
+    trackException(exception: IExceptionTelemetry, customProperties?: ICustomProperties) {
+        // @DynamicProtoStub -- DO NOT add any code as this will be removed during packaging
     }
 
-    trackTrace(trace: ITraceTelemetry, customProperties?: {
-        [key: string]: any;
-    }) {
-        if (this._analyticsPlugin) {
-            this._analyticsPlugin.trackTrace(trace, customProperties);
-        } else {
-            this.diagLog().throwInternal(
-                LoggingSeverity.CRITICAL, _InternalMessageId.TelemetryInitializerFailed, "Analytics plugin is not available, React plugin telemetry will not be sent: ");
-        }
-    }
-
-
-    private addHistoryListener(history: History): void {
-        const locationListener = (arg: Location | Update): void => {
-            // v4 of the history API passes "location" as the first argument, while v5 passes an object that contains location and action 
-            let locn: Location = null;
-            if ("location" in arg) {
-                // Looks like v5
-                locn = arg["location"];
-            } else {
-                locn = arg as Location;
-            }
-
-            // Timeout to ensure any changes to the DOM made by route changes get included in pageView telemetry
-            setTimeout(() => {
-                const pageViewTelemetry: IPageViewTelemetry = { uri: locn.pathname };
-                this.trackPageView(pageViewTelemetry);
-            }, 500);
-        };
-        history.listen(locationListener);
+    trackTrace(trace: ITraceTelemetry, customProperties?: ICustomProperties) {
+        // @DynamicProtoStub -- DO NOT add any code as this will be removed during packaging
     }
 }

package/src/useTrackMetric.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { dateNow } from "@microsoft/applicationinsights-core-js";
+import { dateNow, ICustomProperties } from "@microsoft/applicationinsights-core-js";
 import ReactPlugin from "./ReactPlugin";
 
 interface ITrackedData {
@@ -24,7 +24,8 @@ function getEngagementTimeSeconds(trackedData: ITrackedData) {
 
 const useComponentTracking = (
   reactPlugin: ReactPlugin,
-  componentName: string
+  componentName: string,
+  customProperties?: ICustomProperties
 ) => {
   const tracking = useRef<ITrackedData>({
     hookTimestamp: dateNow(),
@@ -76,7 +77,7 @@ const useComponentTracking = (
         sampleCount: 1
       };
 
-      const additionalProperties = { "Component Name": componentName };
+      const additionalProperties = { "Component Name": componentName, ...customProperties };
       reactPlugin.trackMetric(metricData, additionalProperties);
     };
   }, []);

package/types/ReactPlugin.d.ts

@@ -7,8 +7,7 @@ import { IPlugin, IConfiguration, IAppInsightsCore, BaseTelemetryPlugin, ITeleme
 export default class ReactPlugin extends BaseTelemetryPlugin {
     priority: number;
     identifier: string;
-    private _analyticsPlugin;
-    private _extensionConfig;
+    constructor();
     initialize(config: IConfiguration & IConfig, core: IAppInsightsCore, extensions: IPlugin[], pluginChain?: ITelemetryPluginChain): void;
     /**
      * Get the current cookie manager for this instance
@@ -26,11 +25,6 @@ export default class ReactPlugin extends BaseTelemetryPlugin {
     trackMetric(metric: IMetricTelemetry, customProperties: ICustomProperties): void;
     trackPageView(pageView: IPageViewTelemetry): void;
     trackEvent(event: IEventTelemetry, customProperties?: ICustomProperties): void;
-    trackException(exception: IExceptionTelemetry, customProperties?: {
-        [key: string]: any;
-    }): void;
-    trackTrace(trace: ITraceTelemetry, customProperties?: {
-        [key: string]: any;
-    }): void;
-    private addHistoryListener;
+    trackException(exception: IExceptionTelemetry, customProperties?: ICustomProperties): void;
+    trackTrace(trace: ITraceTelemetry, customProperties?: ICustomProperties): void;
 }

package/types/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.19.4"
+      "packageVersion": "7.19.5"
     }
   ]
 }

package/types/useTrackMetric.d.ts

@@ -1,3 +1,4 @@
+import { ICustomProperties } from "@microsoft/applicationinsights-core-js";
 import ReactPlugin from "./ReactPlugin";
-declare const useComponentTracking: (reactPlugin: ReactPlugin, componentName: string) => () => void;
+declare const useComponentTracking: (reactPlugin: ReactPlugin, componentName: string, customProperties?: ICustomProperties) => () => void;
 export default useComponentTracking;