fix: provide ResponsiveImage component to MDXRemote in dynamic routes to prevent crashes

.env

@@ -27,7 +27,7 @@ UMAMI_API_ENDPOINT=https://analytics.infra.mintel.me
 # Error Tracking (GlitchTip/Sentry)
 # ────────────────────────────────────────────────────────────────────────────
 # Optional: Leave empty to disable error tracking
-SENTRY_DSN=https://dcb81958-dbf2-4a3d-b422-875f4672c14b@glitchtip.infra.mintel.me/5
+SENTRY_DSN=https://dcb81958dbf24a3db422875f4672c14b@errors.infra.mintel.me/5
 
 # ────────────────────────────────────────────────────────────────────────────
 # Email Configuration (SMTP)

.env.production

@@ -16,7 +16,7 @@ UMAMI_WEBSITE_ID=d773ea10-a3b3-4ccf-9024-987e14c4d669
 UMAMI_API_ENDPOINT=https://analytics.infra.mintel.me
 
 # Error Tracking (GlitchTip/Sentry)
-SENTRY_DSN=https://dcb81958-dbf2-4a3d-b422-875f4672c14b@glitchtip.infra.mintel.me/5
+SENTRY_DSN=https://dcb81958dbf24a3db422875f4672c14b@errors.infra.mintel.me/5
 
 # Email Configuration (Mailgun)
 MAIL_HOST=smtp.eu.mailgun.org

app/[locale]/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import { notFound, redirect } from 'next/navigation';
+import { getImageProps } from 'next/image';
 import { Container, Badge, Heading } from '@/components/ui';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
