feat: migrate desktop/mobile error tracking to posthog (#4858)

* feat: migrate desktop and mobile error tracking to PostHog

* fix(mobile): remove unsupported tab bar minimize API

* Revert "fix(mobile): remove unsupported tab bar minimize API"

This reverts commit e234dda.

Author: DIYgod

apps/desktop/configs/vite.render.config.ts

@@ -1,7 +1,6 @@
 import { readFileSync } from "node:fs"
 import { fileURLToPath } from "node:url"
 
-import { sentryVitePlugin } from "@sentry/vite-plugin"
 import react from "@vitejs/plugin-react"
 import { codeInspectorPlugin } from "code-inspector-plugin"
 import { dirname, resolve } from "pathe"
@@ -17,9 +16,6 @@ import i18nCompleteness from "../plugins/vite/utils/i18n-completeness"
 
 const pkgDir = resolve(dirname(fileURLToPath(import.meta.url)), "..")
 const pkg = JSON.parse(readFileSync(resolve(pkgDir, "./package.json"), "utf8"))
-const isCI = process.env.CI === "true" || process.env.CI === "1"
-const mode = process.argv.find((arg) => arg.startsWith("--mode"))?.split("=")[1]
-const isStaging = mode === "staging"
 
 const getChangelogFileContent = () => {
   const { version: pkgVersion } = pkg
@@ -76,36 +72,6 @@ export const viteRenderBaseConfig = {
     }),
     circularImportRefreshPlugin(),
 
-    sentryVitePlugin({
-      org: "follow-rg",
-      project: "follow",
-      disable: !isCI,
-      bundleSizeOptimizations: {
-        excludeDebugStatements: true,
-
-        // Only relevant if you added `replayIntegration`
-        excludeReplayIframe: true,
-        excludeReplayShadowDom: true,
-        excludeReplayWorker: true,
-      },
-      moduleMetadata: {
-        appVersion: process.env.NODE_ENV === "development" ? "dev" : pkg.version,
-        electron: false,
-      },
-      sourcemaps: {
-        filesToDeleteAfterUpload: isStaging
-          ? []
-          : [
-              "out/web/assets/*.js.map",
-              "out/web/vendor/*.js.map",
-              "out/rn-web/assets/*.js.map",
-              "out/rn-web/vendor/*.js.map",
-              "dist/renderer/assets/*.js.map",
-              "dist/renderer/vendor/*.css.map",
-            ],
-      },
-    }),
-
     astPlugin,
     customI18nHmrPlugin(),
   ],

apps/desktop/layer/main/package.json

@@ -28,7 +28,6 @@
     "@follow/shared": "workspace:*",
     "@follow/utils": "workspace:*",
     "@openpanel/web": "1.0.7",
-    "@sentry/electron": "7.2.0",
     "builder-util-runtime": "9.5.1",
     "electron-context-menu": "4.1.1",
     "electron-ipc-decorator": "0.2.0",

apps/desktop/layer/main/src/before-bootstrap.ts

@@ -1,14 +1,8 @@
 import { app, protocol } from "electron"
 import path from "pathe"
 
