From a0bc4d2cf91d588ccd1b94dc628e35d031fcc191 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Thu, 22 Sep 2022 18:13:53 +0300
Subject: [PATCH] [Beta] fix(SandpackConsole): avoid unsubscribing the logs
 listeners (#5093)

* Update 3 files

* Delete console-issue.md

* Filter out console error addendum

Co-authored-by: dan <dan.abramov@gmail.com>
---
 beta/src/components/MDX/Sandpack/Console.tsx | 28 ++++++++++++++------
 beta/src/components/MDX/Sandpack/Preview.tsx |  2 +-
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/beta/src/components/MDX/Sandpack/Console.tsx b/beta/src/components/MDX/Sandpack/Console.tsx
index 27b28e482..81680ac5f 100644
--- a/beta/src/components/MDX/Sandpack/Console.tsx
+++ b/beta/src/components/MDX/Sandpack/Console.tsx
@@ -87,7 +87,7 @@ type ConsoleData = Array<{
 
 const MAX_MESSAGE_COUNT = 100;
 
-export const SandpackConsole = () => {
+export const SandpackConsole = ({visible}: {visible: boolean}) => {
   const {listen} = useSandpack();
   const [logs, setLogs] = React.useState<ConsoleData>([]);
   const wrapperRef = React.useRef<HTMLDivElement>(null);
@@ -107,12 +107,24 @@ export const SandpackConsole = () => {
       }
       if (message.type === 'console' && message.codesandbox) {
         setLogs((prev) => {
-          const newLogs = message.log.map((consoleData) => {
-            return {
-              ...consoleData,
-              data: formatStr(...consoleData.data),
-            };
-          });
+          const newLogs = message.log
+            .filter((consoleData) => {
+              if (
+                typeof consoleData.data[0] === 'string' &&
+                consoleData.data[0].indexOf('The above error occurred') !== -1
+              ) {
+                // Don't show React error addendum because
+                // we have a custom error overlay.
+                return false;
+              }
+              return true;
+            })
+            .map((consoleData) => {
+              return {
+                ...consoleData,
+                data: formatStr(...consoleData.data),
+              };
+            });
           let messages = [...prev, ...newLogs];
           while (messages.length > MAX_MESSAGE_COUNT) {
             messages.shift();
@@ -136,7 +148,7 @@ export const SandpackConsole = () => {
     }
   }, [logs]);
 
-  if (logs.length === 0) {
+  if (!visible || logs.length === 0) {
     return null;
   }
 
diff --git a/beta/src/components/MDX/Sandpack/Preview.tsx b/beta/src/components/MDX/Sandpack/Preview.tsx
index e4b57e459..60d595deb 100644
--- a/beta/src/components/MDX/Sandpack/Preview.tsx
+++ b/beta/src/components/MDX/Sandpack/Preview.tsx
@@ -222,7 +222,7 @@ export function Preview({
           loading={!isReady && iframeComputedHeight === null}
         />
       </div>
-      {!error && <SandpackConsole />}
+      <SandpackConsole visible={!error} />
     </SandpackStack>
   );
 }