fix(frontend): stop empty avatar src reporting failed image loads

frontend/src/components/input/editor/BlockquoteCommentView.vue

@@ -78,23 +78,23 @@ const authorName = computed(() => {
 	return p ? getDisplayName(p.author) : ''
 })
 
-const avatarUrl = ref('')
+const avatarUrl = ref<string>()
 
 // Bumped on every parent change so stale avatar fetches (older parent)
 // don't overwrite a newer one if the user navigates between comments
 // while fetches are still in flight.
 let avatarFetchToken = 0
 
 watch(parent, (p) => {
-	avatarUrl.value = ''
+	avatarUrl.value = undefined
 	const token = ++avatarFetchToken
 	if (!p?.author) {
 		return
 	}
 	fetchAvatarBlobUrl(p.author, 20)
 		.then((url) => {
 			if (token === avatarFetchToken) {
-				avatarUrl.value = (url as string) ?? ''
+				avatarUrl.value = url
 			}
 		})
 		.catch(() => {

frontend/src/components/input/editor/mention/MentionList.vue

@@ -44,7 +44,7 @@ interface MentionItem extends MentionNodeAttrs {
 	id: string
 	label: string
 	username: string
-	avatarUrl: string
+	avatarUrl: string | undefined
 }
 
 export default {

frontend/src/components/input/editor/mention/MentionUser.vue

@@ -1,6 +1,9 @@
 <template>
 	<NodeViewWrapper class="mention-user">
-		<img :src="avatarUrl">
+		<img
+			:src="avatarUrl"
+			alt=""
+		>
 		<span class="mention__label">
 			{{ node.attrs.label ?? node.attrs.id }}
 		</span>
@@ -15,14 +18,13 @@ import type { IUser } from '@/modelTypes/IUser'
 
 const props = defineProps(nodeViewProps)
 
-const avatarUrl = ref('')
+const avatarUrl = ref<string>()
 
 watch(
 	() => props.node.attrs.id,
 	async () => {
 		const username = props.node.attrs.id as string
-		const url = await fetchAvatarBlobUrl({username} as IUser, 32)
-		avatarUrl.value = url as string
+		avatarUrl.value = await fetchAvatarBlobUrl({username} as IUser, 32)
 	},
 	{immediate: true},
 )

frontend/src/components/input/editor/mention/mentionSuggestion.ts

@@ -13,7 +13,7 @@ interface MentionItem extends MentionNodeAttrs {
 	id: string
 	label: string
 	username: string
-	avatarUrl: string
+	avatarUrl: string | undefined
 }
 
 async function searchUsersForProject(projectId: number, query: string): Promise<MentionItem[]> {
@@ -25,15 +25,12 @@ async function searchUsersForProject(projectId: number, query: string): Promise<
 
 	// Fetch avatar URLs for all users
 	const usersWithAvatars = await Promise.all(
-		users.map(async (user) => {
-			const avatarUrl = await fetchAvatarBlobUrl(user, 32)
-			return {
-				id: user.username,
-				label: getDisplayName(user),
-				username: user.username,
-				avatarUrl: avatarUrl as string,
-			}
-		}),
+		users.map(async (user) => ({
+			id: user.username,
+			label: getDisplayName(user),
+			username: user.username,
+			avatarUrl: await fetchAvatarBlobUrl(user, 32),
+		})),
 	)
 
 	return usersWithAvatars

frontend/src/components/misc/User.vue

@@ -49,7 +49,7 @@ const {t} = useI18n({useScope: 'global'})
 
 const displayName = computed(() => getDisplayName(props.user))
 const isBot = computed(() => ((props.user as IUser & {botOwnerId?: number}).botOwnerId ?? 0) > 0)
-const avatarSrc = ref('')
+const avatarSrc = ref<string>()
 
 async function loadAvatar() {
 	avatarSrc.value = await fetchAvatarBlobUrl(props.user, props.avatarSize)

frontend/src/components/tasks/partials/Comments.vue

@@ -281,17 +281,21 @@ const newCommentText = ref('')
 const saved = ref<ITask['id'] | null>(null)
 const saving = ref<ITask['id'] | null>(null)
 
-const userAvatar = ref('')
+const userAvatar = ref<string>()
 const avatarCache = reactive(new Map<string, string>())
 
-function avatarFor(u: IUser, size: number) {
+function avatarFor(u: IUser, size: number): string | undefined {
 	const key = `${u.id}-${size}`
 	const cached = avatarCache.get(key)
 	if (!cached) {
-		fetchAvatarBlobUrl(u, size).then(url => avatarCache.set(key, url))
+		fetchAvatarBlobUrl(u, size).then(url => {
+			if (url) {
+				avatarCache.set(key, url)
+			}
+		})
 	}
 
-	return avatarCache.get(key) || ''
+	return cached
 }
 
 watch(() => authStore.info, async (nu) => {

frontend/src/models/user.test.ts

@@ -1,5 +1,5 @@
 import {describe, it, expect} from 'vitest'
-import {getDisplayName} from './user'
+import {fetchAvatarBlobUrl, getDisplayName} from './user'
 import type {IUser} from '@/modelTypes/IUser'
 
 function makeUser(overrides: Partial<IUser> = {}): IUser {
@@ -31,3 +31,9 @@ describe('getDisplayName', () => {
 		expect(getDisplayName(user)).toBe('janedoe')
 	})
 })
+
+describe('fetchAvatarBlobUrl', () => {
+	it('should resolve to undefined for a user without a username', async () => {
+		await expect(fetchAvatarBlobUrl({} as IUser)).resolves.toBeUndefined()
+	})
+})

frontend/src/models/user.ts

@@ -9,23 +9,24 @@ const avatarService = new AvatarService()
 const avatarCache = new Map<string, string>()
 const pendingRequests = new Map<string, Promise<string>>()
 
-export async function fetchAvatarBlobUrl(user: IUser, size = 50) {
+// Returns undefined, never '': Vue renders src="" which the browser resolves to the page
+// URL and reports as a failed image load.
+export async function fetchAvatarBlobUrl(user: IUser, size = 50): Promise<string | undefined> {
 	if (!user || !user.username) {
-		return ''
+		return undefined
 	}
 	const key = `${user.username}-${size}`
-	
-	// Return cached URL if available
-	if (avatarCache.has(key)) {
-		return avatarCache.get(key) as string
+
+	const cached = avatarCache.get(key)
+	if (cached) {
+		return cached
 	}
-	
-	// If there's already a pending request for this avatar, wait for it
-	if (pendingRequests.has(key)) {
-		return await pendingRequests.get(key) as string
+
+	const pending = pendingRequests.get(key)
+	if (pending) {
+		return await pending
 	}
 
-	// Create a new request
 	const requestPromise = avatarService.getBlobUrl(`/avatar/${user.username}?size=${size}`)
 		.then(url => {
 			avatarCache.set(key, url)

frontend/src/sentry.ts

@@ -56,16 +56,21 @@ export default async function setupSentry(app: App, router: Router) {
 	document.body.addEventListener(
 		'error',
 		(event) => {
-			if (!event.target) return
-
-			if (event.target.tagName === 'IMG') {
+			const target = event.target
+
+			if (target instanceof HTMLImageElement) {
+				// An empty or placeholder src resolves to the page URL and fires an error event
+				// without ever requesting anything, so there's no failed load to report.
+				const src = target.getAttribute('src')
+				if (!src || src === '#') return
+
 				Sentry.captureMessage(
-					`Failed to load image: ${event.target.src}`,
+					`Failed to load image: ${target.src}`,
 					'warning',
 				)
-			} else if (event.target.tagName === 'LINK') {
+			} else if (target instanceof HTMLLinkElement) {
 				Sentry.captureMessage(
-					`Failed to load css: ${event.target.href}`,
+					`Failed to load css: ${target.href}`,
 					'warning',
 				)
 			}

frontend/src/stores/auth.ts

@@ -92,7 +92,7 @@ export const useAuthStore = defineStore('auth', () => {
 	const needsTotpPasscode = ref(false)
 
 	const info = ref<IUser | null>(null)
-	const avatarUrl = ref('')
+	const avatarUrl = ref<string>()
 	const settings = ref<IUserSettings>(new UserSettingsModel())
 
 	const currentSessionId = ref<string | null>(null)