.failed fetch pop up

frontend/src/App.tsx

@@ -629,7 +629,34 @@ function App() {
                 </DialogContent>
             </Dialog>
 
-            
+            <Dialog open={metadata.showVpnAdviceDialog} onOpenChange={metadata.setShowVpnAdviceDialog}>
+                <DialogContent className="max-w-md [&>button]:hidden">
+                    <DialogHeader>
+                        <DialogTitle>Fetch Failed</DialogTitle>
+                        <DialogDescription className="space-y-3">
+                            <span className="block">
+                                Metadata fetch failed. Try using a high-quality VPN such as
+                                Surfshark, ExpressVPN, Proton VPN, or a similar service.
+                            </span>
+                            <span className="block">
+                                Choose a location that is not blocked by Spotify or the
+                                related service, such as the USA, UK, Germany, Netherlands,
+                                or Singapore.
+                            </span>
+                            <span className="block">
+                                If you are already using a VPN, try switching to another
+                                server and fetch again.
+                            </span>
+                        </DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter>
+                        <Button onClick={() => metadata.setShowVpnAdviceDialog(false)}>
+                            Close
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
             <Dialog open={isFFmpegInstalled === false} onOpenChange={() => { }}>
                 <DialogContent className="max-w-[450px] [&>button]:hidden p-6 gap-5">
                     <DialogHeader className="space-y-2">

frontend/src/hooks/useMetadata.ts

@@ -8,6 +8,8 @@ import type { SpotifyMetadataResponse } from "@/types/api";
 export function useMetadata() {
     const [loading, setLoading] = useState(false);
     const [metadata, setMetadata] = useState<SpotifyMetadataResponse | null>(null);
+    const [showVpnAdviceDialog, setShowVpnAdviceDialog] = useState(false);
+    const [fetchFailureReason, setFetchFailureReason] = useState("");
     const loadingToastId = useRef<string | number | null>(null);
     const fetchedCount = useRef(0);
     const currentName = useRef("");
@@ -18,6 +20,10 @@ export function useMetadata() {
         external_urls: string;
     } | null>(null);
     const [pendingArtistName, setPendingArtistName] = useState<string | null>(null);
+    const showFetchFailureAdvice = (errorMsg: string) => {
+        setFetchFailureReason(errorMsg);
+        setShowVpnAdviceDialog(true);
+    };
     const resolveArtistUrlBySearch = async (artistName: string): Promise<string | null> => {
         const query = artistName.trim();
         if (!query) {
@@ -214,6 +220,7 @@ export function useMetadata() {
             const errorMsg = err instanceof Error ? err.message : "Failed to fetch metadata";
             logger.error(`fetch failed: ${errorMsg}`);
             toast.error(errorMsg);
+            showFetchFailureAdvice(errorMsg);
         }
         finally {
             setLoading(false);
@@ -316,6 +323,7 @@ export function useMetadata() {
             const errorMsg = err instanceof Error ? err.message : "Failed to fetch album metadata";
             logger.error(`fetch failed: ${errorMsg}`);
             toast.error(errorMsg);
+            showFetchFailureAdvice(errorMsg);
         }
         finally {
             setLoading(false);
@@ -325,6 +333,9 @@ export function useMetadata() {
     return {
         loading,
         metadata,
+        showVpnAdviceDialog,
+        setShowVpnAdviceDialog,
+        fetchFailureReason,
         showAlbumDialog,
         setShowAlbumDialog,
         selectedAlbum,