Better error messages for failed link cards

(cherry picked from commit 8cfdc094e1251b6d9490fabf80ae58c12241fcab)

src/lib/link-meta/link-meta.ts

@@ -1,8 +1,11 @@
 import {BskyAgent} from '@atproto/api'
-import {isBskyAppUrl} from '../strings/url-helpers'
-import {extractBskyMeta} from './bsky'
+import {msg} from '@lingui/macro'
+import {I18nContext} from '@lingui/react'
+
 import {LINK_META_PROXY} from 'lib/constants'
 import {getGiphyMetaUri} from 'lib/strings/embed-player'
+import {isBskyAppUrl} from '../strings/url-helpers'
+import {extractBskyMeta} from './bsky'
 
 export enum LikelyType {
   HTML,
@@ -26,7 +29,8 @@ export interface LinkMeta {
 export async function getLinkMeta(
   agent: BskyAgent,
   url: string,
-  timeout = 15e3,
+  timeout: number,
+  i18n: I18nContext['i18n'],
 ): Promise<LinkMeta> {
   if (isBskyAppUrl(url)) {
     return extractBskyMeta(agent, url)
@@ -58,9 +62,11 @@ export async function getLinkMeta(
     return meta
   }
 
+  const controller = new AbortController()
+  const signal = controller.signal
+
   try {
-    const controller = new AbortController()
-    const to = setTimeout(() => controller.abort(), timeout || 5e3)
+    const to = setTimeout(() => controller.abort('TIMEOUT'), timeout || 5e3)
 
     const response = await fetch(
       `${LINK_META_PROXY(agent.service.toString() || '')}${encodeURIComponent(
@@ -82,9 +88,13 @@ export async function getLinkMeta(
     meta.image = image
     meta.title = title
   } catch (e) {
-    // failed
-    console.error(e)
-    meta.error = e instanceof Error ? e.toString() : 'Failed to fetch link'
+    if (signal.aborted) {
+      meta.error = i18n._(
+        msg`We were unable to fetch a preview for this URL because the request timed out.`,
+      )
+    } else {
+      meta.error = i18n._(msg`We were unable to fetch a preview for this URL.`)
+    }
   }
 
   return meta

src/view/com/composer/useExternalLinkFetch.ts

@@ -1,4 +1,5 @@
 import {useEffect, useState} from 'react'
+import {useLingui} from '@lingui/react'
 
 import {logger} from '#/logger'
 import {useFetchDid} from '#/state/queries/handle'
@@ -26,6 +27,7 @@ export function useExternalLinkFetch({
 }: {
   setQuote: (opts: ComposerOpts['quote']) => void
 }) {
+  const {i18n} = useLingui()
   const [extLink, setExtLink] = useState<apilib.ExternalEmbedDraft | undefined>(
     undefined,
   )
@@ -95,7 +97,7 @@ export function useExternalLinkFetch({
           },
         )
       } else {
-        getLinkMeta(getAgent(), extLink.uri).then(meta => {
+        getLinkMeta(getAgent(), extLink.uri, 15e3, i18n).then(meta => {
           if (aborted) {
             return
           }
@@ -137,7 +139,7 @@ export function useExternalLinkFetch({
       })
     }
     return cleanup
-  }, [extLink, setQuote, getPost, fetchDid, getAgent])
+  }, [extLink, setQuote, getPost, fetchDid, getAgent, i18n])
 
   return {extLink, setExtLink}
 }