Track 500 errors in Sentry

client/error.vue

@@ -9,8 +9,8 @@
             class="w-56 mb-5"
           >
 
-          <h1 class="mb-4 font-semibold text-3xl text-gray-900">
-            Page Not Found
+          <h1 class="mb-6 font-semibold text-3xl text-gray-900">
+            Whoops, something went wrong ({{ error.statusCode || '404' }})
           </h1>
 
           <div class="links">
@@ -28,7 +28,27 @@
 </template>
 
 <script setup>
+import { captureException } from '@sentry/core'
+
 useOpnSeoMeta({
   title: "404 - Page not found",
 })
+
+const props = defineProps({
+  error: { type: Object, default: null }
+})
+const authStore = useAuthStore()
+
+
+if (props.error?.statusCode === 500) {
+  // Track in Sentry 500 errors
+  const exception = new Error(props.error?.message ?? props.error?.statusMessage)
+  exception.code = props.error?.statusCode
+  exception.stack = props.error?.stack
+  captureException(exception, {
+    message: props.error?.message ?? props.error?.statusMessage,
+    type: '500_error',
+    user_id: authStore.user?.id
+  })
+}
 </script>