Implement structural updates and optimizations across multiple modules

Author: medyo

package.json

@@ -4,6 +4,7 @@
   "private": false,
   "dependencies": {
     "@amplitude/analytics-browser": "^1.5.5",
+    "@sentry/react": "^9.38.0",
     "@tanstack/query-async-storage-persister": "^5.8.3",
     "@tanstack/react-query": "^4.13.0",
     "@tanstack/react-query-persist-client": "^5.8.4",
@@ -65,6 +66,7 @@
     "react-error-overlay": "6.0.9"
   },
   "devDependencies": {
+    "@sentry/vite-plugin": "^3.5.0",
     "@types/chrome": "^0.0.241",
     "@types/dompurify": "^2.3.4",
     "@types/jest": "^29.1.2",

src/config/index.tsx

@@ -5,6 +5,7 @@ export const API_ENDPOINT = import.meta.env.VITE_API_URL as string
 export const LS_ANALYTICS_ID_KEY = 'hackerTabAnalyticsId'
 export const FIREBASE_API_KEY = import.meta.env.VITE_FIREBASE_API_KEY as string
 export const BUILD_TARGET = (import.meta.env.VITE_BUILD_TARGET as 'web' | 'extension') || 'web'
+export const SENTRY_DSN = import.meta.env.VITE_SENTRY_DSN
 
 // Meta
 export const name = 'Hackertab.dev'

src/index.tsx

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/react'
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
 import 'normalize.css'
 import 'react-simple-toasts/dist/style.css'
@@ -8,17 +9,23 @@ import { AppErrorBoundary } from 'src/providers/AppErrorBoundary'
 import { AppRoutes } from './routes/AppRoutes'
 
 import { createRoot } from 'react-dom/client'
+import { initSentry } from './lib/sentry'
 const container = document.getElementById('root')
 if (!container) {
   throw new Error('Failed to find the root element')
 }
+
+initSentry()
 const root = createRoot(container)
 root.render(
-  <AppErrorBoundary>
+  <Sentry.ErrorBoundary
+    fallback={({ error, resetError }) => (
+      <AppErrorBoundary error={error} resetError={resetError} />
+    )}>
     <PersistQueryClientProvider client={queryClient} persistOptions={{ persister: persister }}>
       <ConfigurationWrapper>
         <AppRoutes />
       </ConfigurationWrapper>
     </PersistQueryClientProvider>
-  </AppErrorBoundary>
+  </Sentry.ErrorBoundary>
 )

src/lib/analytics.ts

@@ -4,6 +4,7 @@ import { useUserPreferences } from 'src/stores/preferences'
 import { isDevelopment } from 'src/utils/Environment'
 import { getAppVersion } from 'src/utils/Os'
 import AppStorage from './localStorage'
+import { identifySentryUser } from './sentry'
 
 enum Objects {
   PAGE = 'Page',
@@ -120,6 +121,10 @@ export const setupIdentification = () => {
   if (onboardingResult?.title) {
     identifyUserOccupation(onboardingResult.title)
   }
+  identifySentryUser({
+    [Attributes.LANGUAGES]: userSelectedTags.map((tag: any) => tag.value),
+    [Attributes.DISPLAY_LAYOUT]: layout,
+  })
 }
 
 export const trackPageView = (pageName: string, dndModeActive: boolean = false) => {
@@ -408,10 +413,10 @@ export const trackUserDelete = () => {
   })
 }
 
-export const trackDisplayTypeChange = (value: "grid" | "cards") => {
+export const trackDisplayTypeChange = (value: 'grid' | 'cards') => {
   trackEvent({
     object: Objects.DISPLAY_LAYOUT,
-    verb: Verbs.CHANGE, 
+    verb: Verbs.CHANGE,
     attributes: {
       [Attributes.DISPLAY_LAYOUT]: value,
     },
@@ -421,7 +426,7 @@ export const trackDisplayTypeChange = (value: "grid" | "cards") => {
 export const trackFeedScroll = () => {
   trackEvent({
     object: Objects.FEED,
-    verb: Verbs.SCROLL
+    verb: Verbs.SCROLL,
   })
 }
 // Identification
@@ -459,7 +464,7 @@ export const identifyAdvBlocked = (blocked: boolean) => {
 export const identifyUserStreak = (value: number) => {
   identifyUserProperty(Attributes.STREAK, value)
 }
-export const identifyDisplayLayout = (value: "grid" | "cards") => {
+export const identifyDisplayLayout = (value: 'grid' | 'cards') => {
   identifyUserProperty(Attributes.DISPLAY_LAYOUT, value)
 }
 // Private functions

src/lib/sentry.ts

@@ -0,0 +1,15 @@
+import * as Sentry from '@sentry/react'
+import { SENTRY_DSN } from 'src/config'
+import { isDevelopment } from 'src/utils/Environment'
+
+export const initSentry = () => {
+  Sentry.init({
+    dsn: SENTRY_DSN,
+    sendDefaultPii: true,
+    enabled: !isDevelopment(),
+  })
+}
+
+export const identifySentryUser = (user: { [key: string]: any }) => {
+  Sentry.setUser(user)
+}

src/providers/AppErrorBoundary.tsx

@@ -1,22 +1,19 @@
-import React from 'react'
-import { ErrorBoundary} from 'react-error-boundary'
 import { AiFillBug } from 'react-icons/ai'
 import { WiRefresh } from 'react-icons/wi'
 
-export const AppErrorBoundary = ({ children }: {children: React.ReactNode}) => {
-  
-  const ErrorFallback = ({ error, resetErrorBoundary }: {error: Error, resetErrorBoundary: () => void}) => {
-    return (
-      <div className="Page appError">
-        <AiFillBug size={64} />
-        <p>Sorry there was a problem loading this page.</p>
-        <p>{error.message}</p>
-        <button onClick={resetErrorBoundary}>
-          <WiRefresh size={32} className={'buttonIcon'} /> Try again
-        </button>
-      </div>
-    )
-  }
-
-  return <ErrorBoundary FallbackComponent={ErrorFallback}>{children}</ErrorBoundary>
+type AppErrorBoundaryProps = {
+  error: unknown
+  resetError: () => void
+}
+export const AppErrorBoundary = ({ error, resetError }: AppErrorBoundaryProps) => {
+  return (
+    <div className="Page appError">
+      <AiFillBug size={64} />
+      <p>Sorry there was a problem loading this page.</p>
+      <p>{String(error)}</p>
+      <button onClick={resetError}>
+        <WiRefresh size={32} className={'buttonIcon'} /> Try again
+      </button>
+    </div>
+  )
 }

vite.config.mjs

@@ -1,4 +1,6 @@
+import { sentryVitePlugin } from '@sentry/vite-plugin'
 import react from '@vitejs/plugin-react'
+import fs from 'fs'
 import path from 'path'
 import { defineConfig, loadEnv } from 'vite'
 import { ViteEjsPlugin } from 'vite-plugin-ejs'
@@ -9,13 +11,17 @@ export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '')
   const buildTarget = env.VITE_BUILD_TARGET || 'web'
   const buildPlatform = env.VITE_BUILD_PLATFORM
-
+  const manifestPath = path.resolve(__dirname, 'public', 'base.manifest.json')
+  const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf-8'))
+  const appVersion = manifest.version || '0.0.0'
   if (!env.VITE_API_URL) {
     throw new Error('VITE_API_URL is not defined, create an .env file with this variable')
   }
 
   if (buildTarget == 'extension' && !buildPlatform) {
-    throw new Error('VITE_BUILD_PLATFORM is not defined, create an .env file with this variable')
+    throw new Error(
+      'VITE_BUILD_PLATFORM is not defined, create an .env file with this variable with either "firefox" or "chrome"'
+    )
   }
 
   return {
@@ -28,11 +34,24 @@ export default defineConfig(({ mode }) => {
       react(),
       viteTsconfigPaths(),
       svgrPlugin(),
+      sentryVitePlugin({
+        org: 'hackertabdev',
+        project: 'hackertab',
+        authToken: env.VITE_SENTRY_TOKEN,
+        disable: mode === 'development',
+        release: {
+          name: `${appVersion}-${buildTarget == 'extension' ? buildPlatform : buildTarget}`,
+        },
+        sourcemaps: {
+          filesToDeleteAfterUpload: ['./dist/assets/*.map', './assets/*.map'],
+        },
+      }),
     ],
     define: {
       'process.env': {},
     },
     build: {
+      sourcemap: true,
       emptyOutDir: true,
       cssCodeSplit: false,
       rollupOptions: {