feat: Implement error tracking and surveys for customer feedback (#634)

Author: charlesvien

.env.example

@@ -9,4 +9,8 @@ APPLE_CODESIGN_KEYCHAIN_PASSWORD="xxx"
 
 VITE_POSTHOG_API_KEY=xxx
 VITE_POSTHOG_API_HOST=xxx
-VITE_POSTHOG_UI_HOST=xxx
+VITE_POSTHOG_UI_HOST=xxx
+
+# PostHog Survey IDs (optional)
+VITE_POSTHOG_BUG_SURVEY_ID=
+VITE_POSTHOG_FEEDBACK_SURVEY_ID=

apps/twig/src/main/index.ts

@@ -14,6 +14,7 @@ import type { DockBadgeService } from "./services/dock-badge/service.js";
 import type { ExternalAppsService } from "./services/external-apps/service.js";
 import type { OAuthService } from "./services/oauth/service.js";
 import {
+  captureException,
   initializePostHog,
   trackAppEvent,
 } from "./services/posthog-analytics.js";
@@ -123,8 +124,13 @@ process.on("uncaughtException", (error) => {
     return;
   }
   log.error("Uncaught exception", error);
+
+  captureException(error, { source: "main", type: "uncaughtException" });
 });
 
 process.on("unhandledRejection", (reason) => {
   log.error("Unhandled rejection", reason);
+
+  const error = reason instanceof Error ? reason : new Error(String(reason));
+  captureException(error, { source: "main", type: "unhandledRejection" });
 });

apps/twig/src/main/services/posthog-analytics.ts

@@ -83,3 +83,15 @@ export function getPostHogClient() {
 export function resetUser() {
   currentUserId = null;
 }
+
+export function captureException(
+  error: unknown,
+  additionalProperties?: Record<string, unknown>,
+) {
+  if (!posthogClient) {
+    return;
+  }
+
+  const distinctId = currentUserId || "anonymous-app-event";
+  posthogClient.captureException(error, distinctId, additionalProperties);
+}

apps/twig/src/renderer/components/ErrorBoundary.tsx

@@ -1,5 +1,6 @@
 import { Warning } from "@phosphor-icons/react";
 import { Box, Button, Callout, Flex, Text } from "@radix-ui/themes";
+import { captureException } from "@renderer/lib/analytics";
 import { logger } from "@renderer/lib/logger";
 import { Component, type ErrorInfo, type ReactNode } from "react";
 
@@ -34,6 +35,12 @@ export class ErrorBoundary extends Component<Props, State> {
       stack: error.stack,
       componentStack: errorInfo.componentStack,
     });
