Check nested error boundaries

elpassion · Feb 24, 2024 · a2239fd · a2239fd
1 parent 702b158
commit a2239fd
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 14 deletions.
diff --git a/apps/web-remix/app/components/errorBoundaries/ErrorBoundaryLayout.tsx b/apps/web-remix/app/components/errorBoundaries/ErrorBoundaryLayout.tsx
@@ -0,0 +1,33 @@
+import React, { PropsWithChildren } from "react";
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Scripts,
+  useRouteError,
+} from "@remix-run/react";
+
+export const ErrorBoundaryLayout: React.FC<
+  PropsWithChildren<{ className?: string }>
+> = ({ children, className }) => {
+  const error = useRouteError();
+  const getTitle = () => {
+    if (isRouteErrorResponse(error)) {
+      if (error.status === 404) return "Not Found";
+      return "Something went wrong";
+    }
+  };
+  return (
+    <html>
+      <head>
+        <title>{getTitle()}</title>
+        <Meta />
+        <Links />
+      </head>
+      <body className={className}>
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  );
+};
diff --git a/apps/web-remix/app/components/pages/pipelines/build/errorBoundary.tsx b/apps/web-remix/app/components/pages/pipelines/build/errorBoundary.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { isRouteErrorResponse, useRouteError } from "@remix-run/react";
+
+export const BuildErrorBoundary = () => {
+  const error = useRouteError();
+
+  const getStatus = () => {
+    if (isRouteErrorResponse(error)) {
+      return error.status;
+    }
+
+    return 500;
+  };
+
+  const status = getStatus();
+
+  return (
+    <div className="my-6 p-2 rounded-lg text-center">
+      {status === 404 ? <NotFound /> : <Runtime />}
+    </div>
+  );
+};
+
+function NotFound() {
+  return <p className="text-white text-sm">Page not found...</p>;
+}
+
+function Runtime() {
+  return <p className="text-red-500 text-sm">Ups! Something went wrong...</p>;
+}
diff --git a/apps/web-remix/app/components/pages/pipelines/build/index.tsx b/apps/web-remix/app/components/pages/pipelines/build/index.tsx
@@ -1 +1,2 @@
 export { PipelineBuilder as page, meta } from "./page";
+export { BuildErrorBoundary as ErrorBoundary } from "./errorBoundary";
diff --git a/apps/web-remix/app/components/pages/pipelines/build/loader.server.tsx b/apps/web-remix/app/components/pages/pipelines/build/loader.server.tsx
@@ -20,13 +20,13 @@ export async function loader(args: LoaderFunctionArgs) {
     const pipeline = await pipelineApi.getAliasedPipeline(
       params.organizationId,
       params.pipelineId,
-      aliasId,
+      aliasId
     );
 
     const blocks = pipeline.config.blocks.map((block) => ({
       ...block,
       block_type: blockTypes.data.find(
-        (blockType) => blockType.type === block.type,
+        (blockType) => blockType.type === block.type
       ),
     }));
 

diff --git a/apps/web-remix/app/root.tsx b/apps/web-remix/app/root.tsx
@@ -15,6 +15,7 @@ import "./tailwind.css";
 import { GlobalNotFound } from "~/components/errorBoundaries/GlobalNotFound";
 import { GlobalRuntime } from "~/components/errorBoundaries/GlobalRuntime";
 import { PageProgress } from "~/components/progressBar/PageProgress";
+import { ErrorBoundaryLayout } from "~/components/errorBoundaries/ErrorBoundaryLayout";
 
 Modal.setAppElement("#_root");
 
@@ -74,16 +75,8 @@ export function ErrorBoundary() {
   };
 
   return (
-    <html>
-      <head>
-        <title>Oh no!</title>
-        <Meta />
-        <Links />
-      </head>
-      <body className="bg-neutral-950 text-white">
-        {renderErrorUi()}
-        <Scripts />
-      </body>
-    </html>
+    <ErrorBoundaryLayout className="bg-neutral-950 text-white">
+      {renderErrorUi()}
+    </ErrorBoundaryLayout>
   );
 }
diff --git a/apps/web-remix/app/routes/_dashboard.$organizationId.pipelines_.$pipelineId.build.tsx b/apps/web-remix/app/routes/_dashboard.$organizationId.pipelines_.$pipelineId.build.tsx
@@ -1,4 +1,8 @@
-export { page as default, meta } from "~/components/pages/pipelines/build";
+export {
+  page as default,
+  meta,
+  ErrorBoundary,
+} from "~/components/pages/pipelines/build";
 export {
   loader,
   action,
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { PipelineBuilder as page, meta } from "./page";
		export { BuildErrorBoundary as ErrorBoundary } from "./errorBoundary";