From 640994f49b5cfb09eb65632b155570ba1c90878f Mon Sep 17 00:00:00 2001
From: Lauren Tan <poteto@users.noreply.github.com>
Date: Mon, 16 Oct 2023 15:54:33 +0100
Subject: [PATCH] [playground] Only log error to console when clicked

---
 .../apps/playground/components/Editor/Output.tsx  | 15 +++++++++++++--
 .../apps/playground/components/Editor/index.tsx   |  1 -
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/compiler/apps/playground/components/Editor/Output.tsx b/compiler/apps/playground/components/Editor/Output.tsx
index 1ac5bb953b..39abcdfc0f 100644
--- a/compiler/apps/playground/components/Editor/Output.tsx
+++ b/compiler/apps/playground/components/Editor/Output.tsx
@@ -16,7 +16,7 @@ import MonacoEditor, { DiffEditor } from "@monaco-editor/react";
 import { type CompilerError } from "babel-plugin-react-forget";
 import prettier from "prettier";
 import prettierParserBabel from "prettier/parser-babel";
-import { memo, useMemo, useState } from "react";
+import { memo, useCallback, useMemo, useState } from "react";
 import { type Store } from "../../lib/stores";
 import TabbedWindow from "../TabbedWindow";
 import { monacoOptions } from "./monacoOptions";
@@ -182,6 +182,11 @@ function Output({ store, compilerOutput }: Props) {
     () => tabify(store.source, compilerOutput),
     [store.source, compilerOutput]
   );
+  const consoleLogError = useCallback(() => {
+    if (compilerOutput.kind === "err") {
+      console.error(compilerOutput.error);
+    }
+  }, [compilerOutput]);
 
   return (
     <>
@@ -203,7 +208,13 @@ function Output({ store, compilerOutput }: Props) {
             className="p-4 basis-full text-red-600 overflow-y-scroll whitespace-pre-wrap"
             style={{ width: "calc(100vw - 650px)", height: "150px" }}
           >
-            <code>{compilerOutput.error.toString()}</code>
+            <button
+              className="text-left"
+              title="Log error to console"
+              onClick={() => consoleLogError()}
+            >
+              <code>{compilerOutput.error.toString()}</code>
+            </button>
           </pre>
         </div>
       ) : null}
diff --git a/compiler/apps/playground/components/Editor/index.tsx b/compiler/apps/playground/components/Editor/index.tsx
index f642fcabd2..1e664f203d 100644
--- a/compiler/apps/playground/components/Editor/index.tsx
+++ b/compiler/apps/playground/components/Editor/index.tsx
@@ -183,7 +183,6 @@ function compile(source: string): CompilerOutput {
     }
     return { kind: "ok", results };
   } catch (error: any) {
-    console.error(error);
     // error might be an invariant violation or other runtime error
     // (i.e. object shape that is not CompilerError)
     if (error.details == null) {