enhance ping

packages/ui/src/renderer/src/features/RunningOverlay/index.vue

@@ -62,6 +62,7 @@ import {
   AUTO_CHAT_ERROR_EXIT_CODE,
   RUNNING_STATUS_ENUM
 } from '../../../../common/enums/auto-start-chat'
+import { gtagRenderer } from '@renderer/utils/gtag'
 const props = defineProps({
   workerId: {
     type: String
@@ -103,6 +104,20 @@ function fillEmptySteps() {
 watch(() => props.runRecordId, fillEmptySteps, {
   immediate: true
 })
+watch(
+  () => stepsForRender.value,
+  (v) => {
+    const rejectedItems = v?.filter((it) => it.status === 'rejected')
+    if (!rejectedItems.length) {
+      return
+    }
+    gtagRenderer('running_overlay_rejected', {
+      stepId: rejectedItems.map((it) => it.id).join(','),
+      workerId: props.workerId
+    })
+  },
+  { deep: true }
+)
 
 const { ipcRenderer } = electron
 function messageHandler(ev, { data }) {
@@ -129,6 +144,16 @@ const show = () => {
 const hide = () => {
   isDialogVisible.value = false
 }
+watch(
+  () => isDialogVisible.value,
+  (newVal) => {
+    if (!newVal) {
+      gtagRenderer('running_overlay_shown')
+    } else {
+      gtagRenderer('running_overlay_hidden')
+    }
+  }
+)
 defineExpose({
   show,
   hide
@@ -143,8 +168,16 @@ ipcRenderer.on('worker-exited', (ev, payload) => {
   }
   if (code !== AUTO_CHAT_ERROR_EXIT_CODE.NORMAL) {
     currentRunningStatus.value = RUNNING_STATUS_ENUM.ERROR_EXITED
+    gtagRenderer('running_overlay_error_exited', {
+      exitCode: code,
+      workerId: props.workerId
+    })
   } else {
     currentRunningStatus.value = RUNNING_STATUS_ENUM.NORMAL_EXITED
+    gtagRenderer('running_overlay_normal_exited', {
+      exitCode: code,
+      workerId: props.workerId
+    })
   }
 })
 </script>

packages/ui/src/renderer/src/page/BrowserAssistant/index.vue

@@ -31,8 +31,8 @@
         <div flex-1 of-auto font-size-14px line-height-1.5em>
           <div mt10px ml-auto mr-auto class="w-90%">
             <div>常见问题</div>
-            <div class="faq-main">
-              <details class="faq-item">
+            <div ref="faqMainRef" class="faq-main">
+              <details class="faq-item" data-faq-id="cannot-auto-find-executable">
                 <summary>“自动检测”点击后提示“未检测到可用浏览器的可执行文件”？</summary>
                 <div class="faq-answer">
                   请尝试如下方案之一来处理：
@@ -72,7 +72,7 @@
                   </ul>
                 </div>
               </details>
-              <details class="faq-item">
+              <details class="faq-item" data-faq-id="manual-select-browser-prerequisite">
                 <summary>
                   如果要手动选择浏览器，可选择的浏览器有哪些？对于浏览器有什么要求？
                 </summary>
@@ -145,7 +145,10 @@
                   </div>
                 </div>
               </details>
-              <details class="faq-item">
+              <details
+                class="faq-item"
+                data-faq-id="what-will-happen-when-select-unsupported-browser"
+              >
                 <summary>如果我选择了一个不支持的浏览器，会发生什么？</summary>
                 <div class="faq-answer">
                   <div>可能会发生的情况：</div>
@@ -156,7 +159,7 @@
                   </ul>
                 </div>
               </details>
-              <details class="faq-item">
+              <details class="faq-item" data-faq-id="what-will-happen-when-select-other-file">
                 <summary>如果我选择了一个不是浏览器的可执行文件，会发生什么？</summary>
                 <div class="faq-answer">
                   <div>可能会发生的情况：</div>
@@ -199,7 +202,7 @@
 
 <script lang="ts" setup>
 import { useRouter } from 'vue-router'
-import { nextTick, ref } from 'vue'
+import { nextTick, onMounted, ref } from 'vue'
 import debounce from 'lodash/debounce'
 import { ElMessage } from 'element-plus'
 import { gtagRenderer as baseGtagRenderer } from '@renderer/utils/gtag'
@@ -212,7 +215,7 @@ useRouter()
 
 const gtagRenderer = (name, params?: object) => {
   return baseGtagRenderer(name, {
-    scene: 'cookie-assistant',
+    scene: 'browser-assistant',
     ...params
   })
 }
@@ -250,6 +253,7 @@ const rules = {
 
 const isAutoDetectLoading = ref(false)
 async function autoDetectPuppeteerExecutable() {
+  gtagRenderer('auto_detect_pptr_exe_clicked')
   isAutoDetectLoading.value = true
   await sleep(50)
   try {
@@ -258,6 +262,7 @@ async function autoDetectPuppeteerExecutable() {
       noSave: true
     })
     if (!result) {
+      gtagRenderer('auto_detect_pptr_exe_not_found')
       ElMessage({
         message: '未检测到可用浏览器的可执行文件',
         type: 'warning',
@@ -265,6 +270,12 @@ async function autoDetectPuppeteerExecutable() {
       })
       return
     }
+    gtagRenderer('auto_detect_pptr_exe_done', {
+      isUseCached: !!(
+        result.executablePath?.includes(`cache`) && result.executablePath?.includes(`.geekgeekrun`)
+      ),
+      executableName: result.executablePath?.split(/\/|\\/).pop() ?? ''
+    })
     formData.value.browserPath = result.executablePath
     ElMessage({
       message: '已找到可用浏览器，可执行文件路径已填入输入框',
@@ -279,6 +290,7 @@ async function autoDetectPuppeteerExecutable() {
 }
 
 async function chooseExecutableFile() {
+  gtagRenderer('choose_pptr_exe_clicked')
   const chooseResult = await ipcRenderer.invoke('choose-file', {
     fileChooserConfig: {
       properties: ['openFile', 'treatPackageAsDirectory'],
@@ -292,9 +304,13 @@ async function chooseExecutableFile() {
     }
   })
   if (chooseResult.canceled || !chooseResult.filePaths?.length) {
+    gtagRenderer('choose_pptr_exe_cancelled')
     return
   }
   formData.value.browserPath = chooseResult.filePaths[0]
+  gtagRenderer('choose_pptr_exe_done', {
+    executableName: chooseResult.filePaths[0]?.split(/\/|\\/).pop() ?? ''
+  })
   await nextTick()
   await formRef.value.validateField()
 }
@@ -308,12 +324,28 @@ function handleCancel() {
 }
 const formRef = ref()
 async function handleSave() {
-  await formRef.value.validate()
-  await ipcRenderer.invoke('save-last-used-and-available-browser-info', {
+  gtagRenderer('save_clicked', {
     executablePath: formData.value.browserPath,
-    browser: ''
+    executableName: formData.value.browserPath?.split(/\/|\\/).pop() ?? ''
   })
-  await ipcRenderer.send('browser-config-saved')
+  try {
+    await formRef.value.validate()
+    await ipcRenderer.invoke('save-last-used-and-available-browser-info', {
+      executablePath: formData.value.browserPath,
+      browser: ''
+    })
+    await ipcRenderer.send('browser-config-saved')
+    gtagRenderer('save_done', {
+      executablePath: formData.value.browserPath,
+      executableName: formData.value.browserPath?.split(/\/|\\/).pop() ?? ''
+    })
+  } catch (err) {
+    gtagRenderer('save_validate_failed', {
+      error: err?.message ?? '',
+      executablePath: formData.value.browserPath,
+      executableName: formData.value.browserPath?.split(/\/|\\/).pop() ?? ''
+    })
+  }
 }
 const handleFeedbackClick = () => {
   gtagRenderer('goto_feedback_for_ba_clicked')
@@ -321,18 +353,44 @@ const handleFeedbackClick = () => {
 }
 const handleClickLaunchBrowserDownloader = async () => {
   gtagRenderer('launch_browser_downloader_clicked')
-  const downloadedBrowserPath = await electron.ipcRenderer.invoke(
-    'download-browser-with-downloader'
-  )
-  if (downloadedBrowserPath) {
-    formData.value.browserPath = downloadedBrowserPath
-    ElMessage({
-      message: '浏览器下载成功，可执行文件路径已填入输入框',
-      type: 'success',
-      grouping: true
-    })
+  let downloadedBrowserPath
+  try {
+    downloadedBrowserPath = await electron.ipcRenderer.invoke('download-browser-with-downloader')
+    if (downloadedBrowserPath) {
+      formData.value.browserPath = downloadedBrowserPath
+      ElMessage({
+        message: '浏览器下载成功，可执行文件路径已填入输入框',
+        type: 'success',
+        grouping: true
+      })
+      gtagRenderer('browser_downloader_done_with_path')
+    } else {
+      ElMessage({
+        message:
+          '浏览器下载成功，但未返回可执行文件路径。请点击自动检测，或手动选择~/.geekgeekrun/cache/chrome文件夹下的文件，或重新下载',
+        type: 'success',
+        grouping: true
+      })
+      gtagRenderer('browser_downloader_done_without_path')
+    }
+  } catch (err) {
+    gtagRenderer('browser_downloader_cancelled')
   }
 }
+
+const faqMainRef = ref()
+onMounted(() => {
+  const faqItemEls = faqMainRef?.value?.querySelectorAll(`details`) ?? []
+  for (const el of faqItemEls) {
+    el.addEventListener('toggle', () => {
+      const isOpen = el.open
+      gtagRenderer('faq_item_toggled', {
+        faqId: el.dataset.faqId,
+        isOpen
+      })
+    })
+  }
+})
 </script>
 
 <style lang="scss" scoped>

packages/ui/src/renderer/src/page/BrowserDownloadProgress/index.vue

@@ -18,11 +18,18 @@
 <script lang="ts" setup>
 import { ref, onUnmounted, h } from 'vue'
 import { ElMessageBox } from 'element-plus'
-import { gtagRenderer } from '@renderer/utils/gtag'
+import { gtagRenderer as baseGtagRenderer } from '@renderer/utils/gtag'
 import { sleep } from '@geekgeekrun/utils/sleep.mjs'
 import FailMessage from './FailMessage.vue'
 import { EXPECT_CHROMIUM_BUILD_ID } from '../../../../common/constant'
 
+const gtagRenderer = (name, params?: object) => {
+  return baseGtagRenderer(name, {
+    scene: 'browser-download-progress',
+    ...params
+  })
+}
+
 const browserDownloadPercentage = ref(0)
 const handleBrowserDownloadProgress = (ev, { downloadedBytes, totalBytes }) => {
   browserDownloadPercentage.value = (downloadedBytes / totalBytes) * 100
@@ -62,6 +69,7 @@ const processTasks = async () => {
   try {
     await processDownloadBrowser()
     electron.ipcRenderer.send('browser-download-done', executablePath)
+    gtagRenderer('download_deps_done')
   } catch (err) {
     gtagRenderer('encounter_error_when_download_deps')
     await ElMessageBox.confirm(h(FailMessage), {