Merge pull request #3077 from continuedev/dallin/error-page

Better error page
continuedev · Nov 26, 2024 · 1bb3253 · 1bb3253
2 parents 021b13f + adaba89
commit 1bb3253
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 21 deletions.
diff --git a/gui/src/App.tsx b/gui/src/App.tsx
@@ -84,7 +84,6 @@ function App() {
 
   const vscTheme = useVscTheme();
   const submenuContextProvidersMethods = useSubmenuContextProviders();
-
   return (
     <VscThemeContext.Provider value={vscTheme}>
       <SubmenuContextProvidersContext.Provider

diff --git a/gui/src/components/svg/DiscordIcon.tsx b/gui/src/components/svg/DiscordIcon.tsx
@@ -0,0 +1,27 @@
+interface DiscordIconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+}
+
+export function DiscordIcon({
+  size = 24,
+  className,
+  ...props
+}: DiscordIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M20.317 4.369a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.038 13.875 13.875 0 00-.6 1.235 18.337 18.337 0 00-5.487 0 13.872 13.872 0 00-.601-1.235.076.076 0 00-.079-.038A19.736 19.736 0 003.677 4.369a.069.069 0 00-.032.027C.533 9.104-.32 13.726.099 18.306a.082.082 0 00.031.054 19.911 19.911 0 005.993 3.04.078.078 0 00.084-.027 14.345 14.345 0 001.273-2.084.076.076 0 00-.041-.105 13.134 13.134 0 01-1.872-.891.077.077 0 01-.008-.128c.126-.094.252-.192.373-.291a.074.074 0 01.077-.01c3.927 1.794 8.18 1.794 12.061 0a.074.074 0 01.078.009c.121.099.247.198.374.292a.077.077 0 01-.006.127 12.48 12.48 0 01-1.873.891.076.076 0 00-.04.106 14.504 14.504 0 001.273 2.083.077.077 0 00.084.028 19.888 19.888 0 005.993-3.04.077.077 0 00.031-.054c.5-5.177-.838-9.772-3.576-13.91a.061.061 0 00-.032-.028zM9.237 15.335c-1.182 0-2.156-1.085-2.156-2.419 0-1.333.955-2.418 2.156-2.418 1.21 0 2.184 1.085 2.156 2.418.001 1.334-.946 2.419-2.156 2.419zm5.526 0c-1.182 0-2.156-1.085-2.156-2.419 0-1.333.955-2.418 2.156-2.418 1.21 0 2.184 1.085 2.156 2.418 0 1.334-.946 2.419-2.156 2.419z"
+        fill="currentColor"
+        strokeWidth="0"
+      />
+    </svg>
+  );
+}
diff --git a/gui/src/components/svg/GithubIcon.tsx b/gui/src/components/svg/GithubIcon.tsx
@@ -0,0 +1,27 @@
+interface GithubIconProps extends React.SVGProps<SVGSVGElement> {
+  size?: number;
+}
+
+export function GithubIcon({
+  size = 24,
+  className,
+  ...props
+}: GithubIconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      className={className}
+      {...props}
+    >
+      <path
+        d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.17 6.839 9.49.5.092.682-.217.682-.482 0-.237-.008-.866-.013-1.7-2.782.604-3.369-1.341-3.369-1.341-.454-1.155-1.11-1.462-1.11-1.462-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.269 2.75 1.025A9.578 9.578 0 0112 6.836c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.025 2.747-1.025.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.578.688.48C19.138 20.167 22 16.418 22 12c0-5.523-4.477-10-10-10z"
+        fill="currentColor"
+        strokeWidth="0"
+      />
+    </svg>
+  );
+}
diff --git a/gui/src/pages/error.tsx b/gui/src/pages/error.tsx
@@ -1,37 +1,80 @@
 import { useDispatch } from "react-redux";
 import { useNavigate, useRouteError } from "react-router-dom";
 import { newSession } from "../redux/slices/stateSlice";
-import ContinueButton from "../components/mainInput/ContinueButton";
-import { vscBackground } from "../components";
+import { GithubIcon } from "../components/svg/GithubIcon";
+import { DiscordIcon } from "../components/svg/DiscordIcon";
+import { useContext, useEffect, useState } from "react";
+import { IdeMessengerContext } from "../context/IdeMessenger";
+import { Button, SecondaryButton } from "../components";
+import { ArrowPathIcon, FlagIcon } from "@heroicons/react/24/outline";
 
-export default function ErrorPage() {
+const GITHUB_LINK = "https://github.com/continuedev/continue/issues/new/choose";
+const DISCORD_LINK = "https://discord.com/invite/EfJEfdFnDQ";
+
+const ErrorPage: React.FC = () => {
   const error: any = useRouteError();
   console.error(error);
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
+  const messenger = useContext(IdeMessengerContext);
+  const openUrl = (url: string) => {
+    if (messenger) {
+      messenger.post("openUrl", url);
+    }
+  };
+
+  const [initialLoad, setInitialLoad] = useState(true);
+  useEffect(() => {
+    setTimeout(() => {
+      setInitialLoad(false);
+    }, 500);
+  }, []);
   return (
-    <div
-      id="error-page"
-      className="text-center"
-      style={{ backgroundColor: vscBackground }}
-    >
-      <h1>Error in Continue React App</h1>
-      <p>
-        <i>{error.statusText || error.message}</i>
-      </p>
-      <br />
-      <p>Click below to Continue</p>
-      <br />
-      <ContinueButton
-        disabled={false}
-        showStop={false}
+    <div className="bg- flex min-h-screen flex-col items-center justify-center px-8 py-4 text-center">
+      <h1 className="mb-4 text-3xl font-bold">Error in Continue UI</h1>
+
+      <pre className="pb-6">
+        <code className="px-3 py-2">{error.statusText || error.message}</code>
+      </pre>
+
+      <Button
+        className="flex flex-row items-center gap-2"
         onClick={() => {
           dispatch(newSession());
           localStorage.removeItem("persist:root");
+          localStorage.removeItem("inputHistory_chat");
+          // localStorage.removeItem("showTutorialCard");
+          // localStorage.removeItem("onboardingStatus");
+          // localStorage.removeItem("lastSessionId");
           navigate("/");
         }}
-      ></ContinueButton>
+      >
+        {initialLoad ? (
+          <FlagIcon className="h-5 w-5 text-red-600" />
+        ) : (
+          <ArrowPathIcon className="h-5 w-5" />
+        )}
+        Continue
+      </Button>
+
+      <p className="mb-0 mt-6">Report the issue:</p>
+      <div className="mt-4 flex space-x-4">
+        <SecondaryButton
+          onClick={() => openUrl(GITHUB_LINK)}
+          className="flex items-center space-x-2 rounded-lg px-4 py-2 text-white"
+        >
+          <GithubIcon size={20} />
+        </SecondaryButton>
+        <SecondaryButton
+          onClick={() => openUrl(DISCORD_LINK)}
+          className="flex items-center rounded-lg"
+        >
+          <DiscordIcon size={20} />
+        </SecondaryButton>
+      </div>
     </div>
   );
-}
+};
+
+export default ErrorPage;