-import { initializeSentry } from "./sentry"
-
 if (import.meta.env.DEV) app.setPath("userData", path.join(app.getPath("appData"), "Folo(dev)"))
 protocol.registerSchemesAsPrivileged([
-  {
-    scheme: "sentry-ipc",
-    privileges: { bypassCSP: true, corsEnabled: true, supportFetchAPI: true, secure: true },
-  },
   {
     scheme: "app",
     privileges: {
@@ -19,5 +13,3 @@ protocol.registerSchemesAsPrivileged([
     },
   },
 ])
-// Solve Sentry SDK should be initialized before the Electron app 'ready' event is fired
-initializeSentry()

apps/desktop/layer/main/src/sentry.ts

@@ -38,7 +38,6 @@
     "@radix-ui/react-popover": "1.1.15",
     "@radix-ui/react-slider": "1.3.6",
     "@radix-ui/react-slot": "1.2.4",
-    "@sentry/react": "10.38.0",
     "@shikijs/transformers": "3.22.0",
     "@splinetool/react-spline": "4.1.0",
     "@tanstack/query-sync-storage-persister": "5.90.22",
@@ -88,6 +87,7 @@
     "react": "19.0.0",
     "react-blurhash": "0.3.0",
     "react-dom": "19.0.0",
+    "react-error-boundary": "6.1.0",
     "react-fast-compare": "3.2.2",
     "react-fast-marquee": "1.6.5",
     "react-google-recaptcha-v3": "1.11.0",

apps/desktop/layer/renderer/package.json

@@ -1,11 +1,11 @@
-import type { FallbackRender } from "@sentry/react"
-import { ErrorBoundary } from "@sentry/react"
 import type { FC, PropsWithChildren } from "react"
 import { createElement, Suspense, useCallback } from "react"
 
 import { getErrorFallback } from "../errors"
 import type { ErrorComponentType } from "../errors/enum"
 import PageErrorFallback from "../errors/PageError"
+import type { FallbackRender } from "./ErrorBoundary"
+import { ErrorBoundary } from "./ErrorBoundary"
 
 export interface AppErrorBoundaryProps extends PropsWithChildren {
   height?: number | string

apps/desktop/layer/renderer/src/components/common/AppErrorBoundary.tsx

@@ -0,0 +1,55 @@
+import { tracker } from "@follow/tracker"
+import type { PropsWithChildren, ReactNode } from "react"
+import type { FallbackProps } from "react-error-boundary"
+import { ErrorBoundary as ReactErrorBoundary } from "react-error-boundary"
+
+export type ErrorFallbackProps = Omit<FallbackProps, "resetErrorBoundary"> &
+  FallbackProps & {
+    resetError: () => void
+  }
+export type FallbackRender = (props: ErrorFallbackProps) => ReactNode
+
+interface ErrorBoundaryProps extends PropsWithChildren {
+  fallback?: FallbackRender
+  fallbackRender?: FallbackRender
+  handled?: boolean
+  beforeCapture?: (scope: unknown, error: unknown) => unknown
+}
+
+const emptyFallback: FallbackRender = () => null
+
+export const ErrorBoundary = ({
+  children,
+  fallback,
+  fallbackRender,
+  beforeCapture,
+}: ErrorBoundaryProps) => {
+  const renderFallback = fallbackRender ?? fallback ?? emptyFallback
+
+  const handleError = (rawError: unknown, info: { componentStack?: string | null }) => {
+    const error = rawError instanceof Error ? rawError : new Error(String(rawError))
+
+    if (beforeCapture?.(info, error) === false) {
+      return
+    }
+
+    void tracker.manager.captureException(error, {
+      source: "desktop_error_boundary",
+      component_stack: info.componentStack,
+    })
+  }
+
+  return (
+    <ReactErrorBoundary
+      onError={handleError}
+      fallbackRender={(props) =>
+        renderFallback({
+          ...props,
+          resetError: props.resetErrorBoundary,
+        })
+      }
+    >
+      {children}
+    </ReactErrorBoundary>
+  )
+}

apps/desktop/layer/renderer/src/components/common/ErrorBoundary.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@follow/components/ui/button/index.js"
-import { captureException } from "@sentry/react"
+import { tracker } from "@follow/tracker"
 import { useEffect, useRef } from "react"
 import { isRouteErrorResponse, useNavigate, useRouteError } from "react-router"
 import { toast } from "sonner"
@@ -27,8 +27,9 @@ export function ErrorElement() {
 
   useEffect(() => {
     console.error("Error handled by React Router default ErrorBoundary:", error)
-
-    captureException(error)
+    void tracker.manager.captureException(error, {
+      source: "desktop_router_error_element",
+    })
   }, [error])
 
   const reloadRef = useRef(false)

apps/desktop/layer/renderer/src/components/common/ErrorElement.tsx

@@ -1,7 +1,6 @@
 import { Logo } from "@follow/components/icons/logo.jsx"
 import { Button } from "@follow/components/ui/button/index.js"
 import { ELECTRON_BUILD } from "@follow/shared/constants"
-import { captureException } from "@sentry/react"
 import { useEffect } from "react"
 import type { Location } from "react-router"
 import { Navigate, useLocation, useNavigate } from "react-router"
@@ -33,7 +32,7 @@ export const NotFound = () => {
     if (!ELECTRON_BUILD) {
       return
     }
-    captureException(
+    console.error(
       new AccessNotFoundError(
         "Electron app got to a 404 page, this should not happen",
         location.pathname,

apps/desktop/layer/renderer/src/components/common/NotFound.tsx

@@ -1,10 +1,14 @@
-import { captureException } from "@sentry/react"
+import { tracker } from "@follow/tracker"
 import { useEffect } from "react"
 
 export const BlockError = (props: { error: any; message: string }) => {
   useEffect(() => {
-    captureException(props.error)
-  }, [])
+    console.error(props.error)
+    void tracker.manager.captureException(props.error, {
+      source: "desktop_markdown_block_error",
+      message: props.message,
+    })
+  }, [props.error, props.message])
   return (
     <div className="center flex min-h-12 flex-col rounded bg-red py-4 text-sm text-white">
       {props.message}