Fix: Prevent attachment to crash when asset-server is not available

specifyweb/frontend/js_src/lib/components/Attachments/Preview.tsx

@@ -4,7 +4,7 @@ import { useAsyncState } from '../../hooks/useAsyncState';
 import type { SerializedResource } from '../DataModel/helperTypes';
 import type { Attachment } from '../DataModel/types';
 import type { AttachmentThumbnail } from './attachments';
-import { fetchThumbnail } from './attachments';
+import { fetchThumbnail, reportAttachmentServerFailure } from './attachments';
 
 export function AttachmentPreview({
   attachment,
@@ -56,6 +56,11 @@ export function Thumbnail({
         width: `${thumbnail.width}px`,
         height: `${thumbnail.height}px`,
       }}
+      onError={
+        thumbnail.src.startsWith('http')
+          ? reportAttachmentServerFailure
+          : undefined
+      }
     />
   );
 }

specifyweb/frontend/js_src/lib/components/Attachments/Viewer.tsx

@@ -29,7 +29,12 @@ import {
 } from '../Forms/useViewDefinition';
 import { loadingGif } from '../Molecules';
 import { userPreferences } from '../Preferences/userPreferences';
-import { fetchOriginalUrl, fetchThumbnail } from './attachments';
+import {
+  fetchOriginalUrl,
+  fetchThumbnail,
+  reportAttachmentServerFailure,
+  useAttachmentServerStatus,
+} from './attachments';
 import { AttachmentRecordLink, getAttachmentTable } from './Cell';
 import { Thumbnail } from './Preview';
 