@@ -49,10 +50,31 @@ const mdxComponents = {
   JsonLd,
   Button,
   Badge,
+  Heading,
   AnimatedCounter,
   GrowthChart,
   DeepDrillAnimation,
   DataGridPulse,
+  ResponsiveImage: (props: any) => {
+    let src = props.src;
+    if (typeof src === 'string' && src.startsWith('/_next/image')) {
+      try {
+        const urlParam = new URLSearchParams(src.split('?')[1]).get('url');
+        if (urlParam) src = decodeURIComponent(urlParam);
+      } catch (e) {}
+    }
+    const { props: { srcSet, src: finalSrc, sizes } } = getImageProps({
+      src,
+      alt: props.alt || '',
+      width: 1920,
+      height: 1080,
+      sizes: '(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 50vw',
+      quality: 80,
+    });
+    return (
+      <img {...props} src={finalSrc} srcSet={srcSet} sizes={sizes} loading="lazy" decoding="async" />
+    );
+  },
   // Standard HTML element mapping for consistent E-TIB typography
   h1: (props: any) => <Heading level={1} size="2" className="hidden" {...props} />, // Hidden because Hero handles H1
   h2: (props: any) => <Heading level={2} size="3" className="mt-16 mb-6 border-b border-neutral-100 pb-4" {...props} />,

app/[locale]/blog/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import { notFound, redirect } from 'next/navigation';
+import { getImageProps } from 'next/image';
 import JsonLd from '@/components/JsonLd';
 import { SITE_URL } from '@/lib/schema';
 import {
@@ -24,6 +25,26 @@ const mdxComponents = {
   h2: (props: any) => <Heading level={2} size="3" className="mt-16 mb-6 border-b border-neutral-100 pb-4" {...props} />,
   h3: (props: any) => <Heading level={3} size="4" className="mt-12 mb-4 text-primary" {...props} />,
   h4: (props: any) => <Heading level={4} size="5" className="mt-8 mb-4 uppercase tracking-widest text-neutral-500" {...props} />,
+  ResponsiveImage: (props: any) => {
+    let src = props.src;
+    if (typeof src === 'string' && src.startsWith('/_next/image')) {
+      try {
+        const urlParam = new URLSearchParams(src.split('?')[1]).get('url');
+        if (urlParam) src = decodeURIComponent(urlParam);
+      } catch (e) {}
+    }
+    const { props: { srcSet, src: finalSrc, sizes } } = getImageProps({
+      src,
+      alt: props.alt || '',
+      width: 1920,
+      height: 1080,
+      sizes: '(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 50vw',
+      quality: 80,
+    });
+    return (
+      <img {...props} src={finalSrc} srcSet={srcSet} sizes={sizes} loading="lazy" decoding="async" />
+    );
+  },
   p: (props: any) => <p className="text-base md:text-lg text-text-secondary leading-[1.8] mb-6 font-normal max-w-3xl" {...props} />,
   ul: (props: any) => <ul className="list-none mb-8 space-y-3 text-base md:text-lg text-text-secondary font-normal max-w-3xl" {...props} />,
   ol: (props: any) => <ol className="list-decimal pl-6 mb-8 space-y-3 text-base md:text-lg text-text-secondary font-normal max-w-3xl" {...props} />,

app/[locale]/errors/api/relay/route.ts

@@ -1,13 +1,83 @@
 import { NextResponse } from 'next/server';
+import https from 'https';
+
+const ALLOWED_HOSTS = ['glitchtip.infra.mintel.me', 'errors.infra.mintel.me'];
 
 export async function POST(req: Request) {
   try {
     const rawText = await req.text();
-    // Sentry sends NDJSON (Newline Delimited JSON). Split by newline to parse safely.
+    const items = rawText.split('\n');
-    const items = rawText.split('\n').filter(Boolean).map(line => JSON.parse(line));
+    
-    console.log("CLIENT ERROR INTERCEPTED:", JSON.stringify(items[0], null, 2));
+    if (items.length === 0 || !items[0]) {
+      return NextResponse.json({ error: 'Empty payload' }, { status: 400 });
+    }
+
+    const header = JSON.parse(items[0]);
+    // Use the server's configured DSN (if available) to override the client's potentially fake DSN
+    // This allows the client to work without exposing NEXT_PUBLIC_SENTRY_DSN
+    const dsn = process.env.SENTRY_DSN || header.dsn;
+    if (!dsn) {
+      return NextResponse.json({ error: 'No DSN found' }, { status: 400 });
+    }
+
+    const url = new URL(dsn);
+    const projectId = url.pathname.replace('/', '');
+    const host = url.hostname;
+
+    if (!ALLOWED_HOSTS.includes(host)) {
+      return NextResponse.json({ error: 'Invalid Sentry Host' }, { status: 400 });
+    }
+
+    // Rewrite the DSN in the envelope header so Glitchtip doesn't reject the fake client DSN
+    if (process.env.SENTRY_DSN) {
+      header.dsn = process.env.SENTRY_DSN;
+      items[0] = JSON.stringify(header);
+    }
+
+    const sentryIngestUrl = `https://${host}/api/${projectId}/envelope/`;
+    const payloadToForward = items.join('\n');
+
+    return new Promise<NextResponse>((resolve) => {
+      const req = https.request(
+        sentryIngestUrl,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/x-sentry-envelope',
+          },
+          // Bypass self-signed cert error since glitchtip.infra.mintel.me uses an internal CA
+          // that the Next.js docker container doesn't trust by default.
+          rejectUnauthorized: false,
+        },
+        (res) => {
+          res.on('data', () => {
+            // Consume data to free up memory
+          });
+          res.on('end', () => {
+            if (res.statusCode && res.statusCode >= 200 && res.statusCode < 300) {
+              resolve(NextResponse.json({ success: true }));
+            } else {
+              resolve(
+                NextResponse.json(
+                  { error: `Relay rejected (${res.statusCode})` },
+                  { status: res.statusCode || 500 }
+                )
+              );
+            }
+          });
+        }
+      );
+
+      req.on('error', (err) => {
+        console.error('[Sentry Tunnel] https.request failed', err);
+        resolve(NextResponse.json({ error: 'Relay failed' }, { status: 500 }));
+      });
+
+      req.write(payloadToForward);
+      req.end();
+    });
   } catch (e) {
-    console.log("Failed to parse relay body (NDJSON)", e);
+    console.error("[Sentry Tunnel] Failed to parse or relay body", e);
+    return NextResponse.json({ error: 'Relay failed' }, { status: 500 });
   }
-  return NextResponse.json({ success: true });
 }

app/[locale]/referenzen/page.tsx

@@ -1,4 +1,5 @@
 import { Container, Heading, Badge } from '@/components/ui';
+import { getImageProps } from 'next/image';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 import { Metadata } from 'next';
 import { getAllReferences } from '@/lib/references';
@@ -39,6 +40,27 @@ const mdxComponents = {
   ul: (props: any) => <ul className="grid grid-cols-1 gap-2 mb-6" {...props} />,
   li: CustomLi,
   p: (props: any) => <p className="text-neutral-600 text-sm mb-4 leading-relaxed" {...props} />,
+  Heading,
+  ResponsiveImage: (props: any) => {
+    let src = props.src;
+    if (typeof src === 'string' && src.startsWith('/_next/image')) {
+      try {
+        const urlParam = new URLSearchParams(src.split('?')[1]).get('url');
+        if (urlParam) src = decodeURIComponent(urlParam);
+      } catch (e) {}
+    }
+    const { props: { srcSet, src: finalSrc, sizes } } = getImageProps({
+      src,
+      alt: props.alt || '',
+      width: 1920,
+      height: 1080,
+      sizes: '(max-width: 768px) 100vw, (max-width: 1200px) 75vw, 50vw',
+      quality: 80,
+    });
+    return (
+      <img {...props} src={finalSrc} srcSet={srcSet} sizes={sizes} loading="lazy" decoding="async" />
+    );
+  },
 };
 
 interface PageProps {

content/de/team.mdx

@@ -23,6 +23,14 @@ layout: "fullBleed"
       phone: "+49 1520 7230518",
       image: "/assets/photos/team/danny.jpg"
     },
+    {
+      id: "kathrin-lemanski",
+      name: "Kathrin Lemanski",
+      position: "Kaufmännische Leitung",
+      email: "k.lemanski@e-tib.com",
+      phone: "+49 3561 6857733",
+      image: "/assets/photos/team/kathrin.jpg"
+    },
     {
       id: "dirk-schmidt",
       name: "Dirk Schmidt",
@@ -47,22 +55,6 @@ layout: "fullBleed"
       phone: "+49 171 3868167",
       image: "/assets/photos/team/martin.jpg"
     },
-    {
-      id: "kerstin-joseph",
-      name: "Kerstin Joseph",
-      position: "Sekretariat / Buchhaltung",
-      email: "k.joseph@e-tib.com",
-      phone: "+49 3561 6851692",
-      image: "/assets/photos/team/kerstin.jpg"
-    },
-    {
-      id: "kathrin-lemanski",
-      name: "Kathrin Lemanski",
-      position: "Sachbearbeitung",
-      email: "k.lemanski@e-tib.com",
-      phone: "+49 3561 6857733",
-      image: "/assets/photos/team/kathrin.jpg"
-    },
     {
       id: "sven-kirbs",
       name: "Sven Kirbs",
@@ -71,6 +63,21 @@ layout: "fullBleed"
       phone: "+49 151 29603652",
       image: "/assets/photos/team/sven.jpg"
     },
+    {
+      id: "kerstin-joseph",
+      name: "Kerstin Joseph",
+      position: "Buchhaltung / Controlling",
+      email: "k.joseph@e-tib.com",
+      phone: "+49 3561 6857733",
+      image: "/assets/photos/team/kerstin.jpg"
+    },
+    {
+      id: "katrin-haigold",
+      name: "Katrin Haigold",
+      position: "Buchhaltung / Personalwesen",
+      email: "k.haigold@e-tib.com",
+      phone: "+49 3561 6851692"
+    },
     {
       id: "maik-weichert",
       name: "Maik Weichert",

content/en/team.mdx

@@ -23,6 +23,14 @@ layout: "fullBleed"
       phone: "+49 1520 7230518",
       image: "/assets/photos/team/danny.jpg"
     },
+    {
+      id: "kathrin-lemanski",
+      name: "Kathrin Lemanski",
+      position: "Commercial Management",
+      email: "k.lemanski@e-tib.com",
+      phone: "+49 3561 6857733",
+      image: "/assets/photos/team/kathrin.jpg"
+    },
     {
       id: "dirk-schmidt",
       name: "Dirk Schmidt",
@@ -47,22 +55,6 @@ layout: "fullBleed"
       phone: "+49 171 3868167",
       image: "/assets/photos/team/martin.jpg"
     },
-    {
-      id: "kerstin-joseph",
-      name: "Kerstin Joseph",
-      position: "Secretariat / Accounting",
-      email: "k.joseph@e-tib.com",
-      phone: "+49 3561 6851692",
-      image: "/assets/photos/team/kerstin.jpg"
-    },
-    {
-      id: "kathrin-lemanski",
-      name: "Kathrin Lemanski",
-      position: "Administration",
-      email: "k.lemanski@e-tib.com",
-      phone: "+49 3561 6857733",
-      image: "/assets/photos/team/kathrin.jpg"
-    },
     {
       id: "sven-kirbs",
       name: "Sven Kirbs",
@@ -71,6 +63,21 @@ layout: "fullBleed"
       phone: "+49 151 29603652",
       image: "/assets/photos/team/sven.jpg"
     },
+    {
+      id: "kerstin-joseph",
+      name: "Kerstin Joseph",
+      position: "Accounting / Controlling",
+      email: "k.joseph@e-tib.com",
+      phone: "+49 3561 6857733",
+      image: "/assets/photos/team/kerstin.jpg"
+    },
+    {
+      id: "katrin-haigold",
+      name: "Katrin Haigold",
+      position: "Accounting / Human Resources",
+      email: "k.haigold@e-tib.com",
+      phone: "+49 3561 6851692"
+    },
     {
       id: "maik-weichert",
       name: "Maik Weichert",

messages/de.json

@@ -280,7 +280,7 @@
   "TeamGrid": {
     "badge": "Persönliche Beratung",
     "title": "Ihre Ansprechpartner",
-    "subtitle": "Sprechen Sie direkt mit unseren Experten für Ihr regionales Projekt.",
+    "subtitle": "Sprechen Sie direkt mit unseren Experten für Ihr Projekt.",
     "management": "Geschäftsführung",
     "branchETIB": "E-TIB GmbH",
     "branchIng": "Ingenieurgesellschaft",

messages/en.json

@@ -280,7 +280,7 @@
   "TeamGrid": {
     "badge": "Personal Consultation",
     "title": "Your Contacts",
-    "subtitle": "Speak directly with our experts for your regional project.",
+    "subtitle": "Speak directly with our experts for your project.",
     "management": "Management",
     "branchETIB": "E-TIB GmbH",
     "branchIng": "Engineering Company",

package.json

@@ -140,7 +140,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.4.34",
+  "version": "2.4.38",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",

tests/sentry-config.test.ts

@@ -15,6 +15,6 @@ describe('Sentry Configuration', () => {
     // Assert that SENTRY_DSN is defined and not empty
     expect(envConfig.SENTRY_DSN).toBeDefined();
     expect(envConfig.SENTRY_DSN.length).toBeGreaterThan(0);
-    expect(envConfig.SENTRY_DSN).toMatch(/^https:\/\/.+@glitchtip.infra.mintel.me\/\d+$/);
+    expect(envConfig.SENTRY_DSN).toMatch(/^https:\/\/.+@(?:glitchtip|errors)\.infra\.mintel\.me\/\d+$/);
   });
 });