Remove dependecy on applicationinsights-react-js & add EngagementTracker

sample/applicationinsights-react-sample/package.json

@@ -6,7 +6,6 @@
  "license": "MIT",
  "dependencies": {
  "@microsoft/applicationinsights-core-js": "^3.0.5",
- "@microsoft/applicationinsights-react-js": "17.0.2",
  "@microsoft/applicationinsights-web": "^3.0.5",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",

sample/applicationinsights-react-sample/src/App.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { AppInsightsContext } from '@microsoft/applicationinsights-react-js';
-import { reactPlugin } from './ApplicationInsightsService';
 import TestComponent from './TestComponent';
 import './App.css';
+import { EngagementTracker } from './EngagementTracker';
 
 function App() {
  return (
@@ -12,9 +12,7 @@ function App() {
  Home
  </p>
  </header>
- <AppInsightsContext.Provider value={reactPlugin}>
  <TestComponent/>
- </AppInsightsContext.Provider>
  </div>
  );
 }

sample/applicationinsights-react-sample/src/ApplicationInsightsService.tsx

@@ -1,11 +1,8 @@
 import {ApplicationInsights, ITelemetryItem} from '@microsoft/applicationinsights-web';
-import {ReactPlugin} from '@microsoft/applicationinsights-react-js';
 
-const reactPlugin = new ReactPlugin();
 const appInsights = new ApplicationInsights({
  config: {
- connectionString: "instrumentationKey=test",
- extensions: [reactPlugin],
+ connectionString: "InstrumentationKey=<TO-BE-REPLACED>",
  enableAutoRouteTracking: true,
  disableAjaxTracking: false,
  autoTrackPageVisitTime: true,
@@ -21,7 +18,7 @@ appInsights.addTelemetryInitializer((env:ITelemetryItem) => {
  env.tags["ai.cloud.role"] = "testTag";
 });
 
-export { reactPlugin, appInsights };
+export { appInsights };
 
 
 

sample/applicationinsights-react-sample/src/EngagementTracker.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect } from "react";
+import { appInsights } from "./ApplicationInsightsService";
+
+type EngagementTrackerProps = {
+ readonly name: string;
+ readonly children: React.ReactNode;
+};
+
+export function EngagementTracker({ name, children }: EngagementTrackerProps) {
+ const displayedTimestamp = React.useRef<number | null>(null);
+ useEffect(() => {
+ document.addEventListener('visibilitychange', handleVisibilityChange);
+ displayedTimestamp.current = Date.now();
+ return () => {
+ document.removeEventListener('visibilitychange', handleVisibilityChange);
+ if (displayedTimestamp.current !== null) {
+ sendMetric("unrendered");
+
+ }
+ };
+ }, []);
+ const handleVisibilityChange = () => {
+ if (document.visibilityState === 'visible' && displayedTimestamp.current === null) {
+ displayedTimestamp.current = Date.now();
+ } else if (document.visibilityState === 'hidden') {
+ sendMetric("hidden");
+ }
+ };
+ const sendMetric = (displayFinishedCause: string) => {
+ if (displayedTimestamp.current !== null) {
+ const displayDuration = Date.now() - displayedTimestamp.current;
+ displayedTimestamp.current = null;
+ if (displayDuration > 0) {
+ appInsights.trackMetric({
+ name: `${name} display duration (s)`,
+ average: displayDuration / 1000,
+ properties: { displayFinishedCause: displayFinishedCause }
+ });
+ }
+ }
+ }
+ return <>{children}</>;
+}

sample/applicationinsights-react-sample/src/TestComponent.tsx

@@ -1,16 +1,9 @@
 import React from 'react';
 import { useEffect, useState } from "react";
-import { useAppInsightsContext, useTrackEvent } from "@microsoft/applicationinsights-react-js";
+import { EngagementTracker } from './EngagementTracker';
 
 const TestComponent = () => {
- const appInsights = useAppInsightsContext();
  const [testNumber, setTestNumber] = useState(0);
-
- const trackEvent = useTrackEvent(appInsights, "TestNumber", testNumber);
-
- useEffect(() => {
- trackEvent(testNumber);
- }, [testNumber, trackEvent]);
 
  function onClick() {
  let curTestNumber = testNumber;
@@ -21,6 +14,7 @@ const TestComponent = () => {
  }
 
  return (
+ <EngagementTracker name={TestComponent.name}>
  <div className="App">
  <h1>Test <code>useAppInsightsContext</code></h1>
  <div>
@@ -29,6 +23,7 @@ const TestComponent = () => {
  <button onClick={onClick2}>TEST</button>
  </div>
  </div>
+ </EngagementTracker>
  );
 };