Merge pull request #10152 from weseek/fix/153963-presentation-without-renderer-config

fix: Put render error message on PagePresentationModal and console

apps/app/src/client/components/Common/RendererErrorMessage.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export const RendererErrorMessage: React.FC = () => {
+  return (
+    <p className="alert alert-warning">
+      ⚠️ <strong>Developer Warning:</strong>{' '}
+      Required renderer configuration is missing. Ensure <code>useRendererConfig()</code> is properly called in the component.
+    </p>
+  );
+};

apps/app/src/client/components/PagePresentationModal.tsx

@@ -16,6 +16,7 @@ import { usePagePresentationModal } from '~/stores/modal';
 import { useSWRxCurrentPage } from '~/stores/page';
 import { usePresentationViewOptions } from '~/stores/renderer';
 
+import { RendererErrorMessage } from './Common/RendererErrorMessage';
 
 import styles from './PagePresentationModal.module.scss';
 
@@ -38,7 +39,7 @@ const PagePresentationModal = (): JSX.Element => {
   const fullscreen = useFullScreen();
 
   const { data: currentPage } = useSWRxCurrentPage();
-  const { data: rendererOptions } = usePresentationViewOptions();
+  const { data: rendererOptions, isLoading } = usePresentationViewOptions();
 
   const { data: isEnabledMarp } = useIsEnabledMarp();
 
@@ -87,6 +88,7 @@ const PagePresentationModal = (): JSX.Element => {
         <button className="btn-close" type="button" aria-label="Close" onClick={closeHandler}></button>
       </div>
       <ModalBody className="modal-body d-flex justify-content-center align-items-center">
+        { !isLoading && rendererOptions == null && <RendererErrorMessage />}
         { rendererOptions != null && isEnabledMarp != null && (
           <Presentation
             options={{

apps/app/src/stores/renderer.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import type { HtmlElementNode } from 'rehype-toc';
 import useSWR, { type SWRConfiguration, type SWRResponse } from 'swr';
@@ -8,10 +8,12 @@ import type { RendererOptions } from '~/interfaces/renderer-options';
 import type { RendererConfigExt } from '~/interfaces/services/renderer';
 import { useRendererConfig } from '~/stores-universal/context';
 import { useNextThemes } from '~/stores-universal/use-next-themes';
+import loggerFactory from '~/utils/logger';
 
 import { useCurrentPagePath } from './page';
 import { useCurrentPageTocNode } from './ui';
 
+const logger = loggerFactory('growi:cli:services:renderer');
 
 const useRendererConfigExt = (): RendererConfigExt | null => {
   const { data: rendererConfig } = useRendererConfig();
@@ -185,6 +187,12 @@ export const usePresentationViewOptions = (): SWRResponse<RendererOptions, Error
 
   const isAllDataValid = currentPagePath != null && rendererConfig != null;
 
+  useEffect(() => {
+    if (rendererConfig == null) {
+      logger.warn('RendererConfig is undefined or missing.');
+    }
+  }, [rendererConfig]);
+
   return useSWR(
     isAllDataValid
       ? ['presentationViewOptions', currentPagePath, rendererConfig]