feature: tracking app metrics for web olny (microsoft#712)

* feature: tracking app metrics for web only

1. tracking app version with every metric
1. tracking router/page changes
1. tracking exception
    * include error type and message
    * uncaught exception are handled automatically by AppInsights
    * caught exception are handle manually
1. tracking redux actions
    * only tracking action type

Author: mydiemho

.env.development

@@ -0,0 +1 @@
+REACT_APP_INSTRUMENTATION_KEY=40a80c0c-b913-45b7-afc9-c7eb3ed62900

.env.production

@@ -0,0 +1 @@
+REACT_APP_INSTRUMENTATION_KEY=0b9e5117-c78d-40c9-9338-921092cde49a

.env.test

@@ -1 +1,2 @@
 HOST_TYPE=electron
+INSTRUMENTATION_KEY=40a80c0c-b913-45b7-afc9-c7eb3ed62900

package-lock.json

@@ -21,12 +21,14 @@
         "bootstrap": "^4.1.3",
         "buffer-reverse": "^1.0.1",
         "crypto-js": "^3.1.9-1",
+        "dotenv": "^7.0.0",
         "google-protobuf": "^3.6.1",
         "lodash": "^4.17.11",
         "md5.js": "^1.3.5",
         "node-int64": "^0.4.0",
         "rc-menu": "^7.4.21",
         "react": "^16.7.0",
+        "react-appinsights": "^3.0.0-rc.5",
         "react-dom": "^16.7.0",
         "react-jsonschema-form": "^1.3.0",
         "react-localization": "^1.0.13",
@@ -85,6 +87,7 @@
     "devDependencies": {
         "@fortawesome/fontawesome-free": "^5.5.0",
         "@types/axios": "^0.14.0",
+        "@types/dotenv": "^6.1.0",
         "@types/enzyme": "^3.1.15",
         "@types/jest": "23.3.9",
         "@types/node": "10.12.7",
@@ -97,7 +100,6 @@
         "@types/reactstrap": "^6.4.3",
         "@types/redux-logger": "^3.0.6",
         "@types/redux-mock-store": "^1.0.0",
-        "@types/redux-thunk": "^2.1.0",
         "cross-env": "^5.2.0",
         "electron": "^3.0.13",
         "electron-builder": "^20.38.3",

package.json

@@ -5,7 +5,7 @@ import createReduxStore from "./redux/store/store";
 import initialState from "./redux/store/initialState";
 import { IApplicationState } from "./models//applicationState";
 import { mount } from "enzyme";
-import { HashRouter } from "react-router-dom";
+import { Router } from "react-router-dom";
 import { KeyboardManager } from "./react/components/common/keyboardManager/keyboardManager";
 import { ErrorHandler } from "./react/components/common/errorHandler/errorHandler";
 
@@ -27,7 +27,7 @@ describe("App Component", () => {
 
     it("renders required top level components", () => {
         const wrapper = createComponent();
-        expect(wrapper.find(HashRouter).exists()).toBe(true);
+        expect(wrapper.find(Router).exists()).toBe(true);
         expect(wrapper.find(KeyboardManager).exists()).toEqual(true);
         expect(wrapper.find(ErrorHandler).exists()).toEqual(true);
     });

src/App.test.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment } from "react";
 import { connect } from "react-redux";
-import { HashRouter as Router, NavLink, Link } from "react-router-dom";
+import { Router } from "react-router-dom";
 import { ToastContainer } from "react-toastify";
 import Sidebar from "./react/components/shell/sidebar";
 import MainContentRouter from "./react/components/shell/mainContentRouter";
@@ -15,6 +15,7 @@ import { TitleBar } from "./react/components/shell/titleBar";
 import { StatusBar } from "./react/components/shell/statusBar";
 import { StatusBarMetrics } from "./react/components/shell/statusBarMetrics";
 import { HelpMenu } from "./react/components/shell/helpMenu";
+import history from "./history";
 
 interface IAppProps {
     currentProject?: IProject;
@@ -73,7 +74,7 @@ export default class App extends React.Component<IAppProps> {
                 {/* Don't render app contents during a render error */}
                 {(!this.props.appError || this.props.appError.errorCode !== ErrorCode.GenericRenderError) &&
                     <KeyboardManager>
-                        <Router>
+                        <Router history={history}>
                             <div className={`app-shell platform-${platform}`}>
                                 <TitleBar icon="fas fa-tags"
                                     title={this.props.currentProject ? this.props.currentProject.name : ""}>

src/App.tsx

@@ -43,4 +43,8 @@ function getHostProcess(): IHostProcess {
     };
 }
 
+export function isElectron(): boolean {
+    return getHostProcess().type === HostProcessType.Electron;
+}
+
 export default getHostProcess;

src/common/hostProcess.ts

@@ -0,0 +1,2 @@
+import { createHashHistory } from "history";
+export default createHashHistory();

src/history.ts

@@ -13,14 +13,18 @@ import { IApplicationState } from "./models/applicationState";
 import registerProviders from "./registerProviders";
 import registerMixins from "./registerMixins";
 
+import { setUpAppInsights } from "./telemetry";
+
+setUpAppInsights();
+
 registerMixins();
 registerProviders();
 const defaultState: IApplicationState = initialState;
 const store = createReduxStore(defaultState, true);
 
 ReactDOM.render(
     <Provider store={store}>
-        <App />
+        <App/>
     </Provider>
     , document.getElementById("root"));
 

src/index.tsx

@@ -3,6 +3,7 @@ import { IAppError, ErrorCode, AppError } from "../../../../models/applicationSt
 import { strings } from "../../../../common/strings";
 import Alert from "../alert/alert";
 import { Env } from "../../../../common/environment";
+import { trackError } from "../../../../telemetry";
 
 /**
  * Component properties for ErrorHandler component
@@ -120,6 +121,10 @@ export class ErrorHandler extends React.Component<IErrorHandlerProps> {
                 message: this.getUnknownErrorMessage(error),
             };
         }
+
+        // appInsights: track error event
+        trackError(appError);
+
         this.props.onError(appError);
     }
 

src/react/components/common/errorHandler/errorHandler.tsx

@@ -0,0 +1,34 @@
+import { trackReduxAction } from "../../telemetry";
+import { createAppInsightsLogger } from "./appInsights";
+jest.mock("../../telemetry");
+
+describe("appInsights middleware", () => {
+    const create = () => {
+        const appInsightsLogger = createAppInsightsLogger();
+
+        const store = {
+            getState: jest.fn(() => ({})),
+            dispatch: jest.fn(),
+        };
+
+        const next = jest.fn();
+        const invoke = (action) => appInsightsLogger(store)(next)(action);
+
+        return { store, next, invoke};
+    };
+
+    it("calls trackReduxAction", () => {
+        const { invoke } = create();
+        const action = { type: "TEST"};
+        invoke(action);
+
+        expect(trackReduxAction).toHaveBeenCalledWith(action);
+    });
+
+    it("passes through non-function action", () => {
+        const { next, invoke } = create();
+        const action = { type: "TEST" };
+        invoke(action);
+        expect(next).toHaveBeenCalledWith(action);
+    });
+});

src/redux/middleware/appInsights.test.ts

@@ -0,0 +1,12 @@
+import { AnyAction, Dispatch, Middleware, MiddlewareAPI } from "redux";
+import { trackReduxAction } from "../../telemetry";
+
+/**
+ * return a middleware that send custom event to AppInsights tracking redux action
+ */
+export function createAppInsightsLogger(): Middleware {
+    return (store: MiddlewareAPI<Dispatch<AnyAction>>) => (next: Dispatch<AnyAction>) => (action: any) => {
+        trackReduxAction(action);
+        return next(action);
+    };
+}

src/redux/middleware/appInsights.ts

@@ -3,6 +3,7 @@ import thunk from "redux-thunk";
 import rootReducer from "../reducers";
 import { IApplicationState } from "../../models/applicationState";
 import { mergeInitialState } from "../middleware/localStorage";
+import { createAppInsightsLogger } from "../middleware/appInsights";
 import { Env } from "../../common/environment";
 
 /**
@@ -15,7 +16,7 @@ export default function createReduxStore(
     useLocalStorage: boolean = false): Store {
     const paths: string[] = ["appSettings", "connections", "recentProjects"];
 
-    let middlewares = [thunk];
+    let middlewares = [thunk, createAppInsightsLogger()];
 
     if (useLocalStorage) {
         const localStorage = require("../middleware/localStorage");