chore: sentry for companion app (#599)

* chore: add sentry to companion app

* enable source map upload for companion app

* use redirect method from react-router

* update redirect logic again

* adjust code for new route

.github/workflows/app-preview.yaml

@@ -26,6 +26,8 @@ jobs:
       - run: pnpm install --prefer-offline
 
       - run: pnpm build
+        env:
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
 
       - name: Deploy
         id: deploy

deployables/app/app/entry.client.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { HydratedRouter } from 'react-router/dom'
+import './app.css'
+
+import * as Sentry from '@sentry/react'
+
+Sentry.init({
+  dsn: 'https://23cb3bbf49ea43ed9bbaf41199c40d1c@o4508675621912576.ingest.us.sentry.io/4508676926078976',
+  integrations: [Sentry.browserTracingIntegration()],
+  // Tracing
+  tracesSampleRate: 1.0, //  Capture 100% of the transactions
+  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+  tracePropagationTargets: [
+    'localhost',
+    /^https:\/\/app\.pilot\.gnosisguild\.org/,
+  ],
+})
+
+ReactDOM.hydrateRoot(
+  document,
+  <React.StrictMode>
+    <HydratedRouter />
+  </React.StrictMode>,
+)

deployables/app/app/root.tsx

@@ -7,7 +7,6 @@ import {
   ScrollRestoration,
 } from 'react-router'
 import type { Route } from './+types/root'
-import './app.css'
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (

deployables/app/app/routes/edit-route.$data.tsx

@@ -79,7 +79,7 @@ export const action = async ({ request, params }: Route.ActionArgs) => {
     multisend: await getMultisend(route, module),
   })
 
-  return editRoute(request.url, updatedRoute)
+  return editRoute(updatedRoute)
 }
 
 export const clientAction = async ({
@@ -107,26 +107,25 @@ export const clientAction = async ({
         { type: CompanionAppMessageType.SAVE_ROUTE, data: route },
         '*',
       )
-      // chrome.runtime.sendMessage('', route)
 
-      return editRoute(request.url, route)
+      return editRoute(route)
     }
     case Intent.UpdateChain: {
       const route = parseRouteData(params.data)
       const chainId = verifyChainId(getInt(data, 'chainId'))
 
-      return editRoute(request.url, updateChainId(route, chainId))
+      return editRoute(updateChainId(route, chainId))
     }
     case Intent.UpdateAvatar: {
       const route = parseRouteData(params.data)
       const avatar = getHexString(data, 'avatar')
 
-      return editRoute(request.url, updateAvatar(route, { safe: avatar }))
+      return editRoute(updateAvatar(route, { safe: avatar }))
     }
     case Intent.RemoveAvatar: {
       const route = parseRouteData(params.data)
 
-      return editRoute(request.url, removeAvatar(route))
+      return editRoute(removeAvatar(route))
     }
     case Intent.ConnectWallet: {
       const route = parseRouteData(params.data)
@@ -136,7 +135,6 @@ export const clientAction = async ({
       const providerType = verifyProviderType(getInt(data, 'providerType'))
 
       return editRoute(
-        request.url,
         updatePilotAddress(
           updateChainId(updateProviderType(route, providerType), chainId),
           account,
@@ -146,7 +144,7 @@ export const clientAction = async ({
     case Intent.DisconnectWallet: {
       const route = parseRouteData(params.data)
 
-      return editRoute(request.url, updatePilotAddress(route, ZERO_ADDRESS))
+      return editRoute(updatePilotAddress(route, ZERO_ADDRESS))
     }
     default:
       return serverAction()

deployables/app/app/routes/new-route.ts

@@ -1,6 +1,4 @@
 import { editRoute } from '@/utils'
 import { createBlankRoute } from '@zodiac/modules'
-import type { Route } from './+types/new-route'
 
-export const loader = ({ request }: Route.LoaderArgs) =>
-  editRoute(request.url, createBlankRoute())
+export const loader = () => editRoute(createBlankRoute())

deployables/app/app/utils/editRoute.ts

@@ -1,9 +1,5 @@
 import type { ExecutionRoute } from '@zodiac/schema'
+import { redirect } from 'react-router'
 
-export const editRoute = (currentUrl: string, route: ExecutionRoute) => {
-  const url = new URL(currentUrl)
-
-  return Response.redirect(
-    new URL(`/edit-route/${btoa(JSON.stringify(route))}`, url.origin),
-  )
-}
+export const editRoute = (route: ExecutionRoute) =>
+  redirect(`/edit-route/${btoa(JSON.stringify(route))}`)

deployables/app/package.json

@@ -16,6 +16,7 @@
     "@epic-web/invariant": "^1.0.0",
     "@react-router/node": "^7.1.1",
     "@react-router/serve": "^7.1.1",
+    "@sentry/react": "^8.50.0",
     "@tanstack/react-query": "^5.56.2",
     "@zodiac/chains": "workspace:*",
     "@zodiac/form-data": "workspace:*",
@@ -42,6 +43,7 @@
     "@hiogawa/vite-node-miniflare": "0.1.1",
     "@playwright/test": "^1.48.1",
     "@react-router/dev": "^7.1.1",
+    "@sentry/vite-plugin": "^3.0.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "14.6.0",

deployables/app/vite.config.ts

@@ -1,5 +1,6 @@
 import { reactRouter } from '@react-router/dev/vite'
 import { cloudflareDevProxy } from '@react-router/dev/vite/cloudflare'
+import { sentryVitePlugin } from '@sentry/vite-plugin'
 import autoprefixer from 'autoprefixer'
 import tailwindcss from 'tailwindcss'
 import { defineConfig } from 'vite'
@@ -12,6 +13,7 @@ export default defineConfig(({ isSsrBuild }) => ({
           input: './workers/app.ts',
         }
       : undefined,
+    sourcemap: true,
   },
   server: {
     port: 3040,
@@ -26,7 +28,6 @@ export default defineConfig(({ isSsrBuild }) => ({
   },
   ssr: {
     target: 'webworker',
-    // noExternal: true,
     resolve: {
       conditions: ['workerd', 'browser'],
     },
@@ -42,5 +43,14 @@ export default defineConfig(({ isSsrBuild }) => ({
     },
     noExternal: ['@gnosis.pm/zodiac', 'evm-proxy-detection'],
   },
-  plugins: [cloudflareDevProxy(), reactRouter(), tsconfigPaths()],
+  plugins: [
+    cloudflareDevProxy(),
+    reactRouter(),
+    tsconfigPaths(),
+    sentryVitePlugin({
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+      org: 'gnosis-guild',
+      project: 'pilot-companion-app',
+    }),
+  ],
 }))