Adding telemetry to webviews (#18053)

* Adding telemetry endpoints to webviews.

* Changing time prop to duration

* Fixing compile issue

* Fixing typo

Author: aasimkhan30

src/controllers/connectionManager.ts

@@ -38,7 +38,7 @@ import { sendActionEvent, sendErrorEvent } from "../telemetry/telemetry";
 import {
     TelemetryActions,
     TelemetryViews,
-} from "../telemetry/telemetryInterfaces";
+} from "../sharedInterfaces/telemetry";
 import { ObjectExplorerUtils } from "../objectExplorer/objectExplorerUtils";
 
 /**

src/controllers/mainController.ts

@@ -47,7 +47,7 @@ import { sendActionEvent } from "../telemetry/telemetry";
 import {
     TelemetryActions,
     TelemetryViews,
-} from "../telemetry/telemetryInterfaces";
+} from "../sharedInterfaces/telemetry";
 import { TableDesignerService } from "../services/tableDesignerService";
 import { TableDesignerWebviewController } from "../tableDesigner/tableDesignerWebviewController";
 import { ConnectionDialogWebviewController } from "../connectionconfig/connectionDialogWebviewController";
@@ -1719,7 +1719,7 @@ export default class MainController implements vscode.Disposable {
                 }
                 this._statusview.sqlCmdModeChanged(uri, false);
                 sendActionEvent(
-                    TelemetryViews.CommandPallet,
+                    TelemetryViews.CommandPalette,
                     TelemetryActions.NewQuery,
                     undefined,
                     undefined,

src/controllers/queryRunner.ts

@@ -51,7 +51,7 @@ import { sendActionEvent } from "../telemetry/telemetry";
 import {
     TelemetryActions,
     TelemetryViews,
-} from "../telemetry/telemetryInterfaces";
+} from "../sharedInterfaces/telemetry";
 
 export interface IResultSet {
     columns: string[];

src/controllers/reactWebviewBaseController.ts

@@ -5,6 +5,13 @@
 
 import * as vscode from "vscode";
 import { getNonce } from "../utils/utils";
+import { sendActionEvent, sendErrorEvent } from "../telemetry/telemetry";
+import {
+    TelemetryActions,
+    TelemetryViews,
+    WebviewTelemetryActionEvent,
+    WebviewTelemetryErrorEvent,
+} from "../sharedInterfaces/telemetry";
 
 /**
  * ReactWebviewBaseController is a class that manages a vscode.Webview and provides
@@ -43,8 +50,25 @@ export abstract class ReactWebviewBaseController<State, Reducers>
         if (message.type === "request") {
             const handler = this._webviewRequestHandlers[message.method];
             if (handler) {
+                const startTime = Date.now();
                 const result = await handler(message.params);
                 this.postMessage({ type: "response", id: message.id, result });
+                const endTime = Date.now();
+                sendActionEvent(
+                    TelemetryViews.WebviewController,
+                    TelemetryActions.WebviewRequest,
+                    {
+                        type: this._sourceFile,
+                        method: message.method,
+                        reducer:
+                            message.method === "action"
+                                ? message.params.type
+                                : undefined,
+                    },
+                    {
+                        durationMs: endTime - startTime,
+                    },
+                );
             } else {
                 throw new Error(
                     `No handler registered for method ${message.method}`,
@@ -137,6 +161,7 @@ export abstract class ReactWebviewBaseController<State, Reducers>
         this._webviewRequestHandlers["getState"] = () => {
             return this.state;
         };
+
         this._webviewRequestHandlers["action"] = async (action) => {
             const reducer = this._reducers[action.type];
             if (reducer) {
@@ -147,20 +172,60 @@ export abstract class ReactWebviewBaseController<State, Reducers>
                 );
             }
         };
+
         this._webviewRequestHandlers["getTheme"] = () => {
             return vscode.window.activeColorTheme.kind;
         };
+
         this._webviewRequestHandlers["loadStats"] = (message) => {
             const timeStamp = message.loadCompleteTimeStamp;
             const timeToLoad = timeStamp - this._loadStartTime;
             if (this._isFirstLoad) {
-                console.log(`
-					Load stats for ${this._sourceFile}
-					Total time: ${timeToLoad} ms
-				`);
+                console.log(
+                    `Load stats for ${this._sourceFile}` +
+                        "\n" +
+                        `Total time: ${timeToLoad} ms`,
+                );
+                sendActionEvent(
+                    TelemetryViews.WebviewController,
+                    TelemetryActions.Load,
+                    {
+                        type: this._sourceFile,
+                    },
+                    {
+                        durationMs: timeToLoad,
+                    },
+                );
                 this._isFirstLoad = false;
             }
         };
+
+        this._webviewRequestHandlers["sendActionEvent"] = (
+            message: WebviewTelemetryActionEvent,
+        ) => {
+            sendActionEvent(
+                message.telemetryView,
+                message.telemetryAction,
+                message.additionalProps,
+                message.additionalMeasurements,
+            );
+        };
+
+        this._webviewRequestHandlers["sendErrorEvent"] = (
+            message: WebviewTelemetryErrorEvent,
+        ) => {
+            sendErrorEvent(
+                message.telemetryView,
+                message.telemetryAction,
+                message.error,
+                message.includeErrorMessage,
+                message.errorCode,
+                message.errorType,
+                message.additionalProps,
+                message.additionalMeasurements,
+            );
+        };
+
         this._webviewRequestHandlers["getLocalization"] = async () => {
             if (vscode.l10n.uri?.fsPath) {
                 const file = await vscode.workspace.fs.readFile(

src/models/connectionProfile.ts

@@ -22,9 +22,9 @@ import { AzureAuthType, IAccount, ITenant } from "./contracts/azure";
 import { getEnableSqlAuthenticationProviderConfig } from "../azure/utils";
 import { sendActionEvent } from "../telemetry/telemetry";
 import {
-    TelemetryActions,
     TelemetryViews,
-} from "../telemetry/telemetryInterfaces";
+    TelemetryActions,
+} from "../sharedInterfaces/telemetry";
 
 // Concrete implementation of the IConnectionProfile interface
 

src/models/sqlOutputContentProvider.ts

@@ -16,12 +16,12 @@ import { WebviewPanelController } from "../controllers/webviewController";
 import { IServerProxy, Deferred } from "../protocol";
 import { ResultSetSubset, ResultSetSummary } from "./contracts/queryExecute";
 import { sendActionEvent } from "../telemetry/telemetry";
+import { QueryResultWebviewController } from "../queryResult/queryResultWebViewController";
+import { QueryResultPaneTabs } from "../sharedInterfaces/queryResult";
 import {
     TelemetryActions,
     TelemetryViews,
-} from "../telemetry/telemetryInterfaces";
-import { QueryResultWebviewController } from "../queryResult/queryResultWebViewController";
-import { QueryResultPaneTabs } from "../sharedInterfaces/queryResult";
+} from "../sharedInterfaces/telemetry";
 // tslint:disable-next-line:no-require-imports
 const pd = require("pretty-data").pd;
 

src/objectExplorer/objectExplorerFilter.ts

@@ -11,6 +11,12 @@ import {
     ObjectExplorerFilterState,
     ObjectExplorerReducers,
 } from "../sharedInterfaces/objectExplorerFilter";
+import { sendActionEvent } from "../telemetry/telemetry";
+import {
+    TelemetryActions,
+    TelemetryViews,
+} from "../sharedInterfaces/telemetry";
+import { randomUUID } from "crypto";
 
 export class ObjectExplorerFilterReactWebviewController extends ReactWebviewPanelController<
     ObjectExplorerFilterState,
@@ -84,6 +90,15 @@ export class ObjectExplorerFilter {
         treeNode: TreeNodeInfo,
     ): Promise<vscodeMssql.NodeFilter[] | undefined> {
         return await new Promise((resolve, _reject) => {
+            const correlationId = randomUUID();
+            sendActionEvent(
+                TelemetryViews.ObjectExplorerFilter,
+                TelemetryActions.Open,
+                {
+                    nodeType: treeNode.nodeType,
+                    correlationId,
+                },
+            );
             if (
                 !this._filterWebviewController ||
                 this._filterWebviewController.isDisposed
@@ -103,12 +118,39 @@ export class ObjectExplorerFilter {
             }
             this._filterWebviewController.revealToForeground();
             this._filterWebviewController.onSubmit((e) => {
+                sendActionEvent(
+                    TelemetryViews.ObjectExplorerFilter,
+                    TelemetryActions.Submit,
+                    {
+                        nodeType: treeNode.nodeType,
+                        correlationId,
+                    },
+                    {
+                        filterCount: e.length,
+                    },
+                );
                 resolve(e);
             });
             this._filterWebviewController.onCancel(() => {
+                sendActionEvent(
+                    TelemetryViews.ObjectExplorerFilter,
+                    TelemetryActions.Cancel,
+                    {
+                        nodeType: treeNode.nodeType,
+                        correlationId,
+                    },
+                );
                 resolve(undefined);
             });
             this._filterWebviewController.onDisposed(() => {
+                sendActionEvent(
+                    TelemetryViews.ObjectExplorerFilter,
+                    TelemetryActions.Cancel,
+                    {
+                        nodeType: treeNode.nodeType,
+                        correlationId,
+                    },
+                );
                 resolve(undefined);
             });
         });

src/objectExplorer/objectExplorerService.ts

@@ -47,11 +47,11 @@ import { IConnectionInfo } from "vscode-mssql";
 import { sendActionEvent } from "../telemetry/telemetry";
 import { IAccount } from "../models/contracts/azure";
 import * as AzureConstants from "../azure/constants";
+import { getConnectionDisplayName } from "../models/connectionInfo";
 import {
     TelemetryActions,
     TelemetryViews,
-} from "../telemetry/telemetryInterfaces";
-import { getConnectionDisplayName } from "../models/connectionInfo";
+} from "../sharedInterfaces/telemetry";
 
 function getParentNode(node: TreeNodeType): TreeNodeInfo {
     node = node.parentNode;

src/protocol.ts

@@ -10,10 +10,7 @@ import {
     ResultSetSubset,
     ISelectionData,
 } from "./models/interfaces";
-import {
-    TelemetryActions,
-    TelemetryViews,
-} from "./telemetry/telemetryInterfaces";
+import { TelemetryViews, TelemetryActions } from "./sharedInterfaces/telemetry";
 
 export interface IWebviewProxy extends Disposable {
     sendEvent(type: string, arg: any): void;

src/reactviews/common/rpc.ts

@@ -4,6 +4,10 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { WebviewApi } from "vscode-webview";
+import {
+    WebviewTelemetryActionEvent,
+    WebviewTelemetryErrorEvent,
+} from "../../sharedInterfaces/telemetry";
 
 /**
  * Rpc to communicate with the extension.
@@ -88,4 +92,12 @@ export class WebviewRpc<Reducers> {
         }
         this._methodSubscriptions[method].push(callback);
     }
+
+    public sendActionEvent(event: WebviewTelemetryActionEvent) {
+        this.call("sendActionEvent", event);
+    }
+
+    public sendErrorEvent(event: WebviewTelemetryErrorEvent) {
+        this.call("sendErrorEvent", event);
+    }
 }

src/sharedInterfaces/telemetry.ts

@@ -0,0 +1,96 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+export enum TelemetryViews {
+    ObjectExplorer = "ObjectExplorer",
+    CommandPalette = "CommandPalette",
+    SqlProjects = "SqlProjects",
+    QueryEditor = "QueryEditor",
+    ResultsGrid = "ResultsGrid",
+    ConnectionPrompt = "ConnectionPrompt",
+    WebviewController = "WebviewController",
+    ObjectExplorerFilter = "ObjectExplorerFilter",
+    TableDesigner = "TableDesigner",
+}
+
+export enum TelemetryActions {
+    GenerateScript = "GenerateScript",
+    Refresh = "Refresh",
+    CreateProject = "CreateProject",
+    RemoveConnection = "RemoveConnection",
+    Disconnect = "Disconnect",
+    NewQuery = "NewQuery",
+    RunQuery = "RunQuery",
+    QueryExecutionCompleted = "QueryExecutionCompleted",
+    RunResultPaneAction = "RunResultPaneAction",
+    CreateConnection = "CreateConnection",
+    CreateConnectionResult = "CreateConnectionResult",
+    ExpandNode = "ExpandNode",
+    ResultPaneAction = "ResultPaneAction",
+    Load = "Load",
+    WebviewRequest = "WebviewRequest",
+    Open = "Open",
+    Submit = "Submit",
+    Cancel = "Cancel",
+    Initialize = "Initialize",
+    Edit = "Edit",
+    Publish = "Publish",
+    ContinueEditing = "ContinueEditing",
+    Close = "Close",
+}
+
+export interface WebviewTelemetryActionEvent {
+    /**
+     * The view in which the event occurred.
+     */
+    telemetryView: TelemetryViews;
+    /**
+     * The action that was being performed when the event occurred.
+     */
+    telemetryAction: TelemetryActions;
+    /**
+     * Additional properties for the event.
+     */
+    additionalProps?: Record<string, string>;
+    /**
+     * Additional measurements for the event.
+     */
+    additionalMeasurements?: Record<string, number>;
+}
+
+export interface WebviewTelemetryErrorEvent {
+    /**
+     * The view in which the event occurred.
+     */
+    telemetryView: TelemetryViews;
+    /**
+     * The action that was being performed when the event occurred.
+     */
+    telemetryAction: TelemetryActions;
+    /**
+     * Error that occurred.
+     */
+    error: Error;
+    /**
+     * Whether to include the error message in the telemetry event. Defaults to false.
+     */
+    includeErrorMessage: boolean;
+    /**
+     * Error code for the error.
+     */
+    errorCode?: string;
+    /**
+     * Error type for the error.
+     */
+    errorType?: string;
+    /**
+     * Additional properties to include in the telemetry event.
+     */
+    additionalProps?: Record<string, string>;
+    /**
+     * Additional measurements to include in the telemetry event.
+     */
+    additionalMeasurements?: Record<string, number>;
+}