Version 0.44.0 (#1041)

- dependency updates
- fix issues with preview in admin panel
- improved error tracking
- bug fixes

Author: wp99cp

package.json

@@ -1,6 +1,6 @@
 {
   "name": "conveniat27",
-  "version": "0.43.0",
+  "version": "0.44.0",
   "description": "The official website of conveniat27",
   "license": "MIT",
   "author": "Cyrill Püntener v/o JPG (cyrill.puentener@cevi.ch)",
@@ -66,17 +66,17 @@
     "@opentelemetry/sdk-trace-base": "^2.5.1",
     "@opentelemetry/sdk-trace-node": "^2.5.1",
     "@opentelemetry/semantic-conventions": "^1.40.0",
-    "@payloadcms/db-mongodb": "^3.79.0",
-    "@payloadcms/email-nodemailer": "^3.79.0",
-    "@payloadcms/live-preview-react": "^3.79.0",
-    "@payloadcms/next": "^3.79.0",
-    "@payloadcms/plugin-form-builder": "^3.79.0",
-    "@payloadcms/plugin-redirects": "^3.79.0",
-    "@payloadcms/plugin-search": "^3.79.0",
-    "@payloadcms/richtext-lexical": "^3.79.0",
-    "@payloadcms/richtext-slate": "^3.79.0",
-    "@payloadcms/storage-s3": "^3.79.0",
-    "@payloadcms/ui": "^3.79.0",
+    "@payloadcms/db-mongodb": "^3.79.1",
+    "@payloadcms/email-nodemailer": "^3.79.1",
+    "@payloadcms/live-preview-react": "^3.79.1",
+    "@payloadcms/next": "^3.79.1",
+    "@payloadcms/plugin-form-builder": "^3.79.1",
+    "@payloadcms/plugin-redirects": "^3.79.1",
+    "@payloadcms/plugin-search": "^3.79.1",
+    "@payloadcms/richtext-lexical": "^3.79.1",
+    "@payloadcms/richtext-slate": "^3.79.1",
+    "@payloadcms/storage-s3": "^3.79.1",
+    "@payloadcms/ui": "^3.79.1",
     "@posthog/nextjs-config": "^1.8.18",
     "@prisma/adapter-pg": "7.4.2",
     "@prisma/client": "7.4.2",
@@ -125,7 +125,7 @@
     "next-devtools-mcp": "^0.3.10",
     "next-i18n-router": "^5.5.6",
     "node-pop3": "^0.11.0",
-    "payload": "^3.79.0",
+    "payload": "^3.79.1",
     "posthog-js": "^1.356.1",
     "posthog-node": "^4.18.0",
     "qs-esm": "^7.0.3",
@@ -208,7 +208,7 @@
     "undici": "^7.22.0",
     "unrs-resolver": "^1.11.1"
   },
-  "packageManager": "pnpm@10.29.3+sha512.498e1fb4cca5aa06c1dcf2611e6fafc50972ffe7189998c409e90de74566444298ffe43e6cd2acdc775ba1aa7cc5e092a8b7054c811ba8c5770f84693d33d2dc",
+  "packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be",
   "engines": {
     "node": ">=24.1.0"
   },

pnpm-lock.yaml

@@ -0,0 +1,32 @@
+import type { Locale, StaticTranslationString } from '@/types/types';
+import { i18nConfig } from '@/types/types';
+import { DesignCodes } from '@/utils/design-codes';
+import { Loader2 } from 'lucide-react';
+import React from 'react';
+
+const loadingText: StaticTranslationString = {
+  de: 'Generiere Vorschau...',
+  en: 'Generating preview...',
+  fr: "Génération de l'aperçu...",
+};
+
+export function generateStaticParams(): { locale: string; design: string }[] {
+  const designs = Object.values(DesignCodes);
+  return designs.flatMap((design) => i18nConfig.locales.map((locale) => ({ locale, design })));
+}
+
+export default async function PreviewFallbackPage({
+  params,
+}: {
+  params: Promise<{ locale: Locale; design: DesignCodes }>;
+}): Promise<React.JSX.Element> {
+  const { locale } = await params;
+  const label = loadingText[locale];
+
+  return (
+    <div className="flex h-screen flex-col items-center justify-center gap-4 bg-gray-50 text-gray-500">
+      <Loader2 className="h-8 w-8 animate-spin text-gray-400" />
+      <span className="text-sm font-medium">{label}</span>
+    </div>
+  );
+}

src/app/(frontend)/[locale]/[design]/preview-fallback/page.tsx

@@ -1,30 +1,47 @@
 'use client'; // Error boundaries must be Client Components
 
 import type React from 'react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import '@/app/globals.scss';
 import { OnboardingLayout } from '@/features/onboarding/components/onboarding-layout';
 import { isDraftOrPreviewMode } from '@/utils/draft-mode';
 
+const DRAFT_MODE_RELOAD_DELAY_MS = 2000;
+
 /**
  * This file is responsible for converting a general runtime error page.
  *
  * If this page happens, there was an uncaught error in the root layout of the app;
  * normally this should never happen.
  *
+ * In draft/preview mode (Payload CMS Live Preview), transient network errors
+ * are expected when the server briefly restarts. Instead of showing an error page
+ * (which permanently breaks the iframe), we auto-reload after a short delay.
+ *
  * @param error
  * @constructor
  */
 const GlobalError: React.FC<{
   error: Error & { digest?: string };
 }> = ({ error }) => {
+  const [isRecovering, setIsRecovering] = useState(false);
+
   useEffect(() => {
-    // Skip offline redirect in draft mode (Payload admin panel) or preview mode (?preview=true)
-    // In these modes, errors should be handled by the backend
+    // In draft/preview mode, auto-reload instead of showing the error page.
+    // This prevents the Payload CMS Live Preview iframe from getting stuck.
     if (isDraftOrPreviewMode()) {
-      console.error('[GlobalError] Error in draft mode, not redirecting to offline page:', error);
-      return;
+      console.warn(
+        '[GlobalError] Transient error in draft/preview mode. Auto-reloading in 2s:',
+        error.message,
+      );
+      setIsRecovering(true);
+      const timer = setTimeout((): void => {
+        globalThis.location.reload();
+      }, DRAFT_MODE_RELOAD_DELAY_MS);
+      return (): void => {
+        clearTimeout(timer);
+      };
     }
 
     // Check if the error is likely due to being offline (e.g., failed to load a JS chunk)
@@ -58,8 +75,22 @@ const GlobalError: React.FC<{
         })
         .catch((error_: unknown) => console.error('Failed to capture error with PostHog', error_));
     }
+    return;
   }, [error]);
 
