@microsoft/applicationinsights-react-js 3.3.2 → 3.3.4-nightly.2205-04

package/src/withAITracking.tsx

@@ -2,10 +2,92 @@
 // Licensed under the MIT License.
 
 import { IMetricTelemetry } from '@microsoft/applicationinsights-common';
-import { CoreUtils } from '@microsoft/applicationinsights-core-js';
+import { dateNow } from '@microsoft/applicationinsights-core-js';
 import * as React from 'react';
 import ReactPlugin from './ReactPlugin';
 
+/**
+ * Higher-order component base class to hook Application Insights tracking 
+ * in a React component's lifecycle.
+ */
+export abstract class AITrackedComponentBase<P> extends React.Component<P> {
+  protected _mountTimestamp: number = 0;
+  protected _firstActiveTimestamp: number = 0;
+  protected _idleStartTimestamp: number = 0;
+  protected _lastActiveTimestamp: number = 0;
+  protected _totalIdleTime: number = 0;
+  protected _idleCount: number = 0;
+  protected _idleTimeout: number = 5000;
+  protected _intervalId?: any;
+  protected _componentName: string;
+  protected _reactPlugin: ReactPlugin;
+
+  public constructor(props: P, reactPlugin: ReactPlugin, componentName: string) {
+    super(props);
+
+    this._reactPlugin = reactPlugin;
+    this._componentName = componentName;
+  }
+
+  public componentDidMount() {
+    this._mountTimestamp = dateNow();
+    this._firstActiveTimestamp = 0;
+    this._totalIdleTime = 0;
+    this._lastActiveTimestamp = 0;
+    this._idleStartTimestamp = 0;
+    this._idleCount = 0;
+
+    this._intervalId = setInterval(() => {
+      if (this._lastActiveTimestamp > 0 && this._idleStartTimestamp === 0 && dateNow() - this._lastActiveTimestamp >= this._idleTimeout) {
+        this._idleStartTimestamp = dateNow();
+        this._idleCount++;
+      }
+    }, 100);
+  }
+
+  public componentWillUnmount() {
+    if (this._mountTimestamp === 0) {
+      throw new Error('withAITracking:componentWillUnmount: mountTimestamp is not initialized.');
+    }
+    if (this._intervalId) {
+      clearInterval(this._intervalId);
+    }
+
+    if (this._firstActiveTimestamp === 0) {
+      return;
+    }
+
+    const engagementTime = this.getEngagementTimeSeconds();
+    const metricData: IMetricTelemetry = {
+      average: engagementTime,
+      name: 'React Component Engaged Time (seconds)',
+      sampleCount: 1
+    };
+
+    const additionalProperties: { [key: string]: any } = { 'Component Name': this._componentName };
+    this._reactPlugin.trackMetric(metricData, additionalProperties);
+  }
+
+  protected trackActivity = (e: React.SyntheticEvent<any>): void => {
+    if (this._firstActiveTimestamp === 0) {
+      this._firstActiveTimestamp = dateNow();
+      this._lastActiveTimestamp = this._firstActiveTimestamp;
+    } else {
+      this._lastActiveTimestamp = dateNow();
+    }
+
+    if (this._idleStartTimestamp > 0) {
+      const lastIdleTime = this._lastActiveTimestamp - this._idleStartTimestamp;
+      this._totalIdleTime += lastIdleTime;
+      this._idleStartTimestamp = 0;
+    }
+  }
+
+  private getEngagementTimeSeconds(): number {
+    return (dateNow() - this._firstActiveTimestamp - this._totalIdleTime - this._idleCount * this._idleTimeout) / 1000;
+  }
+}
+
 /**
  * Higher-order component function to hook Application Insights tracking 
  * in a React component's lifecycle.
@@ -18,63 +100,20 @@ import ReactPlugin from './ReactPlugin';
 export default function withAITracking<P>(reactPlugin: ReactPlugin, Component: React.ComponentType<P>, componentName?: string, className?: string): React.ComponentClass<P> {
 
   if (componentName === undefined || componentName === null || typeof componentName !== 'string') {
-    componentName = Component.prototype && 
-          Component.prototype.constructor && 
-          Component.prototype.constructor.name || 
-          'Unknown';
+    componentName = Component.prototype &&
+      Component.prototype.constructor &&
+      Component.prototype.constructor.name ||
+      'Unknown';
   }
 
   if (className === undefined || className === null || typeof className !== 'string') {
     className = '';
   }
 
-  return class extends React.Component<P> {
-    private _mountTimestamp: number = 0;
-    private _firstActiveTimestamp: number = 0;
-    private _idleStartTimestamp: number = 0;
-    private _lastActiveTimestamp: number = 0;
-    private _totalIdleTime: number = 0;
-    private _idleCount: number = 0;
-    private _idleTimeout: number = 5000;
-    private _intervalId?: any;
-
-    public componentDidMount() {
-      this._mountTimestamp = CoreUtils.dateNow();
-      this._firstActiveTimestamp = 0;
-      this._totalIdleTime = 0;
-      this._lastActiveTimestamp = 0;
-      this._idleStartTimestamp = 0;
-      this._idleCount = 0;
-
-      this._intervalId = setInterval(() => {
-        if (this._lastActiveTimestamp > 0 && this._idleStartTimestamp === 0 && CoreUtils.dateNow() - this._lastActiveTimestamp >= this._idleTimeout) {
-          this._idleStartTimestamp = CoreUtils.dateNow();
-          this._idleCount++;
-        }
-      }, 100);
-    }
-
-    public componentWillUnmount() {
-      if (this._mountTimestamp === 0) {
-        throw new Error('withAITracking:componentWillUnmount: mountTimestamp is not initialized.');
-      }
-      if (this._intervalId) {
-        clearInterval(this._intervalId);
-      }
+  return class extends AITrackedComponentBase<P> {
 
-      if (this._firstActiveTimestamp === 0) {
-        return;
-      }
-
-      const engagementTime = this.getEngagementTimeSeconds();
-      const metricData: IMetricTelemetry = {
-        average: engagementTime,
-        name: 'React Component Engaged Time (seconds)',
-        sampleCount: 1
-      };
-
-      const additionalProperties: { [key: string]: any } = { 'Component Name': componentName };
-      reactPlugin.trackMetric(metricData, additionalProperties);
+    public constructor(props: P) {
+      super(props, reactPlugin, componentName);
     }
 
     public render() {
@@ -92,24 +131,5 @@ export default function withAITracking<P>(reactPlugin: ReactPlugin, Component: R
         </div>
       );
     }
-
-    private trackActivity = (e: React.SyntheticEvent<any>): void => {
-      if (this._firstActiveTimestamp === 0) {
-        this._firstActiveTimestamp = CoreUtils.dateNow();
-        this._lastActiveTimestamp = this._firstActiveTimestamp;
-      } else {
-        this._lastActiveTimestamp = CoreUtils.dateNow();
-      }
-
-      if (this._idleStartTimestamp > 0) {
-        const lastIdleTime = this._lastActiveTimestamp - this._idleStartTimestamp;
-        this._totalIdleTime += lastIdleTime;
-        this._idleStartTimestamp = 0;
-      }
-    }
-
-    private getEngagementTimeSeconds(): number {
-      return (CoreUtils.dateNow() - this._firstActiveTimestamp - this._totalIdleTime - this._idleCount * this._idleTimeout) / 1000;
-    }
   }
 }

package/types/AppInsightsErrorBoundary.d.ts

@@ -3,6 +3,7 @@ import ReactPlugin from "./ReactPlugin";
 export interface IAppInsightsErrorBoundaryProps {
     appInsights: ReactPlugin;
     onError: React.ComponentType<any>;
+    children: React.ReactElement;
 }
 export interface IAppInsightsErrorBoundaryState {
     hasError: boolean;
@@ -12,5 +13,5 @@ export default class AppInsightsErrorBoundary extends React.Component<IAppInsigh
         hasError: boolean;
     };
     componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
-    render(): React.ReactNode;
+    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> & React.ReactNode;
 }

package/types/applicationinsights-react-js.d.ts

@@ -1,8 +1,8 @@
 import { IReactExtensionConfig } from "./Interfaces/IReactExtensionConfig";
 import ReactPlugin from "./ReactPlugin";
-import withAITracking from "./withAITracking";
+import withAITracking, { AITrackedComponentBase } from "./withAITracking";
 import AppInsightsErrorBoundary from "./AppInsightsErrorBoundary";
 import { AppInsightsContext, useAppInsightsContext } from "./AppInsightsContext";
 import useTrackEvent from "./useTrackEvent";
 import useTrackMetric from "./useTrackMetric";
-export { ReactPlugin, IReactExtensionConfig, withAITracking, AppInsightsErrorBoundary, AppInsightsContext, useAppInsightsContext, useTrackEvent, useTrackMetric };
+export { ReactPlugin, IReactExtensionConfig, withAITracking, AppInsightsErrorBoundary, AppInsightsContext, useAppInsightsContext, useTrackEvent, useTrackMetric, AITrackedComponentBase };

package/types/tsdoc-metadata.json

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

package/types/withAITracking.d.ts

@@ -1,5 +1,26 @@
 import * as React from 'react';
 import ReactPlugin from './ReactPlugin';
+/**
+ * Higher-order component base class to hook Application Insights tracking
+ * in a React component's lifecycle.
+ */
+export declare abstract class AITrackedComponentBase<P> extends React.Component<P> {
+    protected _mountTimestamp: number;
+    protected _firstActiveTimestamp: number;
+    protected _idleStartTimestamp: number;
+    protected _lastActiveTimestamp: number;
+    protected _totalIdleTime: number;
+    protected _idleCount: number;
+    protected _idleTimeout: number;
+    protected _intervalId?: any;
+    protected _componentName: string;
+    protected _reactPlugin: ReactPlugin;
+    constructor(props: P, reactPlugin: ReactPlugin, componentName: string);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    protected trackActivity: (e: React.SyntheticEvent<any>) => void;
+    private getEngagementTimeSeconds;
+}
 /**
  * Higher-order component function to hook Application Insights tracking
  * in a React component's lifecycle.