Show actual errors in sandbox error (codesandbox#3900)

* show actual errors

* reset to false

* clean state

* ts

Author: SaraVieira

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -168,7 +168,6 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
   }
 
   state.editor.isLoading = !hasExistingSandbox;
-  state.editor.notFound = false;
 
   const url = new URL(document.location.href);
   const invitationToken = url.searchParams.get('ts');
@@ -212,13 +211,25 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
     actions.internal.setCurrentSandbox(sandbox);
     actions.workspace.openDefaultItem();
   } catch (error) {
-    state.editor.notFound = true;
-    let detail = error.response?.data?.errors?.detail;
+    const data = error.response?.data;
+    const errors = data?.errors;
+    let detail = errors?.detail;
+
     if (Array.isArray(detail)) {
       detail = detail[0];
+    } else if (typeof errors === 'object') {
+      detail = errors[Object.keys(errors)[0]];
+    } else if (data?.error) {
+      detail = data?.error;
     }
-    state.editor.error = detail || error.message;
+
+    state.editor.error = {
+      message: detail || error.message,
+      status: error.response.status,
+    };
+
     state.editor.isLoading = false;
+
     return;
   }
 

packages/app/src/app/overmind/namespaces/editor/state.ts

@@ -43,8 +43,10 @@ type State = {
   // EditorPreview is using it... weird stuff
   devToolTabs: Derive<State, ViewConfig[]>;
   isLoading: boolean;
-  notFound: boolean;
-  error: string | null;
+  error: {
+    status: number;
+    message: string;
+  } | null;
   isResizing: boolean;
   changedModuleShortids: Derive<State, string[]>;
   currentTabId: string | null;
@@ -85,7 +87,6 @@ export const state: State = {
   currentModuleShortid: null,
   mainModuleShortid: null,
   isLoading: true,
-  notFound: false,
   error: null,
   isResizing: false,
   modulesByPath: {},

packages/app/src/app/pages/Sandbox/index.tsx

@@ -7,7 +7,6 @@ import { Title } from 'app/components/Title';
 import { useOvermind } from 'app/overmind';
 import { GithubIntegration } from 'app/pages/common/GithubIntegration';
 import { Navigation } from 'app/pages/common/Navigation';
-import { NotFound } from 'app/pages/common/NotFound';
 import React, { useEffect } from 'react';
 import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
@@ -52,9 +51,13 @@ export const Sandbox = React.memo<Props>(
     );
 
     function getContent() {
-      const { hasLogIn, isLoggedIn } = state;
+      const {
+        hasLogIn,
+        isLoggedIn,
+        editor: { error },
+      } = state;
 
-      if (state.editor.error) {
+      if (error) {
         const isGithub = match.params.id.includes('github');
 
         return (
@@ -70,7 +73,7 @@ export const Sandbox = React.memo<Props>(
               Something went wrong
             </div>
             <Title style={{ fontSize: '1.25rem', marginBottom: 0 }}>
-              {state.editor.error}
+              {error.message}
             </Title>
             <br />
             <div style={{ display: 'flex', maxWidth: 400, width: '100%' }}>
@@ -81,7 +84,7 @@ export const Sandbox = React.memo<Props>(
                 {hasLogIn ? 'Dashboard' : 'Homepage'}
               </Button>
             </div>
-            {isLoggedIn && isGithub && (
+            {isLoggedIn && isGithub && error.status !== 422 && (
               <div
                 style={{ maxWidth: 400, marginTop: '2.5rem', width: '100%' }}
               >
@@ -127,10 +130,6 @@ export const Sandbox = React.memo<Props>(
         );
       }
 
-      if (state.editor.notFound) {
-        return <NotFound />;
-      }
-
       return null;
     }