fix(javascript): unhandled promise rejections (#201)

mxschmitt · web-flow · commit b327a70278b4 · 2021-04-12T13:06:06.000+02:00
diff --git a/control-service/workers.go b/control-service/workers.go
@@ -195,12 +195,12 @@ func (w *Worker) createPod() error {
 						Limits: v1.ResourceList{
 							v1.ResourceMemory:           resource.MustParse("1024Mi"),
 							v1.ResourceCPU:              resource.MustParse("1000m"),
-							v1.ResourceEphemeralStorage: resource.MustParse("512Mi"),
+							v1.ResourceEphemeralStorage: resource.MustParse("128Mi"),
 						},
 						Requests: v1.ResourceList{
 							v1.ResourceMemory:           resource.MustParse("128Mi"),
 							v1.ResourceCPU:              resource.MustParse("200m"),
-							v1.ResourceEphemeralStorage: resource.MustParse("512Mi"),
+							v1.ResourceEphemeralStorage: resource.MustParse("128Mi"),
 						},
 					},
 				},
diff --git a/e2e/tests/visual.spec.ts b/e2e/tests/visual.spec.ts
@@ -150,7 +150,7 @@ describe("should handle platform core related features", test => {
     await page.keyboard.type("();")
 
     await page.click("text='Run'")
-    await page.waitForSelector("text='Error: Execution timeout!'", {
+    await page.waitForSelector("text=Execution timeout!", {
       timeout: 70 * 1000
     })
   })
diff --git a/frontend/src/api.d.ts b/frontend/src/api.d.ts
@@ -4,17 +4,11 @@ interface FileWrapper {
   extension: string;
 }
 
-type ErroredExecutionResponse = {
-  success: false
+type ExecutionResponse = Partial<{
+  success: boolean
   error: string
-}
-
-type SuccessExecutionResponse ={
-  success: true
   version: string;
   duration?: number;
   files: FileWrapper[];
   output: string;
-}
-
-type ExecutionResponse = ErroredExecutionResponse | SuccessExecutionResponse
+}>
diff --git a/frontend/src/components/App/index.tsx b/frontend/src/components/App/index.tsx
@@ -13,22 +13,15 @@ import CodeLanguageSelector from '../CodeLanguageSelector';
 const App: React.FunctionComponent = () => {
   const { code, onChangeRightPanelMode } = useContext(CodeContext)
   const [loading, setLoading] = useState<boolean>(false)
-  const [resp, setResponse] = useState<SuccessExecutionResponse | null>(null)
-  const [error, setError] = useState<string | null>(null)
+  const [resp, setResponse] = useState<ExecutionResponse|null>(null)
   const handleExecutionRef = useRef<() => Promise<void>>()
 
   const handleExecution = async (): Promise<void> => {
     setLoading(true)
     setResponse(null)
-    setError(null)
 
     trackEvent()
-    try {
-      const resp = await runCode(code)
-      setResponse(resp)
-    } catch (err) {
-      setError(err.toString())
-    }
+    setResponse(await runCode(code))
     setLoading(false)
     onChangeRightPanelMode(false)
   }
@@ -59,7 +52,7 @@ const App: React.FunctionComponent = () => {
           </Panel>
         </Col>
         <Col xs={24} md={12}>
-          <RightPanel resp={resp} error={error}/>
+          <RightPanel resp={resp} />
         </Col>
       </Grid >
     </>
diff --git a/frontend/src/components/RightPanel/RightOutputPanel/index.tsx b/frontend/src/components/RightPanel/RightOutputPanel/index.tsx
@@ -5,28 +5,38 @@ import ResponseFile from '../../ResponseFile'
 import styles from './index.module.css'
 
 interface RightOutputPanelProps {
-    resp: SuccessExecutionResponse | null;
-    error: string | null
+    resp: ExecutionResponse | null;
 }
 
-const RightOutputPanel: React.FunctionComponent<RightOutputPanelProps> = ({ resp, error }) => {
+const RightOutputPanel: React.FunctionComponent<RightOutputPanelProps> = ({ resp }) => {
     return (
         <>
-            {!error && resp && <>
-                {resp.output.length > 0 && <h4>Logs</h4>}
-                <code className={styles.logsWrapper}>{resp.output.split("\n").map((entry, idx) => <React.Fragment key={idx}>
-                    {entry}
-                    <br />
-                </React.Fragment>)}</code>
-                {resp.files.length > 0 && <h4>Files</h4>}
-                {resp.files.map((file, idx) => <ResponseFile file={file} key={idx} />)}
-                <p>Duration of {resp.duration} ms with Playwright version {resp.version}.</p>
-            </>}
-            {error && <>
-                <h4>Error</h4>
-                <pre>
-                    {error}
-                </pre>
+            {resp && <>
+                {resp.error && <>
+                    <h4>Error</h4>
+                    <pre>
+                        {resp.error}
+                    </pre>
+                </>}
+
+                {resp.output && <>
+                    {resp.output.length > 0 && <h4>Logs</h4>}
+                    <code className={styles.logsWrapper}>
+                    {resp.output.split("\n").map((entry, idx) => <React.Fragment key={idx}>
+                        {entry}
+                        <br />
+                    </React.Fragment>)}
+                    </code>
+                </>}
+
+                {resp.files && <>
+                    {resp.files.length > 0 && <h4>Files</h4>}
+                    {resp.files.map((file, idx) => <ResponseFile file={file} key={idx} />)}
+                </>}
+
+                {resp.success && <>
+                    <p>Duration of {resp.duration} ms with Playwright version {resp.version}.</p>
+                </>}
             </>}
         </>
     )
diff --git a/frontend/src/components/RightPanel/index.tsx b/frontend/src/components/RightPanel/index.tsx
@@ -10,15 +10,14 @@ import { CodeContext } from '../CodeContext'
 import styles from './index.module.css'
 
 interface RightPanelProps {
-    resp: SuccessExecutionResponse | null;
-    error: string | null
+    resp: ExecutionResponse | null;
 }
 
 const getHeaderText = (mode: boolean): string => {
     return mode ? "Output" : "Examples"
 }
 
-const RightPanel: React.FunctionComponent<RightPanelProps> = ({ resp, error }) => {
+const RightPanel: React.FunctionComponent<RightPanelProps> = ({ resp }) => {
     const { rightPanelMode, onChangeRightPanelMode } = useContext(CodeContext)
     const handleShowExamplesClick = (): void => onChangeRightPanelMode(!rightPanelMode)
 
@@ -34,7 +33,7 @@ const RightPanel: React.FunctionComponent<RightPanelProps> = ({ resp, error }) =
             }
         >
             <div className={styles.rightPanelWrapper}>
-                {rightPanelMode ? <RightExamplesPanel /> : <RightOutputPanel resp={resp} error={error}/>}
+                {rightPanelMode ? <RightExamplesPanel /> : <RightOutputPanel resp={resp} />}
             </div>
         </Panel>
     )
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
@@ -1,7 +1,7 @@
 import { CodeLanguage, LANGUAGES } from "./constants";
 import { Example } from "./examples";
 
-export const runCode = async (code: string): Promise<SuccessExecutionResponse> => {
+export const runCode = async (code: string): Promise<ExecutionResponse> => {
   const resp = await fetch("/service/control/run", {
     method: "POST",
     headers: {
@@ -12,15 +12,15 @@ export const runCode = async (code: string): Promise<SuccessExecutionResponse> =
       language: determineLanguage()
     })
   })
+
   if (!resp.ok) {
     if (resp.status === 429) {
-      throw new Error("You are rate limited, please try again in a few minutes.")
+      return { error: "You are rate limited, please try again in a few minutes." }
     }
     if (resp.headers.get("Content-Type")?.includes("application/json")) {
-      const error = await resp.json()
-      throw new Error(error.error)
+      return await resp.json()
     }
-    throw new Error("Execution was not successful, please try again in a few minutes.")
+    return { error: "Execution was not successful, please try again in a few minutes." }
   }
   return await resp.json()
 }
diff --git a/internal/worker/worker.go b/internal/worker/worker.go
@@ -3,6 +3,7 @@ package worker
 import (
 	"bytes"
 	"encoding/json"
+	"errors"
 	"fmt"
 	"io"
 	"log"
@@ -94,7 +95,7 @@ func (w *Worker) ExecCommand(name string, args ...string) error {
 		),
 	}
 	if err := c.Run(); err != nil {
-		return fmt.Errorf("could not run command: %s", w.options.TransformOutput(w.output.String()))
+		return errors.New("could not run command")
 	}
 	files, err := collector.Collect()
 	if err != nil {
@@ -116,12 +117,12 @@ func (w *Worker) consumeMessage(incomingMessages <-chan amqp.Delivery) error {
 		outgoingMessage.Error = err.Error()
 	} else {
 		outgoingMessage.Success = true
-		outgoingMessage.Output = w.options.TransformOutput(w.output.String())
 		outgoingMessage.Files, err = w.uploadFiles()
 		if err != nil {
 			return fmt.Errorf("could not upload files: %w", err)
 		}
 	}
+	outgoingMessage.Output = w.options.TransformOutput(w.output.String())
 	outgoingMessageBody, err := json.Marshal(outgoingMessage)
 	if err != nil {
 		return fmt.Errorf("could not marshal outgoing message payload: %w", err)
diff --git a/worker-javascript/main.go b/worker-javascript/main.go
@@ -5,7 +5,7 @@ import (
 )
 
 func handler(w *worker.Worker, code string) error {
-	return w.ExecCommand("node", "-e", code)
+	return w.ExecCommand("node", "--unhandled-rejections=strict", "-e", code)
 }
 
 func main() {

Original file line number	Diff line number	Diff line change
`@@ -10,15 +10,14 @@ import { CodeContext } from '../CodeContext'`
`10`	`10`	`import styles from './index.module.css'`
`11`	`11`
`12`	`12`	`interface RightPanelProps {`
`13`		`- resp: SuccessExecutionResponse \| null;`
`14`		`- error: string \| null`
	`13`	`+ resp: ExecutionResponse \| null;`
`15`	`14`	`}`
`16`	`15`
`17`	`16`	`const getHeaderText = (mode: boolean): string => {`
`18`	`17`	`return mode ? "Output" : "Examples"`
`19`	`18`	`}`
`20`	`19`
`21`		`-const RightPanel: React.FunctionComponent<RightPanelProps> = ({ resp, error }) => {`
	`20`	`+const RightPanel: React.FunctionComponent<RightPanelProps> = ({ resp }) => {`
`22`	`21`	`const { rightPanelMode, onChangeRightPanelMode } = useContext(CodeContext)`
`23`	`22`	`const handleShowExamplesClick = (): void => onChangeRightPanelMode(!rightPanelMode)`
`24`	`23`
`@@ -34,7 +33,7 @@ const RightPanel: React.FunctionComponent<RightPanelProps> = ({ resp, error }) =`
`34`	`33`	`}`
`35`	`34`	`>`
`36`	`35`	`<div className={styles.rightPanelWrapper}>`
`37`		`- {rightPanelMode ? <RightExamplesPanel /> : <RightOutputPanel resp={resp} error={error}/>}`
	`36`	`+ {rightPanelMode ? <RightExamplesPanel /> : <RightOutputPanel resp={resp} />}`
`38`	`37`	`</div>`
`39`	`38`	`</Panel>`
`40`	`39`	`)`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@ import (`
`5`	`5`	`)`
`6`	`6`
`7`	`7`	`func handler(w *worker.Worker, code string) error {`
`8`		`- return w.ExecCommand("node", "-e", code)`
	`8`	`+ return w.ExecCommand("node", "--unhandled-rejections=strict", "-e", code)`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`func main() {`