[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

@@ -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) => {
+          const newLogs = message.log
-            return {
+            .filter((consoleData) => {
-              ...consoleData,
+              if (
-              data: formatStr(...consoleData.data),
+                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;
   }
 

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>
   );
 }