From ff513743341e0b9889bb8d66543e82caaa77d169 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 2 May 2024 10:51:57 -0500
Subject: [PATCH] Better error messages for failed link cards

(cherry picked from commit 8cfdc094e1251b6d9490fabf80ae58c12241fcab)
---
 src/lib/link-meta/link-meta.ts                | 26 +++++++++++++------
 src/view/com/composer/useExternalLinkFetch.ts |  6 +++--
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/lib/link-meta/link-meta.ts b/src/lib/link-meta/link-meta.ts
index fa951432e8..19616cd067 100644
--- a/src/lib/link-meta/link-meta.ts
+++ b/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
diff --git a/src/view/com/composer/useExternalLinkFetch.ts b/src/view/com/composer/useExternalLinkFetch.ts
index d51dec42b1..8835e900b5 100644
--- a/src/view/com/composer/useExternalLinkFetch.ts
+++ b/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}
 }