telemetry(amazonq): Add webview load metric for amazonq (aws#5518)

## Problem
- We have no detailed information on how long the amazonq webview took
for first meaningful paint
- We have no way to keep track whether or not webviews fail to load or
any error events are that emitted


## Solution
- The onready event gets fired when "UI is initialized and rendered".
See https://github.com/aws/mynah-ui/blob/main/docs/PROPERTIES.md#onready
- Listen to error events on the window and forward them to the vscode
side

## I'm trying to answer the following questions with these metrics :
- How long are webviews taking to load?
- How long until they're interactive?
- What errors are occurring in the webview?

Author: jpinkney-aws

packages/core/src/amazonq/webview/messages/messageDispatcher.ts

@@ -8,12 +8,41 @@ import { MessagePublisher } from '../../messages/messagePublisher'
 import { MessageListener } from '../../messages/messageListener'
 import { TabType } from '../ui/storages/tabsStorage'
 import { getLogger } from '../../../shared/logger'
+import { amazonqMark } from '../../../shared/performance/marks'
+import { telemetry } from '../../../shared/telemetry'
 
 export function dispatchWebViewMessagesToApps(
     webview: Webview,
     webViewToAppsMessagePublishers: Map<TabType, MessagePublisher<any>>
 ) {
     webview.onDidReceiveMessage((msg) => {
+        if (msg.command === 'ui-is-ready') {
+            /**
+             * ui-is-ready isn't associated to any tab so just record the telemetry event and continue.
+             * This would be equivalent of the duration between "user clicked open q" and "ui has become available"
+             * NOTE: Amazon Q UI is only loaded ONCE. The state is saved between each hide/show of the webview.
+             */
+
+            telemetry.webview_load.emit({
+                webviewName: 'amazonq',
+                duration: performance.measure(amazonqMark.uiReady, amazonqMark.open).duration,
+                result: 'Succeeded',
+            })
+            performance.clearMarks(amazonqMark.uiReady)
+            performance.clearMarks(amazonqMark.open)
+            return
+        }
+
+        if (msg.type === 'error') {
+            const event = msg.event === 'webview_load' ? telemetry.webview_load : telemetry.webview_error
+            event.emit({
+                webviewName: 'amazonqChat',
+                result: 'Failed',
+                reasonDesc: msg.errorMessage,
+            })
+            return
+        }
+
         const appMessagePublisher = webViewToAppsMessagePublishers.get(msg.tabType)
         if (appMessagePublisher === undefined) {
             return

packages/core/src/amazonq/webview/ui/connector.ts

@@ -64,7 +64,7 @@ export class Connector {
     private readonly tabsStorage
     private readonly amazonqCommonsConnector: AmazonQCommonsConnector
 
-    private isUIReady = false
+    isUIReady = false
 
     constructor(props: ConnectorProps) {
         this.sendMessageToExtension = props.sendMessageToExtension

packages/core/src/amazonq/webview/ui/main.ts

@@ -22,6 +22,16 @@ export const createMynahUI = (ideApi: any, amazonQEnabled: boolean) => {
     let mynahUI: MynahUI
     // eslint-disable-next-line prefer-const
     let connector: Connector
+
+    window.addEventListener('error', (e) => {
+        const { error, message } = e
+        ideApi.postMessage({
+            type: 'error',
+            event: connector.isUIReady ? 'webview_error' : 'webview_load',
+            errorMessage: error ? error.toString() : message,
+        })
+    })
+
     const tabsStorage = new TabsStorage({
         onTabTimeout: (tabID) => {
             mynahUI.addChatItem(tabID, {

packages/core/src/amazonq/webview/webView.ts

@@ -21,6 +21,7 @@ import { MessagePublisher } from '../messages/messagePublisher'
 import { TabType } from './ui/storages/tabsStorage'
 import { deactivateInitialViewBadge, shouldShowBadge } from '../util/viewBadgeHandler'
 import { telemetry } from '../../shared/telemetry/telemetry'
+import { amazonqMark } from '../../shared/performance/marks'
 
 export class AmazonQChatViewProvider implements WebviewViewProvider {
     public static readonly viewType = 'aws.AmazonQChatView'
@@ -64,6 +65,8 @@ export class AmazonQChatViewProvider implements WebviewViewProvider {
             webviewView.webview
         )
 
+        performance.mark(amazonqMark.open)
+
         // badge is shown, emit telemetry for first time an existing, unscoped user tries Q
         // note: this will fire on any not-properly-scoped Q entry.
         // this means we can't tie it directly to the badge although it is hinted at

packages/core/src/shared/performance/marks.ts

@@ -0,0 +1,9 @@
+/*!
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const amazonqMark = {
+    open: 'amazonq/webview/open',
+    uiReady: 'amazonq/webview/uiReady',
+}

packages/core/src/shared/telemetry/vscodeTelemetry.json

@@ -295,6 +295,11 @@
             "name": "functionName",
             "type": "string",
             "description": "The name of the function"
+        },
+        {
+            "name": "webviewName",
+            "type": "string",
+            "description": "The name of the webview"
         }
     ],
     "metrics": [
@@ -1122,6 +1127,26 @@
             ],
             "passive": true,
             "trackPerformance": true
+        },
+        {
+            "name": "webview_load",
+            "description": "Represents a webview load event",
+            "metadata": [
+                {
+                    "type": "webviewName",
+                    "required": true
+                }
+            ]
+        },
+        {
+            "name": "webview_error",
+            "description": "Represents an error that occurs in a webview",
+            "metadata": [
+                {
+                    "type": "webviewName",
+                    "required": true
+                }
+            ]
         }
     ]
 }