Revert "handle api errors in error boundary (#17086)" (#17111)

This reverts commit 8ddad67.

Author: AlexTugarev

components/dashboard/src/App.tsx

@@ -4,23 +4,32 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
+import * as GitpodCookie from "@gitpod/gitpod-protocol/lib/util/gitpod-cookie";
 import React, { FC, Suspense } from "react";
 import { AppLoading } from "./app/AppLoading";
 import { AppRoutes } from "./app/AppRoutes";
+import { GitpodErrorBoundary } from "./components/ErrorBoundary";
 import { useCurrentOrg } from "./data/organizations/orgs-query";
 import { useAnalyticsTracking } from "./hooks/use-analytics-tracking";
 import { useUserLoader } from "./hooks/use-user-loader";
 import { Login } from "./Login";
+import { isGitpodIo } from "./utils";
+
+const Setup = React.lazy(() => import(/* webpackPrefetch: true */ "./Setup"));
 
 // Wrap the App in an ErrorBoundary to catch User/Org loading errors
 // This will also catch any errors that happen to bubble all the way up to the top
 const AppWithErrorBoundary: FC = () => {
-    return <App />;
+    return (
+        <GitpodErrorBoundary>
+            <App />
+        </GitpodErrorBoundary>
+    );
 };
 
 // Top level Dashboard App component
 const App: FC = () => {
-    const { user, loading } = useUserLoader();
+    const { user, isSetupRequired, loading } = useUserLoader();
     const currentOrgQuery = useCurrentOrg();
 
     // Setup analytics/tracking
@@ -30,7 +39,25 @@ const App: FC = () => {
         return <AppLoading />;
     }
 
-    // Technically this should get handled in the QueryErrorBoundary, but having it here doesn't hurt
+    // This may be flagged true during user/teams loading
+    if (isSetupRequired) {
+        return (
+            <Suspense fallback={<AppLoading />}>
+                <Setup />
+            </Suspense>
+        );
+    }
+
+    // Redirects to www site if it's the root, no user, and no gp cookie present (has logged in recently)
+    // Should come after the <Setup/> check
+    if (isGitpodIo() && window.location.pathname === "/" && window.location.hash === "" && !user) {
+        // If there's no gp cookie, bounce to www site
+        if (!GitpodCookie.isPresent(document.cookie)) {
+            window.location.href = `https://www.gitpod.io`;
+            return <div></div>;
+        }
+    }
+
     // At this point if there's no user, they should Login
     if (!user) {
         return <Login />;

components/dashboard/src/Login.tsx

@@ -6,7 +6,7 @@
 
 import { AuthProviderInfo } from "@gitpod/gitpod-protocol";
 import * as GitpodCookie from "@gitpod/gitpod-protocol/lib/util/gitpod-cookie";
-import { useContext, useEffect, useState, useMemo, useCallback, FC } from "react";
+import { useContext, useEffect, useState, useMemo, useCallback } from "react";
 import { UserContext } from "./user-context";
 import { getGitpodService } from "./service/service";
 import { iconForAuthProvider, openAuthorizeWindow, simplifyProviderName, getSafeURLRedirect } from "./provider-utils";
@@ -47,10 +47,7 @@ export function hasVisitedMarketingWebsiteBefore() {
     return document.cookie.match("gitpod-marketing-website-visited=true");
 }
 
-type LoginProps = {
-    onLoggedIn?: () => void;
-};
-export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
+export function Login() {
     const { setUser } = useContext(UserContext);
 
     const urlHash = useMemo(() => getURLHash(), []);
@@ -99,16 +96,14 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
         async (payload?: string) => {
             updateUser().catch(console.error);
 
-            onLoggedIn && onLoggedIn();
-
             // Check for a valid returnTo in payload
             const safeReturnTo = getSafeURLRedirect(payload);
             if (safeReturnTo) {
                 // ... and if it is, redirect to it
                 window.location.replace(safeReturnTo);
             }
         },
-        [onLoggedIn, updateUser],
+        [updateUser],
     );
 
     const openLogin = useCallback(
@@ -266,4 +261,4 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
             </div>
         </div>
     );
-};
+}

components/dashboard/src/Setup.tsx

@@ -4,16 +4,12 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { useCallback, useEffect, useState } from "react";
-import { Button } from "./components/Button";
+import { useEffect, useState } from "react";
 import Modal, { ModalBody, ModalFooter, ModalHeader } from "./components/Modal";
 import { getGitpodService, gitpodHostUrl } from "./service/service";
 import { GitIntegrationModal } from "./user-settings/Integrations";
 
-type Props = {
-    onComplete?: () => void;
-};
-export default function Setup({ onComplete }: Props) {
+export default function Setup() {
     const [showModal, setShowModal] = useState<boolean>(false);
 
     useEffect(() => {
@@ -26,21 +22,16 @@ export default function Setup({ onComplete }: Props) {
         })();
     }, []);
 
-    const acceptAndContinue = useCallback(() => {
+    const acceptAndContinue = () => {
         setShowModal(true);
-    }, []);
-
-    const onAuthorize = useCallback(
-        (payload?: string) => {
-            onComplete && onComplete();
+    };
 
-            // run without await, so the integrated closing of new tab isn't blocked
-            (async () => {
-                window.location.href = gitpodHostUrl.asDashboard().toString();
-            })();
-        },
-        [onComplete],
-    );
+    const onAuthorize = (payload?: string) => {
+        // run without await, so the integrated closing of new tab isn't blocked
+        (async () => {
+            window.location.href = gitpodHostUrl.asDashboard().toString();
+        })();
+    };
 
     const headerText = "Configure a Git integration with a GitLab, GitHub, or Bitbucket instance.";
 
@@ -70,9 +61,9 @@ export default function Setup({ onComplete }: Props) {
                         </div>
                     </ModalBody>
                     <ModalFooter>
-                        <Button className={"ml-2"} onClick={acceptAndContinue}>
+                        <button className={"ml-2"} onClick={() => acceptAndContinue()}>
                             Continue
-                        </Button>
+                        </button>
                     </ModalFooter>
                 </Modal>
             )}

components/dashboard/src/components/error-boundaries/ReloadPageErrorBoundary.tsx renamed to components/dashboard/src/components/ErrorBoundary.tsx

@@ -4,31 +4,26 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { FC, useCallback } from "react";
+import { FC } from "react";
 import { ErrorBoundary, FallbackProps, ErrorBoundaryProps } from "react-error-boundary";
-import gitpodIcon from "../../icons/gitpod.svg";
-import { getGitpodService } from "../../service/service";
-import { Heading1, Subheading } from "../typography/headings";
+import gitpodIcon from "../icons/gitpod.svg";
+import { getGitpodService } from "../service/service";
+import { Heading1, Subheading } from "./typography/headings";
 
-export type CaughtError = Error & { code?: number };
-
-// Catches any unexpected errors w/ a UI to reload the page. Also reports errors to api
-export const ReloadPageErrorBoundary: FC = ({ children }) => {
+export const GitpodErrorBoundary: FC = ({ children }) => {
     return (
-        <ErrorBoundary FallbackComponent={ReloadPageErrorFallback} onError={handleError}>
+        <ErrorBoundary FallbackComponent={DefaultErrorFallback} onReset={handleReset} onError={handleError}>
             {children}
         </ErrorBoundary>
     );
 };
 
-export const ReloadPageErrorFallback: FC<Pick<FallbackProps, "error">> = ({ error }) => {
+type CaughtError = Error & { code?: number };
+
+export const DefaultErrorFallback: FC<FallbackProps> = ({ error, resetErrorBoundary }) => {
     // adjust typing, as we may have caught an api error here w/ a code property
     const caughtError = error as CaughtError;
 
-    const handleReset = useCallback(() => {
-        window.location.reload();
-    }, []);
-
     const emailSubject = encodeURIComponent("Gitpod Dashboard Error");
     let emailBodyStr = `\n\nError: ${caughtError.message}`;
     if (caughtError.code) {
@@ -48,9 +43,9 @@ export const ReloadPageErrorFallback: FC<Pick<FallbackProps, "error">> = ({ erro
                 .
             </Subheading>
             <div>
-                <button onClick={handleReset}>Reload</button>
+                <button onClick={resetErrorBoundary}>Reload</button>
             </div>
-            <div className="flex flex-col items-center space-y-2">
+            <div>
                 {caughtError.code && (
                     <span>
                         <strong>Code:</strong> {caughtError.code}
@@ -62,6 +57,10 @@ export const ReloadPageErrorFallback: FC<Pick<FallbackProps, "error">> = ({ erro
     );
 };
 
+export const handleReset: ErrorBoundaryProps["onReset"] = () => {
+    window.location.reload();
+};
+
 export const handleError: ErrorBoundaryProps["onError"] = async (error, info) => {
     const url = window.location.toString();
     try {

components/dashboard/src/components/error-boundaries/QueryErrorBoundary.tsx

@@ -4,38 +4,55 @@
  * See License.AGPL.txt in the project root for license information.
  */
 
-import { useContext } from "react";
+import { useState, useContext } from "react";
+import { User } from "@gitpod/gitpod-protocol";
 import { UserContext } from "../user-context";
 import { getGitpodService } from "../service/service";
+import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
 import { trackLocation } from "../Analytics";
 import { refreshSearchData } from "../components/RepositoryFinder";
 import { useQuery } from "@tanstack/react-query";
 import { noPersistence } from "../data/setup";
 
 export const useUserLoader = () => {
     const { user, setUser } = useContext(UserContext);
+    const [isSetupRequired, setSetupRequired] = useState(false);
 
     // For now, we're using the user context to store the user, but letting react-query handle the loading
     // In the future, we should remove the user context and use react-query to access the user
     const { isLoading } = useQuery({
         queryKey: noPersistence(["current-user"]),
         queryFn: async () => {
-            const user = await getGitpodService().server.getLoggedInUser();
+            let user: User | undefined;
+            try {
+                user = await getGitpodService().server.getLoggedInUser();
+                setUser(user);
+                refreshSearchData();
+            } catch (error) {
+                if (error && "code" in error) {
+                    if (error.code === ErrorCodes.SETUP_REQUIRED) {
+                        setSetupRequired(true);
+                        return;
+                    }
+
+                    // If it was a server error, throw it so we can catch it with an ErrorBoundary
+                    if (error.code >= 500) {
+                        throw error;
+                    }
+
+                    // Other errors will treat user as needing to log in
+                }
+            } finally {
+                trackLocation(!!user);
+            }
 
             return user || null;
         },
         // We'll let an ErrorBoundary catch the error
         useErrorBoundary: true,
         cacheTime: 1000 * 60 * 60 * 1, // 1 hour
         staleTime: 1000 * 60 * 60 * 1, // 1 hour
-        onSuccess: (loadedUser) => {
-            setUser(loadedUser);
-            refreshSearchData();
-        },
-        onSettled: (loadedUser) => {
-            trackLocation(!!loadedUser);
-        },
     });
 
-    return { user, loading: isLoading };
+    return { user, loading: isLoading, isSetupRequired };
 };