+  // In draft/preview mode, show a minimal recovery message instead of the full error page
+  if (isRecovering) {
+    return (
+      <html>
+        <body>
+          <div className="flex h-dvh w-dvw flex-col items-center justify-center bg-gray-50 p-4">
+            <p className="text-gray-500">Verbindung wird wiederhergestellt</p>
+          </div>
+        </body>
+      </html>
+    );
+  }
+
   return (
     <html>
       <body>

src/app/(payload)/admin/importMap.js

@@ -2,12 +2,47 @@
 
 import { RefreshRouteOnSave as PayloadLivePreview } from '@payloadcms/live-preview-react';
 import { useRouter } from 'next/navigation';
-import React from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 
+/**
+ * Returns a debounced refresh handler that calls `router.refresh()` after the specified delay.
+ * Any pending timeout is cleared when the component using this hook unmounts.
+ *
+ * @param delayMs - Debounce delay in milliseconds before refreshing the route.
+ * @returns A debounced refresh callback.
+ */
+function useDebouncedRouteRefresh(delayMs: number): () => void {
+  const router = useRouter();
+  const timerReference = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    return (): void => {
+      if (timerReference.current) {
+        clearTimeout(timerReference.current);
+      }
+    };
+  }, []);
+
+  const handleRefresh = useCallback(() => {
+    if (timerReference.current) {
+      clearTimeout(timerReference.current);
+    }
+    // Delay the actual refresh by the configured debounce duration to prevent overwhelming the server
+    // with RSC queries and hitting Traefik/Next.js concurrent stream limit timeouts.
+    timerReference.current = setTimeout(() => {
+      router.refresh();
+    }, delayMs);
+  }, [router, delayMs]);
+
+  return handleRefresh;
+}
+
+/**
+ * Client component that wires Payload live preview to a debounced Next.js route refresh.
+ */
 export const RefreshRouteOnSave: React.FC<{
   serverURL: string;
 }> = ({ serverURL }) => {
-  const router = useRouter();
-
-  return <PayloadLivePreview refresh={() => router.refresh()} serverURL={serverURL} />;
+  const handleRefresh = useDebouncedRouteRefresh(750);
+  return <PayloadLivePreview refresh={handleRefresh} serverURL={serverURL} />;
 };

src/app/global-error.tsx

@@ -76,7 +76,12 @@ export const getBlogArticleBySlugCached = cache(
         },
       });
 
-      return { docs: result.docs };
+      // deduplicate by id in case of internal payload cms duplicate bugs
+      const uniqueDocuments = [
+        ...new Map(result.docs.map((document_) => [document_.id, document_])).values(),
+      ];
+
+      return { docs: uniqueDocuments };
     });
   },
 );

src/components/utils/refresh-preview.tsx

@@ -34,7 +34,12 @@ export const getGenericPageBySlugCached = cache(
         },
       });
 
-      return { docs: result.docs };
+      // deduplicate by id in case of internal payload cms duplicate bugs
+      const uniqueDocuments = [
+        ...new Map(result.docs.map((document_) => [document_.id, document_])).values(),
+      ];
+
+      return { docs: uniqueDocuments };
     });
   },
 );

src/features/payload-cms/api/cached-blogs.ts

@@ -51,8 +51,14 @@ const BlogPostPage: LocalizedCollectionComponent = async ({
     renderInPreviewMode,
   );
 
-  if (articlesInPrimaryLanguage.docs.length > 1)
-    throw new Error('More than one article with the same slug found');
+  if (articlesInPrimaryLanguage.docs.length > 1) {
+    const conflicting = articlesInPrimaryLanguage.docs
+      .map((document_) => `id=${document_.id}, internalPageName="${document_.internalPageName}"`)
+      .join('; ');
+    throw new Error(
+      `More than one article with the same slug found (slug="${slug}", locale="${locale}"). Conflicting pages: [${conflicting}]`,
+    );
+  }
 
   const articleInPrimaryLanguage = articlesInPrimaryLanguage.docs[0];
 

src/features/payload-cms/api/cached-generic-pages.ts

@@ -59,8 +59,14 @@ const GenericPage: LocalizedCollectionComponent = async ({
     renderInPreviewMode,
   );
 
-  if (articlesInPrimaryLanguage.docs.length > 1)
-    throw new Error('More than one article with the same slug found');
+  if (articlesInPrimaryLanguage.docs.length > 1) {
+    const conflicting = articlesInPrimaryLanguage.docs
+      .map((document_) => `id=${document_.id}, internalPageName="${document_.internalPageName}"`)
+      .join('; ');
+    throw new Error(
+      `More than one article with the same slug found (slug="${slug}", locale="${locale}"). Conflicting pages: [${conflicting}]`,
+    );
+  }
 
   const articleInPrimaryLanguage = articlesInPrimaryLanguage.docs[0];