+
+    captureException(error, {
+      $exception_component_stack: errorInfo.componentStack,
+      boundary_name: this.props.name,
+      source: "error-boundary",
+    });
   }
 
   handleRetry = () => {

apps/twig/src/renderer/components/FeedbackToggle.tsx

@@ -0,0 +1,52 @@
+import { ChatCircle } from "@phosphor-icons/react";
+import { DropdownMenu, IconButton, Text, Tooltip } from "@radix-ui/themes";
+import { displaySurvey, getPostHog } from "@renderer/lib/analytics";
+import { useCallback } from "react";
+
+type FeedbackType = "bug" | "feedback";
+
+const hasBugSurvey = !!import.meta.env.VITE_POSTHOG_BUG_SURVEY_ID;
+const hasFeedbackSurvey = !!import.meta.env.VITE_POSTHOG_FEEDBACK_SURVEY_ID;
+
+export function FeedbackToggle() {
+  const handleFeedback = useCallback((type: FeedbackType) => {
+    const surveyId =
+      type === "bug"
+        ? import.meta.env.VITE_POSTHOG_BUG_SURVEY_ID
+        : import.meta.env.VITE_POSTHOG_FEEDBACK_SURVEY_ID;
+
+    if (surveyId) {
+      displaySurvey(surveyId);
+    }
+
+    getPostHog()?.capture("Feedback button clicked", {
+      feedback_type: type,
+    });
+  }, []);
+
+  if (!hasBugSurvey && !hasFeedbackSurvey) return null;
+
+  return (
+    <DropdownMenu.Root>
+      <Tooltip content="Send Feedback">
+        <DropdownMenu.Trigger>
+          <IconButton
+            size="1"
+            variant="ghost"
+            style={{ color: "var(--gray-9)" }}
+          >
+            <ChatCircle size={16} />
+          </IconButton>
+        </DropdownMenu.Trigger>
+      </Tooltip>
+      <DropdownMenu.Content size="1" align="end">
+        <DropdownMenu.Item onClick={() => handleFeedback("bug")}>
+          <Text size="1">Report a Bug</Text>
+        </DropdownMenu.Item>
+        <DropdownMenu.Item onClick={() => handleFeedback("feedback")}>
+          <Text size="1">Share Feedback</Text>
+        </DropdownMenu.Item>
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  );
+}

apps/twig/src/renderer/components/StatusBar.tsx

@@ -1,4 +1,5 @@
 import { CampfireToggle } from "@components/CampfireToggle";
+import { FeedbackToggle } from "@components/FeedbackToggle";
 import { SettingsToggle } from "@components/SettingsToggle";
 import { StatusBarMenu } from "@components/StatusBarMenu";
 import { Badge, Box, Code, Flex, Kbd } from "@radix-ui/themes";
@@ -49,6 +50,7 @@ export function StatusBar({ showKeyHints = true }: StatusBarProps) {
 
       <Flex align="center" gap="2">
         <CampfireToggle />
+        <FeedbackToggle />
         <SettingsToggle />
         {IS_DEV && (
           <Badge size="1">

apps/twig/src/renderer/lib/analytics.ts

@@ -28,6 +28,7 @@ export function initializePostHog() {
     api_host: apiHost,
     ui_host: uiHost,
     disable_session_recording: false,
+    capture_exceptions: true,
     loaded: () => {
       log.info("PostHog loaded");
       // Start session recording immediately after load
@@ -88,13 +89,19 @@ export function identifyUser(
   userId: string,
   properties?: UserIdentifyProperties,
 ) {
-  if (!isInitialized) return;
+  if (!isInitialized) {
+    log.warn("PostHog not initialized, cannot identify user");
+    return;
+  }
 
   posthog.identify(userId, properties);
 }
 
 export function resetUser() {
-  if (!isInitialized) return;
+  if (!isInitialized) {
+    log.warn("PostHog not initialized, cannot reset user");
+    return;
+  }
 
   posthog.reset();
 }
@@ -107,6 +114,45 @@ export function track<K extends keyof EventPropertyMap>(
       ? [properties?: EventPropertyMap[K]]
       : [properties: EventPropertyMap[K]]
 ) {
-  if (!isInitialized) return;
+  if (!isInitialized) {
+    log.warn("PostHog not initialized, cannot track event");
+    return;
+  }
+
   posthog.capture(eventName, args[0]);
 }
+
+/**
+ * Capture an exception for error tracking using PostHog's built-in exception tracking.
+ */
+export function captureException(
+  error: Error,
+  additionalProperties?: Record<string, unknown>,
+) {
+  if (!isInitialized) {
+    log.warn("PostHog not initialized, cannot capture exception");
+    return;
+  }
+
+  posthog.captureException(error, additionalProperties);
+}
+
+/**
+ * Get the PostHog instance for direct access
+ */
+export function getPostHog() {
+  return isInitialized ? posthog : null;
+}
+
+// ============================================================================
+// Surveys
+// ============================================================================
+
+export function displaySurvey(surveyId: string) {
+  if (!isInitialized) {
+    log.warn("PostHog not initialized, cannot display survey");
+    return;
+  }
+
+  posthog.displaySurvey(surveyId);
+}