From 0e620cdefefbb3ddd042fa60630cb2e9820c835a Mon Sep 17 00:00:00 2001
From: Punk 6529 <108035228+punk6529@users.noreply.github.com>
Date: Tue, 16 Sep 2025 14:04:44 +0300
Subject: [PATCH] fix: add primary error callback to fallback image

Signed-off-by: ChatGPT <0+chatgpt@users.noreply.github.com>
---
 .../components/common/FallbackImage.test.tsx  | 36 +++++++++++++++++++
 components/common/FallbackImage.tsx           | 11 +++---
 2 files changed, 42 insertions(+), 5 deletions(-)
 create mode 100644 __tests__/components/common/FallbackImage.test.tsx

diff --git a/__tests__/components/common/FallbackImage.test.tsx b/__tests__/components/common/FallbackImage.test.tsx
new file mode 100644
index 0000000000..abeb4e14f7
--- /dev/null
+++ b/__tests__/components/common/FallbackImage.test.tsx
@@ -0,0 +1,36 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+
+import { FallbackImage } from '../../../components/common/FallbackImage';
+
+describe('FallbackImage', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('falls back without logging to the console', async () => {
+    const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
+    const onPrimaryError = jest.fn();
+
+    render(
+      <FallbackImage
+        primarySrc="primary.gif"
+        fallbackSrc="fallback.gif"
+        alt="fallback example"
+        onPrimaryError={onPrimaryError}
+      />
+    );
+
+    const image = screen.getByRole('img', { name: 'fallback example' });
+    expect(image.getAttribute('src')).toBe('primary.gif');
+
+    fireEvent.error(image);
+
+    await waitFor(() => {
+      expect(image.getAttribute('src')).toBe('fallback.gif');
+    });
+
+    expect(onPrimaryError).toHaveBeenCalledTimes(1);
+    expect(logSpy).not.toHaveBeenCalled();
+  });
+});
+
diff --git a/components/common/FallbackImage.tsx b/components/common/FallbackImage.tsx
index 659b625371..345fddf0c4 100644
--- a/components/common/FallbackImage.tsx
+++ b/components/common/FallbackImage.tsx
@@ -3,12 +3,13 @@
 import React from "react";
 
 type FallbackImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
-  primarySrc: string;   // try first (your downscaled gif)
-  fallbackSrc: string;  // use if primary fails (your original gif)
+  primarySrc: string; // try first (your downscaled gif)
+  fallbackSrc: string; // use if primary fails (your original gif)
+  onPrimaryError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
 };
 
 export const FallbackImage = React.forwardRef<HTMLImageElement, FallbackImageProps>(
-  ({ primarySrc, fallbackSrc, alt = "", onError, ...rest }, ref) => {
+  ({ primarySrc, fallbackSrc, alt = "", onError, onPrimaryError, ...rest }, ref) => {
     const [src, setSrc] = React.useState(primarySrc);
     const [usedFallback, setUsedFallback] = React.useState(false);
 
@@ -20,7 +21,7 @@ export const FallbackImage = React.forwardRef<HTMLImageElement, FallbackImagePro
 
     const handleError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
       if (!usedFallback) {
-        console.log(`[FallbackImage] Primary failed: ${primarySrc}, falling back to: ${fallbackSrc}`);
+        onPrimaryError?.(e);
         setSrc(fallbackSrc);
         setUsedFallback(true);
       } else {
@@ -42,4 +43,4 @@ export const FallbackImage = React.forwardRef<HTMLImageElement, FallbackImagePro
   }
 );
 
-FallbackImage.displayName = "FallbackImage";
\ No newline at end of file
+FallbackImage.displayName = "FallbackImage";