feat: telemetry api

Composer/packages/client/__tests__/components/CreationFlow/index.test.tsx

@@ -30,6 +30,7 @@ describe('<CreationFlow/>', () => {
       setCreationFlowStatus: jest.fn(),
       navTo: jest.fn(),
       saveTemplateId: jest.fn(),
+      setCurrentPageMode: jest.fn(),
     });
     set(creationFlowStatusState, CreationFlowStatus.NEW_FROM_TEMPLATE);
     set(featureFlagsState, getDefaultFeatureFlags());

Composer/packages/client/src/App.tsx

@@ -11,6 +11,7 @@ import { MainContainer } from './components/AppComponents/MainContainer';
 import { userSettingsState } from './recoilModel';
 import { loadLocale } from './utils/fileUtil';
 import { dispatcherState } from './recoilModel/DispatcherWrapper';
+import { useInitializeLogger } from './telemetry/hooks';
 
 initializeIcons(undefined, { disableWarnings: true });
 
@@ -28,6 +29,8 @@ export const App: React.FC = () => {
     fetchServerSettings();
   }, []);
 
+  useInitializeLogger();
+
   return (
     <Fragment key={appLocale}>
       <Announcement />

Composer/packages/client/src/pages/home/Home.tsx

@@ -3,7 +3,7 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import formatMessage from 'format-message';
 import { Link } from 'office-ui-fabric-react/lib/Link';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
@@ -60,11 +60,19 @@ const Home: React.FC<RouteComponentProps> = () => {
   const botName = useRecoilValue(botDisplayNameState(projectId));
   const recentProjects = useRecoilValue(recentProjectsState);
   const templateId = useRecoilValue(templateIdState);
-  const { openProject, setCreationFlowStatus, onboardingAddCoachMarkRef, saveTemplateId } = useRecoilValue(
-    dispatcherState
-  );
+  const {
+    openProject,
+    setCreationFlowStatus,
+    onboardingAddCoachMarkRef,
+    saveTemplateId,
+    setCurrentPageMode,
+  } = useRecoilValue(dispatcherState);
   const filteredTemplates = useRecoilValue(filteredTemplatesSelector);
 
+  useEffect(() => {
+    setCurrentPageMode('home');
+  }, []);
+
   const onItemChosen = async (item) => {
     if (item && item.path) {
       openProject(item.path);

Composer/packages/client/src/telemetry/__tests__/applicationInsightsLogger.test.ts

@@ -0,0 +1,50 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { TelemetryEventTypes } from '@bfc/shared';
+
+import httpClient from '../../utils/httpUtil';
+import { getApplicationInsightsLogger } from '../applicationInsightsLogger';
+
+jest.mock('../../utils/httpUtil');
+
+describe('Application Insights Logger', () => {
+  it('should log event to the server', async () => {
+    (httpClient.post as jest.Mock).mockResolvedValue({});
+
+    const eventLogger = getApplicationInsightsLogger();
+    eventLogger.logEvent('TestEvent', { value: '1' });
+    eventLogger.flush();
+
+    expect(httpClient.post).toBeCalledWith(
+      '/telemetry/event',
+      expect.objectContaining({
+        type: TelemetryEventTypes.TrackEvent,
+        name: 'TestEvent',
+        properties: {
+          value: '1',
+        },
+      })
+    );
+  });
+
+  it('should log page views to the server', async () => {
+    (httpClient.post as jest.Mock).mockResolvedValue({});
+
+    const eventLogger = getApplicationInsightsLogger();
+    eventLogger.logPageView('TestEvent', 'https://composer', { value: '1' });
+    eventLogger.flush();
+
+    expect(httpClient.post).toBeCalledWith(
+      '/telemetry/event',
+      expect.objectContaining({
+        type: TelemetryEventTypes.PageView,
+        name: 'TestEvent',
+        url: 'https://composer',
+        properties: {
+          value: '1',
+        },
+      })
+    );
+  });
+});

Composer/packages/client/src/telemetry/__tests__/telemtryLogger.test.ts

@@ -0,0 +1,43 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { addPropsToLogger } from '../telemetryLogger';
+
+describe('addPropsToLogger', () => {
+  it('adds property to logEvent', () => {
+    const mockLogger = {
+      logEvent: jest.fn(),
+      logPageView: jest.fn(),
+      flush: jest.fn(),
+    };
+
+    const logger = addPropsToLogger(mockLogger, { prop1: 'prop1' });
+    logger.logEvent('Test', { prop0: 'prop0' });
+    expect(mockLogger.logEvent).toBeCalledWith(
+      'Test',
+      expect.objectContaining({
+        prop0: 'prop0',
+        prop1: 'prop1',
+      })
+    );
+  });
+
+  it('adds property to logPageView', () => {
+    const mockLogger = {
+      logEvent: jest.fn(),
+      logPageView: jest.fn(),
+      flush: jest.fn(),
+    };
+
+    const logger = addPropsToLogger(mockLogger, { prop1: 'prop1' });
+    logger.logPageView('Test', 'https://composer', { prop0: 'prop0' });
+    expect(mockLogger.logPageView).toBeCalledWith(
+      'Test',
+      'https://composer',
+      expect.objectContaining({
+        prop0: 'prop0',
+        prop1: 'prop1',
+      })
+    );
+  });
+});

Composer/packages/client/src/telemetry/applicationInsightsLogger.ts

@@ -0,0 +1,60 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { LogData, TelemetryLogger, TelemetryEventTypes } from '@bfc/shared';
+
+import httpClient from '../utils/httpUtil';
+
+type Event = {
+  type: TelemetryEventTypes;
+  name: string;
+  url?: string;
+  properties?: LogData;
+};
+
+export const appInsightsLogger = (): TelemetryLogger => {
+  const events: Event[] = [];
+
+  const shift = async () => {
+    const event = events.shift();
+    if (event) {
+      try {
+        await httpClient.post('/telemetry/event', event);
+      } catch (error) {
+        // Swallow error to avoid crashing the app while sending telemetry
+      }
+    }
+  };
+
+  setInterval(() => {
+    shift();
+  }, 5000);
+
+  const logEvent = (name: string, properties?: LogData) => {
+    events.push({ type: TelemetryEventTypes.TrackEvent, name, properties });
+  };
+
+  const logPageView = (name: string, url: string, properties?: LogData) => {
+    events.push({ type: TelemetryEventTypes.PageView, name, url, properties });
+  };
+
+  const flush = () => {
+    while (events.length) {
+      shift();
+    }
+  };
+
+  return {
+    logEvent,
+    logPageView,
+    flush,
+  };
+};
+
+const logger = {
+  current: appInsightsLogger(),
+};
+
+export const getApplicationInsightsLogger = () => {
+  return logger.current;
+};

Composer/packages/client/src/telemetry/consoleLogger.ts

@@ -0,0 +1,25 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { LogData, TelemetryLogger } from '@bfc/shared';
+import noop from 'lodash/noop';
+
+export const consoleLogger = (): TelemetryLogger => {
+  const logEvent = (name: string, properties?: LogData) => {
+    console.log('bfc-telemetry:', { name, properties });
+  };
+
+  const logPageView = (name: string, url: string, properties?: LogData) => {
+    console.log('bfc-telemetry:', { name, url, properties });
+  };
+
+  return {
+    logEvent,
+    logPageView,
+    flush: noop,
+  };
+};
+
+export const getConsoleLogger = () => {
+  return consoleLogger();
+};

Composer/packages/client/src/telemetry/getEventLogger.ts

@@ -0,0 +1,33 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import pickBy from 'lodash/pickBy';
+import { TelemetryEventLogger, LogData, TelemetryEventName, TelemetryEvents } from '@botframework-composer/types';
+
+import { addPropsToLogger, getLogger } from './telemetryLogger';
+
+export const getEventLogger = (properties?: LogData | (() => LogData)): TelemetryEventLogger => {
+  const logger = addPropsToLogger(getLogger(), properties);
+
+  const log = <TN extends TelemetryEventName>(
+    eventName: TN,
+    ...args: TelemetryEvents[TN] extends undefined ? [never?] : [TelemetryEvents[TN]]
+  ) => {
+    const [properties] = args;
+    logger.logEvent(eventName, pickBy(properties as any));
+  };
+
+  const pageView = <TN extends TelemetryEventName>(
+    eventName: TN,
+    url: string,
+    ...args: TelemetryEvents[TN] extends undefined ? [never?] : [TelemetryEvents[TN]]
+  ) => {
+    const [properties] = args;
+    logger.logPageView(eventName, url, pickBy(properties as any));
+  };
+
+  return {
+    log,
+    pageView,
+  };
+};

Composer/packages/client/src/telemetry/hooks.ts

@@ -0,0 +1,34 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { LogData } from '@bfc/shared';
+import { useEffect, useState } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { currentModeState, currentProjectIdState, ServerSettingsState } from '../recoilModel';
+
+import { getEventLogger } from './getEventLogger';
+import { createLogger, initializeLogger } from './telemetryLogger';
+
+export const useInitializeLogger = () => {
+  const [, forceRender] = useState({});
+  const projectId = useRecoilValue(currentProjectIdState);
+  const page = useRecoilValue(currentModeState);
+  const { telemetry } = useRecoilValue(ServerSettingsState);
+
+  useEffect(() => {
+    initializeLogger(createLogger(telemetry), () => ({
+      timestamp: new Date().toUTCString(),
+      composerVersion: process.env.COMPOSER_VERSION || 'unknown',
+      sdkPackageVersion: process.env.SDK_PACKAGE_VERSION || 'unknown',
+      page,
+      projectId,
+    }));
+
+    forceRender({});
+  }, [telemetry, page, projectId]);
+};
+
+export const useEventLogger = (properties?: LogData | (() => LogData)) => {
+  return getEventLogger(properties);
+};

Composer/packages/client/src/telemetry/telemetryLogger.ts

@@ -0,0 +1,58 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { LogData, TelemetryLogger, TelemetrySettings } from '@botframework-composer/types';
+import noop from 'lodash/noop';
+
+import { getApplicationInsightsLogger } from './applicationInsightsLogger';
+import { getConsoleLogger } from './consoleLogger';
+import { getEventLogger } from './getEventLogger';
+
+export const getNoopLogger = (): TelemetryLogger => {
+  return {
+    logEvent: noop,
+    logPageView: noop,
+    flush: noop,
+  };
+};
+
+// Event Logger Singleton
+const theLogger = {
+  current: getNoopLogger(),
+};
+
+export const createLogger = (telemetrySettings?: TelemetrySettings): TelemetryLogger => {
+  return telemetrySettings?.allowDataCollection
+    ? process.env.NODE_ENV !== 'development'
+      ? getApplicationInsightsLogger()
+      : getConsoleLogger()
+    : getNoopLogger();
+};
+
+export const addPropsToLogger = (
+  logger: TelemetryLogger,
+  addProperties?: LogData | (() => LogData)
+): TelemetryLogger => {
+  const getProperties = typeof addProperties === 'function' ? addProperties : () => addProperties;
+
+  const logEvent = (name: string, properties?: LogData) => {
+    logger.logEvent(name, { ...getProperties(), ...properties });
+  };
+
+  const logPageView = (name: string, url: string, properties?: LogData) => {
+    logger.logPageView(name, url, { ...getProperties(), ...properties });
+  };
+
+  return {
+    ...logger,
+    logPageView,
+    logEvent,
+  };
+};
+
+export const initializeLogger = (logger: TelemetryLogger, properties?: LogData | (() => LogData)) => {
+  theLogger.current = addPropsToLogger(logger, properties);
+  return getEventLogger();
+};
+
+export const getLogger = () => theLogger.current;