@@ -48,6 +53,7 @@ export function AttachmentViewer({
     | ((table: SpecifyTable, recordId: number) => void)
     | undefined;
 }): JSX.Element {
+  const attachmentServerStatus = useAttachmentServerStatus();
   const serialized = React.useMemo(
     () => serializeResource(attachment),
     [attachment]
@@ -136,7 +142,9 @@ export function AttachmentViewer({
   return (
     <>
       <div className="flex min-h-[theme(spacing.60)] w-full min-w-[theme(spacing.60)] flex-1 items-center justify-center">
-        {displayOriginal === 'full' && !isTiffImage ? (
+        {attachmentServerStatus === 'unavailable' ? (
+          <AttachmentServerUnavailable />
+        ) : displayOriginal === 'full' && !isTiffImage ? (
           originalUrl === undefined ? (
             loadingGif
           ) : type === 'image' ? (
@@ -192,6 +200,7 @@ export function AttachmentViewer({
                 alt={title}
                 className="h-full w-full object-scale-down"
                 src={thumbnail?.src}
+                onError={reportAttachmentServerFailure}
               />
             </object>
           )
@@ -229,25 +238,29 @@ export function AttachmentViewer({
             <span className="flex-1" />
             {typeof originalUrl === 'string' && (
               <div className="flex flex-wrap gap-2">
-                <Component
-                  className="flex-1 whitespace-nowrap"
-                  download={new URL(originalUrl).searchParams.get(
-                    'downloadname'
-                  )}
-                  href={`/attachment_gw/proxy/${new URL(originalUrl).search}`}
-                  target="_blank"
-                  onClick={undefined}
-                >
-                  {notificationsText.download()}
-                </Component>
-                <Component
-                  className="flex-1 whitespace-nowrap"
-                  href={originalUrl}
-                  target="_blank"
-                  onClick={undefined}
-                >
-                  {commonText.openInNewTab()}
-                </Component>
+                {attachmentServerStatus !== 'unavailable' && (
+                  <>
+                    <Component
+                      className="flex-1 whitespace-nowrap"
+                      download={new URL(originalUrl).searchParams.get(
+                        'downloadname'
+                      )}
+                      href={`/attachment_gw/proxy/${new URL(originalUrl).search}`}
+                      target="_blank"
+                      onClick={undefined}
+                    >
+                      {notificationsText.download()}
+                    </Component>
+                    <Component
+                      className="flex-1 whitespace-nowrap"
+                      href={originalUrl}
+                      target="_blank"
+                      onClick={undefined}
+                    >
+                      {commonText.openInNewTab()}
+                    </Component>
+                  </>
+                )}
                 {typeof table === 'object' &&
                 typeof handleViewRecord === 'function' ? (
                   <AttachmentRecordLink
@@ -286,12 +299,20 @@ function ImageTransformContent({
   readonly thumbnail: string | undefined;
 }): JSX.Element {
   const { resetTransform } = useControls();
+  const thumbnailFallbackAttempted = React.useRef(false);
+  const [imageFailed, setImageFailed] = React.useState(false);
   const handleError = React.useCallback(
     (event: React.SyntheticEvent<HTMLImageElement>) => {
-      if (typeof thumbnail === 'string') {
+      if (
+        !thumbnailFallbackAttempted.current &&
+        typeof thumbnail === 'string'
+      ) {
+        thumbnailFallbackAttempted.current = true;
         const image = event.currentTarget;
-        image.onerror = null;
         image.src = thumbnail;
+      } else {
+        setImageFailed(true);
+        reportAttachmentServerFailure();
       }
     },
     [thumbnail]
@@ -310,13 +331,17 @@ function ImageTransformContent({
         wrapperClass="flex h-full w-full items-center justify-center"
         wrapperStyle={{ height: '100%', width: '100%' }}
       >
-        <img
-          alt={alt}
-          className="h-full w-full max-h-full max-w-full object-contain"
-          src={src}
-          onError={handleError}
-          onLoad={handleLoad}
-        />
+        {imageFailed ? (
+          <AttachmentServerUnavailable />
+        ) : (
+          <img
+            alt={alt}
+            className="h-full w-full max-h-full max-w-full object-contain"
+            src={src}
+            onError={handleError}
+            onLoad={handleLoad}
+          />
+        )}
       </TransformComponent>
       {showControls ? (
         <div
@@ -334,6 +359,15 @@ function ImageTransformContent({
   );
 }
 
+function AttachmentServerUnavailable(): JSX.Element {
+  return (
+    <div className="flex flex-col items-center gap-2 p-4 text-center">
+      <strong>{attachmentsText.attachmentServerUnavailable()}</strong>
+      <span>{attachmentsText.attachmentServerUnavailableDescription()}</span>
+    </div>
+  );
+}
+
 function ZoomControls({
   canToggleSidebar,
   isSidebarExpanded,

specifyweb/frontend/js_src/lib/components/Attachments/__tests__/AttachmentsView.test.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import * as Router from 'react-router-dom';
+
+import { requireContext } from '../../../tests/helpers';
+import { mount } from '../../../tests/reactUtils';
+import { commonText } from '../../../localization/common';
+import { attachmentsText } from '../../../localization/attachments';
+import { SetMenuContext } from '../../Header/MenuContext';
+import {
+  attachmentSettingsPromise,
+  overrideAttachmentServerStatus,
+} from '../attachments';
+import { AttachmentsView } from '..';
+
+/*
+ * Bypass the paginated attachment fetches (a pre-existing, unrelated bug in
+ * useAsyncState's real implementation crashes when exercised here); only the
+ * status-driven rendering is under test
+ */
+jest.mock('../../../hooks/useAsyncState', () => {
+  const ReactModule = require('react');
+  return {
+    __esModule: true,
+    useAsyncState: () => ReactModule.useState(undefined),
+    usePromise: (promise: Promise<unknown>) => {
+      const [state, setState] = ReactModule.useState(undefined);
+      ReactModule.useEffect(() => {
+        let ignore = false;
+        promise.then((value: unknown) => {
+          if (!ignore) setState(value);
+        });
+        return () => {
+          ignore = true;
+        };
+      }, [promise]);
+      return [state, setState];
+    },
+  };
+});
+
+requireContext();
+
+function TestAttachmentsView(): JSX.Element {
+  return (
+    <Router.MemoryRouter
+      future={{
+        v7_relativeSplatPath: true,
+        v7_startTransition: true,
+      }}
+    >
+      <SetMenuContext.Provider value={jest.fn()}>
+        <AttachmentsView />
+      </SetMenuContext.Provider>
+    </Router.MemoryRouter>
+  );
+}
+
+describe('AttachmentsView', () => {
+  beforeEach(async () => {
+    await attachmentSettingsPromise;
+  });
+
+  test('replaces the gallery with a single unavailable message and disables Import', async () => {
+    overrideAttachmentServerStatus('unavailable');
+
+    const { findByRole } = mount(<TestAttachmentsView />);
+
+    await findByRole('heading', {
+      name: attachmentsText.attachmentServerUnavailable(),
+    });
+
+    const importButton = await findByRole('button', {
+      name: commonText.import(),
+    });
+    expect(importButton).toBeDisabled();
+    expect(importButton).toHaveAttribute(
+      'title',
+      attachmentsText.attachmentServerUnavailable()
+    );
+  });
+
+  test('shows the gallery and an enabled Import button when available', async () => {
+    overrideAttachmentServerStatus('available');
+
+    const { findByRole, queryByRole } = mount(<TestAttachmentsView />);
+
+    const importButton = await findByRole('button', {
+      name: commonText.import(),
+    });
+    expect(importButton).toBeEnabled();
+    expect(
+      queryByRole('heading', {
+        name: attachmentsText.attachmentServerUnavailable(),
+      })
+    ).not.toBeInTheDocument();
+  });
+});

specifyweb/frontend/js_src/lib/components/Attachments/__tests__/attachmentServerStatus.test.ts

@@ -0,0 +1,120 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+
+import { overrideAjax } from '../../../tests/ajax';
+import { requireContext } from '../../../tests/helpers';
+import { Http } from '../../../utils/ajax/definitions';
+import {
+  attachmentSettingsPromise,
+  overrideAttachmentServerStatus,
+  overrideAttachmentSettings,
+  reportAttachmentServerFailure,
+  useAttachmentServerStatus,
+} from '../attachments';
+
+requireContext();
+
+const mockReadUrl = '/mockAssetServer/fileget';
+
+const testSettings = {
+  collection: 'Test Collection',
+  delete: '/mockAssetServer/filedelete',
+  getmetadata: '/mockAssetServer/getmetadata',
+  read: mockReadUrl,
+  testkey: '/mockAssetServer/testkey',
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  token_required_for_get: false,
+  write: '/mockAssetServer/fileupload',
+};
+
+// Silences (and lets tests assert on) the connection-loss/restoration logging
+let consoleError: jest.SpiedFunction<typeof console.error>;
+let consoleWarn: jest.SpiedFunction<typeof console.warn>;
+
+beforeEach(async () => {
+  await attachmentSettingsPromise;
+  overrideAttachmentSettings(testSettings);
+  overrideAttachmentServerStatus('available');
+  consoleError = jest
+    .spyOn(console, 'error')
+    .mockImplementation(() => undefined);
+  consoleWarn = jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+});
+
+afterEach(() => {
+  overrideAttachmentSettings(undefined);
+  consoleError.mockRestore();
+  consoleWarn.mockRestore();
+});
+
+describe('reportAttachmentServerFailure', () => {
+  describe('when a health check confirms the server is reachable', () => {
+    overrideAjax(mockReadUrl, '', { responseCode: Http.OK });
+
+    test('a single caller error does not mark the server unavailable', async () => {
+      const { result, unmount } = renderHook(() => useAttachmentServerStatus());
+      expect(result.current).toBe('available');
+
+      act(() => reportAttachmentServerFailure());
+
+      await waitFor(() => expect(result.current).toBe('available'));
+      unmount();
+    });
+  });
+
+  describe('when a health check confirms the server is unreachable', () => {
+    overrideAjax(mockReadUrl, '', { responseCode: Http.SERVER_ERROR });
+
+    test('marks the server unavailable', async () => {
+      const { result, unmount } = renderHook(() => useAttachmentServerStatus());
+      expect(result.current).toBe('available');
+
+      act(() => reportAttachmentServerFailure());
+
+      await waitFor(() => expect(result.current).toBe('unavailable'));
+      unmount();
+    });
+  });
+
+  test('does nothing when no settings are configured', () => {
+    overrideAttachmentSettings(undefined);
+    expect(() => reportAttachmentServerFailure()).not.toThrow();
+  });
+});
+
+describe('connection loss/restoration logging', () => {
+  overrideAjax(mockReadUrl, '', { responseCode: Http.SERVER_ERROR });
+
+  test('logs connection loss exactly once, and only once further failures are reported', async () => {
+    const { result, unmount } = renderHook(() => useAttachmentServerStatus());
+    expect(result.current).toBe('available');
+
+    act(() => reportAttachmentServerFailure());
+    await waitFor(() => expect(result.current).toBe('unavailable'));
+
+    expect(consoleError).toHaveBeenCalledTimes(1);
+    expect(consoleWarn).not.toHaveBeenCalled();
+
+    act(() => reportAttachmentServerFailure());
+    await waitFor(() => expect(consoleError).toHaveBeenCalledTimes(1));
+
+    unmount();
+  });
+});
+
+describe('useAttachmentServerStatus polling', () => {
+  beforeEach(() => jest.useFakeTimers());
+  afterEach(() => jest.useRealTimers());
+
+  test('keeps the shared interval running until the last subscriber unmounts', () => {
+    const first = renderHook(() => useAttachmentServerStatus());
+    const second = renderHook(() => useAttachmentServerStatus());
+
+    expect(jest.getTimerCount()).toBe(1);
+
+    first.unmount();
+    expect(jest.getTimerCount()).toBe(1);
+
+    second.unmount();
+    expect(jest.getTimerCount()).toBe(0);
+  });
+});