feat(fe2): more accessible error reference (#5090)

* feat(fe2): more accessible error reference

* use wrench icon

* michals comments

* more michals comments

packages/frontend-2/components/header/nav/UserMenu.vue

@@ -88,11 +88,20 @@
                 Log in
               </NuxtLink>
             </MenuItem>
-            <div v-if="version" class="border-t border-outline-3 py-1 mt-1">
+
+            <div
+              class="border-t border-outline-3 py-1 mt-1 text-xs text-foreground-2 px-3 gap-1 flex flex-col"
+            >
+              <MenuItem v-if="version">
+                <div>Version {{ version }}</div>
+              </MenuItem>
               <MenuItem>
-                <div class="px-3 pt-1 text-tiny text-foreground-2">
-                  Version {{ version }}
-                </div>
+                <NuxtLink
+                  class="cursor-pointer text-foreground-2 hover:text-foreground"
+                  @click="copySupportReference"
+                >
+                  Copy support reference
+                </NuxtLink>
               </MenuItem>
             </div>
           </div>
@@ -112,6 +121,7 @@ import { useTheme } from '~~/lib/core/composables/theme'
 import { settingsUserRoutes, settingsServerRoutes } from '~/lib/common/helpers/route'
 import type { RouteLocationRaw } from 'vue-router'
 import { useServerInfo } from '~/lib/core/composables/server'
+import { useGenerateErrorReference } from '~/lib/core/composables/error'
 
 defineProps<{
   loginUrl?: RouteLocationRaw
@@ -122,6 +132,7 @@ const { activeUser, isGuest } = useActiveUser()
 const { isDarkTheme, toggleTheme } = useTheme()
 const { serverInfo } = useServerInfo()
 const menuButtonId = useId()
+const { copyReference } = useGenerateErrorReference()
 
 const showInviteDialog = ref(false)
 
@@ -131,4 +142,8 @@ const isAdmin = computed(() => activeUser.value?.role === Roles.Server.Admin)
 const toggleInviteDialog = () => {
   showInviteDialog.value = true
 }
+
+const copySupportReference = async () => {
+  await copyReference()
+}
 </script>

packages/frontend-2/layouts/loginOrRegister.vue

@@ -3,9 +3,19 @@
     <div class="absolute inset-0 pointer-events-none px-4 py-3">
       <div class="flex justify-between">
         <LogoBlock />
-        <FormButton size="sm" text class="pointer-events-auto" @click="toggleTheme">
-          <Icon class="w-4 h-4" />
-        </FormButton>
+        <div class="flex gap-2 items-center">
+          <FormButton size="sm" text class="pointer-events-auto" @click="toggleTheme">
+            <Icon class="w-4 h-4" />
+          </FormButton>
+          <FormButton
+            size="sm"
+            text
+            class="pointer-events-auto"
+            @click="() => copyReference()"
+          >
+            <WrenchIcon class="w-4 h-4" />
+          </FormButton>
+        </div>
       </div>
     </div>
     <div class="relative my-12 mx-4 w-full max-w-sm">
@@ -14,10 +24,12 @@
   </main>
 </template>
 <script setup lang="ts">
-import { SunIcon, MoonIcon } from '@heroicons/vue/24/solid'
+import { SunIcon, MoonIcon, WrenchIcon } from '@heroicons/vue/24/solid'
 import LogoBlock from '~/components/header/LogoBlock.vue'
+import { useGenerateErrorReference } from '~/lib/core/composables/error'
 import { useTheme } from '~~/lib/core/composables/theme'
 
 const { isDarkTheme, toggleTheme } = useTheme()
+const { copyReference } = useGenerateErrorReference()
 const Icon = computed(() => (isDarkTheme.value ? SunIcon : MoonIcon))
 </script>

packages/frontend-2/lib/core/composables/error.ts

@@ -91,7 +91,7 @@ type CreateErrorReferenceParams = {
   /**
    * Specify date to use in the error reference.
    */
-  date: Date | dayjs.Dayjs
+  date?: Date | dayjs.Dayjs
   /**
    * Optionally add extra payload to the logger.error() call
    */
@@ -103,9 +103,10 @@ export const useGenerateErrorReference = () => {
   const reqId = useRequestId({ forceFrontendValue: true })
   const serverReqId = useServerRequestId()
   const { copy } = useClipboard()
+  const { userId } = useActiveUser()
 
-  const createErrorReference = (params: CreateErrorReferenceParams) => {
-    const date = params.date
+  const createErrorReference = (params?: CreateErrorReferenceParams) => {
+    const date = params?.date || new Date()
 
     let base = `Reference: #${reqId}`
     if (serverReqId.value) base += ` | #${serverReqId.value}`
@@ -118,11 +119,13 @@ export const useGenerateErrorReference = () => {
     // New ID that will be unique to this copy of the reference and that will cause an error to be logged
     // that we can then easily find by this ID
     const newId = 'fe-error-' + nanoid()
-    base += ` | ID: ${newId}`
+    base += ` | Ref ID: ${newId}`
+    base += ` | User ID: ${userId.value || 'anonymous'}`
+
     logger.error(
       {
         errorId: newId,
-        extraPayload: params.extraPayload
+        extraPayload: params?.extraPayload
       },
       `Error reference logged: ${base}`
     )
@@ -130,7 +133,7 @@ export const useGenerateErrorReference = () => {
     return base
   }
 
-  const copyReference = async (params: CreateErrorReferenceParams) => {
+  const copyReference = async (params?: CreateErrorReferenceParams) => {
     await copy(createErrorReference(params), {
       successMessage: 'Reference copied. Please include this when contacting support.'
     })