minor: added error reporting to sentry for all our server actions

apps/web/package.json

@@ -25,6 +25,7 @@
     "@lucia-auth/adapter-drizzle": "^1.0.7",
     "@monaco-editor/react": "^4.6.0",
     "@sentry/nextjs": "^8",
+    "@sentry/utils": "^8.30.0",
     "@t3-oss/env-nextjs": "^0.10.1",
     "ai": "^3.2.42",
     "bullmq": "^5.8.5",

apps/web/src/actions/procedures/index.ts

@@ -1,23 +1,27 @@
-import { UnauthorizedError } from '@latitude-data/core/lib/errors'
 import {
   DocumentVersionsRepository,
   ProjectsRepository,
 } from '@latitude-data/core/repositories'
+import * as Sentry from '@sentry/nextjs'
 import { getCurrentUser } from '$/services/auth/getCurrentUser'
 import { z } from 'zod'
 import { createServerActionProcedure } from 'zsa'
 
-export const authProcedure = createServerActionProcedure().handler(async () => {
-  try {
-    const data = await getCurrentUser()
+export const errorHandlingProcedure = createServerActionProcedure()
+  .onError((error) => {
+    Sentry.captureException(error)
+  })
+  .handler((ctx) => ({ ...ctx }))
+
+export const authProcedure = createServerActionProcedure(
+  errorHandlingProcedure,
+).handler(async () => {
+  const data = await getCurrentUser()
 
-    return {
-      session: data.session!,
-      workspace: data.workspace,
-      user: data.user,
-    }
-  } catch (err) {
-    throw new UnauthorizedError((err as Error).message)
+  return {
+    session: data.session!,
+    workspace: data.workspace,
+    user: data.user,
   }
 })
 

apps/web/src/actions/user/loginAction.ts

@@ -5,9 +5,11 @@ import { getUserFromCredentials } from '$/data-access'
 import { ROUTES } from '$/services/routes'
 import { redirect } from 'next/navigation'
 import { z } from 'zod'
-import { createServerAction } from 'zsa'
 
-export const loginAction = createServerAction()
+import { errorHandlingProcedure } from '../procedures'
+
+export const loginAction = errorHandlingProcedure
+  .createServerAction()
   .input(
     z.object({
       email: z.string().email(),

apps/web/src/actions/user/setupAction.ts

@@ -5,9 +5,11 @@ import { ROUTES } from '$/services/routes'
 import setupService from '$/services/user/setupService'
 import { redirect } from 'next/navigation'
 import { z } from 'zod'
-import { createServerAction } from 'zsa'
 
-export const setupAction = createServerAction()
+import { errorHandlingProcedure } from '../procedures'
+
+export const setupAction = errorHandlingProcedure
+  .createServerAction()
   .input(
     z.object({
       name: z.string().min(1, { message: 'Name is a required field' }),

apps/web/src/app/(private)/error.tsx

@@ -3,6 +3,7 @@
 import { useEffect } from 'react'
 
 import { ErrorComponent, useSession } from '@latitude-data/web-ui/browser'
+import * as Sentry from '@sentry/nextjs'
 import { NAV_LINKS } from '$/app/(private)/_lib/constants'
 import BreadcrumpLink from '$/components/BreadcrumpLink'
 import { AppLayout } from '$/components/layouts'
@@ -15,9 +16,11 @@ export default function Error({
   reset: () => void // Re-render of page
 }) {
   const session = useSession()
+
   useEffect(() => {
-    console.error(error)
+    Sentry.captureException(error)
   }, [error])
+
   return (
     <AppLayout
       currentUser={session.currentUser}

apps/web/src/app/(public)/error-test/page.tsx

@@ -0,0 +1,23 @@
+import { Button, FocusHeader } from '@latitude-data/web-ui'
+import * as Sentry from '@sentry/nextjs'
+import { FocusLayout } from '$/components/layouts'
+
+export default function ErrorTestPage() {
+  async function triggerServerError() {
+    'use server'
+
+    const error = new Error('This is a test server error')
+    Sentry.captureException(error)
+    throw error
+  }
+
+  return (
+    <FocusLayout header={<FocusHeader title='Error test page' />}>
+      <div className='flex flex-col items-center justify-center h-full'>
+        <form action={triggerServerError}>
+          <Button type='submit'>Trigger Server Error</Button>
+        </form>
+      </div>
+    </FocusLayout>
+  )
+}

apps/web/src/app/(public)/login/LoginForm/index.tsx

@@ -31,7 +31,7 @@ export default function LoginForm({ footer }: { footer: ReactNode }) {
           placeholder='Ex.: [email protected]'
           errors={errors?.email}
         />
-        <Button fullWidth isLoading={isPending}>
+        <Button fullWidth isLoading={isPending && !error}>
           Login
         </Button>
 

apps/web/src/data-access/users.ts

@@ -24,8 +24,8 @@ export async function getUserFromCredentials({
       email: true,
       encryptedPassword: true,
     },
-    // NOTE: Typescript gets a little bit confused here. Not really a big
-    // deal. Please make keep this comment here when you are done trying and
+    // NOTE: Typescript gets a little bit confused here. Not really a big deal.
+    // Please make sure to keep this comment here when you are done trying and
     // failing to fix this.
     //
     // @ts-ignore

apps/web/src/services/routes.ts

@@ -123,4 +123,7 @@ export const ROUTES = {
       confirm: (token: string) => `/magic-links/confirm/${token}`,
     },
   },
+  public: {
+    errorTest: '/error-test',
+  },
 } as const