Version 0.44.1 (#1054)

- chore: disable error page for admin panel

Author: wp99cp

package.json

@@ -1,6 +1,6 @@
 {
   "name": "conveniat27",
-  "version": "0.44.0",
+  "version": "0.44.1",
   "description": "The official website of conveniat27",
   "license": "MIT",
   "author": "Cyrill Püntener v/o JPG (cyrill.puentener@cevi.ch)",

src/app/global-error.tsx

@@ -28,11 +28,27 @@ const GlobalError: React.FC<{
   const [isRecovering, setIsRecovering] = useState(false);
 
   useEffect(() => {
+    // Check if the error is likely due to being offline (e.g., failed to load a JS chunk)
+    const isOfflineError =
+      !navigator.onLine ||
+      error.name === 'ChunkLoadError' ||
+      error.message.toLowerCase().includes('failed to fetch') ||
+      error.message.toLowerCase().includes('network error');
+
+    // Completely disable global offline redirection for the Payload CMS admin panel.
+    // Payload has its own offline handling and error boundaries.
+    const isAdminPanel =
+      typeof globalThis !== 'undefined' && globalThis.location.pathname.startsWith('/admin');
+
     // 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()) {
+    // We also do this for transient network errors in the admin panel to prevent the
+    // root error boundary from permanently replacing the admin UI with a red error screen.
+    const isTransientAdminError = isAdminPanel && isOfflineError;
+
+    if (isDraftOrPreviewMode() || isTransientAdminError) {
       console.warn(
-        '[GlobalError] Transient error in draft/preview mode. Auto-reloading in 2s:',
+        '[GlobalError] Transient error in admin/preview mode. Auto-reloading in 2s:',
         error.message,
       );
       setIsRecovering(true);
@@ -44,14 +60,7 @@ const GlobalError: React.FC<{
       };
     }
 
-    // Check if the error is likely due to being offline (e.g., failed to load a JS chunk)
-    const isOfflineError =
-      !navigator.onLine ||
-      error.name === 'ChunkLoadError' ||
-      error.message.toLowerCase().includes('failed to fetch') ||
-      error.message.toLowerCase().includes('network error');
-
-    if (isOfflineError) {
+    if (isOfflineError && !isAdminPanel) {
       console.error('[GlobalError] Network/Offline error detected:', {
         message: error.message,
         name: error.name,

src/features/map/api/map-router.ts

@@ -1,4 +1,5 @@
 import { createTRPCRouter, trpcBaseProcedure } from '@/trpc/init';
+import { formatHexColor } from '@/utils/format-hex-color';
 import config from '@payload-config';
 import { getPayload } from 'payload';
 
@@ -36,7 +37,7 @@ export const mapRouter = createTRPCRouter({
         return {
           id: document_.id,
           title: document_.title,
-          color: document_.color ?? '#47564c',
+          color: formatHexColor(document_.color) ?? '#47564c',
           coordinates:
             rawCoords
               ?.map((coord) => {

src/features/map/components/camp-map-component.tsx

@@ -10,6 +10,7 @@ import type {
 import { resolveLinksInArray } from '@/features/payload-cms/payload-cms/utils/resolve-rich-text-links';
 import type { CampMapAnnotation as CampMapAnnotationPayloadDocumentType } from '@/features/payload-cms/payload-types';
 import type { Locale } from '@/types/types';
+import { formatHexColor } from '@/utils/format-hex-color';
 import config from '@payload-config';
 import { cacheLife, cacheTag } from 'next/cache';
 import { getPayload, type PaginatedDocs } from 'payload';
@@ -93,7 +94,7 @@ export const CampMapComponent: React.FC<{
           icon: document_.icon ?? 'MapPin',
           openingHours: document_.openingHours,
           images: document_.images ?? [],
-          color: document_.color ?? '#47564c',
+          color: formatHexColor(document_.color) ?? '#47564c',
         }) as CampMapAnnotationPoint,
     );
 
@@ -117,7 +118,7 @@ export const CampMapComponent: React.FC<{
         icon: document_.icon ?? 'Tent',
         openingHours: isInteractive ? document_.openingHours : undefined,
         images: isInteractive ? (document_.images ?? []) : [],
-        color: document_.color ?? '#47564c',
+        color: formatHexColor(document_.color) ?? '#47564c',
         isInteractive,
       } as CampMapAnnotationPolygon;
     });

src/features/payload-cms/payload-cms/shared-fields/map-coordinates/map-coordinates-field.tsx

@@ -126,7 +126,7 @@ const MapCoordinatesField: PointFieldClientComponent = ({ path }) => {
         const coordinates: [number, number][] = rawCoords.map((c) => [c.longitude, c.latitude]);
         polygonFeatures.push({
           type: 'Feature',
-          properties: { color: item.color ?? '#78909c' },
+          properties: { color: formatHexColor(item.color) ?? '#78909c' },
           geometry: {
             type: 'Polygon',
             coordinates: [coordinates],

src/features/payload-cms/payload-cms/shared-fields/map-polygon/map-polygon-field.tsx

@@ -300,7 +300,7 @@ const MapPolygonField: FieldClientComponent = ({ path }) => {
         ]);
         polygonFeatures.push({
           type: 'Feature',
-          properties: { color: item.color ?? '#78909c' },
+          properties: { color: formatHexColor(item.color) ?? '#78909c' },
           geometry: {
             type: 'Polygon',
             coordinates: [coordinates],

src/features/payload-cms/payload-cms/tasks/check-hitobito-approvals/index.ts

@@ -36,7 +36,7 @@ export const checkHitobitoApprovalsTask: TaskConfig<'checkHitobitoApprovals'> =
   },
   schedule: [
     {
-      cron: '0 */2 * * *', // Every 2 hours
+      cron: '*/5 * * * *', // Every 5 minutes
       queue: DEFAULT_QUEUE,
       hooks: {
         beforeSchedule: async ({

src/features/service-worker/offline-support/fetch-handler.ts

@@ -290,11 +290,16 @@ export const handleFetchEvent =
     const isIngestRequest = url.pathname.startsWith('/ingest');
     const isTrpcRequest = url.pathname.startsWith('/api/trpc/');
 
-    // Bypass service worker entirely for admin panel, auth requests, ingest, and trpc requests
-    const bypassSW =
-      isPreviewRequest || isAdminPanel || isAuthRequest || isIngestRequest || isTrpcRequest;
+    // avoid the service worker for admin panel and ingest requests
+    if (isAdminPanel || isIngestRequest) {
+      return;
+    }
+
+    // Proxy bypass: We still want the SW to intercept these to provide the automatic
+    // HTML retry wrapper on connection drops, but we skip cache lookup strategies.
+    const bypassSWProxy = isPreviewRequest || isAuthRequest || isTrpcRequest;
 
-    if (bypassSW) {
+    if (bypassSWProxy) {
       event.respondWith(
         (async (): Promise<Response> => {
           try {

src/providers/post-hog-provider.tsx

@@ -81,17 +81,38 @@ export const PostHogProvider: React.FC<{ children: React.ReactNode }> = ({ child
       }
 
       // Silent fail Payload Live Preview iframe cross-origin disconnects (noise during rapid save)
+      // and generic background telemetry network errors from PostHog.
       if (
         message !== '' &&
-        message.includes('blocked a frame with origin') &&
+        (message.includes('blocked a frame with origin') ||
+          message === 'network error' ||
+          message.includes('failed to fetch')) &&
         (errorEvent.filename.includes('posthog') || errorEvent.filename === '')
       ) {
         errorEvent.stopImmediatePropagation();
         errorEvent.preventDefault();
       }
     };
 
-    const handleUnhandledRejection = (): void => {};
+    const handleUnhandledRejection = (event: PromiseRejectionEvent): void => {
+      const reason = typeof event.reason === 'string' ? event.reason.toLowerCase() : '';
+      const errorMessage = event.reason instanceof Error ? event.reason.message.toLowerCase() : '';
+      const stack = event.reason instanceof Error ? (event.reason.stack ?? '').toLowerCase() : '';
+
+      const isNetworkNoise =
+        reason.includes('network error') ||
+        reason.includes('failed to fetch') ||
+        errorMessage.includes('network error') ||
+        errorMessage.includes('failed to fetch');
+
+      // Only suppress if the rejection originates from PostHog internals
+      const isFromPostHog = stack.includes('posthog');
+
+      if (isNetworkNoise && isFromPostHog) {
+        event.stopImmediatePropagation();
+        event.preventDefault();
+      }
+    };
 
     globalThis.addEventListener('error', handleError, { capture: true });
     globalThis.addEventListener('unhandledrejection', handleUnhandledRejection, { capture: true });