only parse the error message in the ErrorOverlay

Author: gabrielmfern

packages/preview-server/src/actions/render-email-by-path.tsx

@@ -192,35 +192,14 @@ export const renderEmailByPath = async (
         stack = ` at ${sourceFile}:${sourceLine}\n${stack}`;
       }
 
-      const match = cause.msg.match(
-        /(Unexpected closing tag "[^"]+". It may happen when the tag has already been closed by another tag). (For more info see) (.+)/,
-      );
-      if (match) {
-        const [_, errorMessage, moreInfo, link] = match;
-        return {
-          error: {
-            name: exception.name,
-            message: (
-              <>
-                {errorMessage}.
-                <p className="text-lg">
-                  {moreInfo}{' '}
-                  <a
-                    className="underline"
-                    rel="noreferrer"
-                    target="_blank"
-                    href={link}
-                  >
-                    {link}
-                  </a>
-                </p>
-              </>
-            ),
-            stack,
-            cause: error.cause ? JSON.parse(JSON.stringify(cause)) : undefined,
-          },
-        };
-      }
+      return {
+        error: {
+          name: exception.name,
+          message: cause.msg,
+          stack,
+          cause: error.cause ? JSON.parse(JSON.stringify(cause)) : undefined,
+        },
+      };
     }
 
     return {

packages/preview-server/src/app/preview/[...slug]/error-overlay.tsx

@@ -1,7 +1,32 @@
 'use client';
 import type { ErrorObject } from '../../../utils/types/error-object';
 
-export const ErrorOverlay = (props: { error: ErrorObject }) => {
+interface ErrorOverlayProps {
+  error: ErrorObject;
+}
+
+const Message = ({ children: content }: { children: string }) => {
+  const match = content.match(
+    /(Unexpected closing tag "[^"]+". It may happen when the tag has already been closed by another tag). (For more info see) (.+)/,
+  );
+  if (match) {
+    const [_, errorMessage, moreInfo, link] = match;
+    return (
+      <>
+        {errorMessage}.
+        <p className="text-lg">
+          {moreInfo}{' '}
+          <a className="underline" rel="noreferrer" target="_blank" href={link}>
+            {link}
+          </a>
+        </p>
+      </>
+    );
+  }
+  return content;
+};
+
+export const ErrorOverlay = ({ error }: ErrorOverlayProps) => {
   return (
     <>
       <div className="absolute inset-0 z-50 bg-black/80" />
@@ -16,12 +41,12 @@ export const ErrorOverlay = (props: { error: ErrorObject }) => {
         <div className="bg-red-500 h-3" />
         <div className="flex flex-grow p-6 min-w-0 max-w-full flex-col space-y-1.5">
           <div className="flex-shrink pb-2 text-xl tracking-tight">
-            <b>{props.error.name}</b>: {props.error.message}
+            <b>{error.name}</b>: <Message>{error.message}</Message>
           </div>
-          {props.error.stack ? (
+          {error.stack ? (
             <div className="flex-grow scroll-px-4 overflow-x-auto rounded-lg bg-black p-2 text-gray-100">
               <pre className="w-full min-w-0 font-mono leading-6 selection:!text-cyan-12 text-xs">
-                {props.error.stack}
+                {error.stack}
               </pre>
             </div>
           ) : undefined}

packages/preview-server/src/utils/types/error-object.ts

@@ -7,5 +7,5 @@ export interface ErrorObject {
   name: string;
   stack: string | undefined;
   cause?: unknown;
-  message: React.ReactNode;
+  message: string;
 }