Merge branch 'feat/proxy_media_fallback' into 'develop'

feat: proxy media fallback and url preview fallback

Co-authored-by: 老周部落 <laozhoubuluo@gmail.com>

See merge request firefish/firefish!10693

packages/backend/src/server/proxy/proxy-media.ts

@@ -15,6 +15,23 @@ import { isMimeImage } from "@/misc/is-mime-image.js";
 import { inspect } from "node:util";
 
 export async function proxyMedia(ctx: Koa.Context) {
+	try {
+		proxyMediaInternal(ctx);
+	} catch (e) {
+		if (ctx.query.fallback) {
+			ctx.redirect("/static-assets/badges/error.webp");
+			return;
+		}
+		throw e;
+	}
+	if (ctx.status !== 200 && ctx.query.fallback) {
+		ctx.redirect("/static-assets/badges/error.webp");
+		return;
+	}
+	return;
+}
+
+async function proxyMediaInternal(ctx: Koa.Context) {
 	let url = "url" in ctx.query ? ctx.query.url : `https://${ctx.params.url}`;
 
 	if (typeof url !== "string") {
@@ -24,9 +41,10 @@ export async function proxyMedia(ctx: Koa.Context) {
 
 	url = url.replace("//", "/");
 
-	const { hostname } = new URL(url);
+	let hostname;
 	let resolvedIps;
 	try {
+		hostname = new URL(url);
 		resolvedIps = await promises.resolve(hostname);
 	} catch (error) {
 		ctx.status = 400;

packages/client/src/components/MkUrlPreview.vue

@@ -17,7 +17,11 @@
 				}"
 			>
 				<div v-if="thumbnail" class="thumbnail">
-					<img :src="thumbnail" loading="lazy" />
+					<img
+						:src="thumbnail"
+						onerror="this.src='/static-assets/badges/error.webp'"
+						loading="lazy"
+					/>
 					<button
 						v-if="tweetId"
 						v-tooltip="
@@ -55,7 +59,12 @@
 					<p :title="description">
 						<span>
 							<span :title="sitename || undefined">
-								<img v-if="icon" class="icon" :src="icon" />
+								<img
+									v-if="icon"
+									class="icon"
+									:src="icon"
+									onerror="this.src='/static-assets/badges/error.webp'"
+								/>
 								{{ sitename }}
 							</span>
 							{{ description }}