From 17fb9a7213558ee29fb56efd9e29d81daae84f07 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Tue, 4 Apr 2023 17:53:59 +0700
Subject: [PATCH] Migrate to remix v2 error boundary (#1363)

Ref
https://remix.run/docs/en/1.15.0/pages/v2#catchboundary-and-errorboundary

Since 1.15 remix will force to switch with warnings.
---
 apps/builder/app/routes/$.tsx                  | 7 ++++---
 apps/builder/app/routes/builder/$projectId.tsx | 7 ++++---
 apps/builder/app/routes/dashboard/index.tsx    | 7 ++++---
 apps/builder/app/routes/index.tsx              | 6 ++----
 apps/builder/remix.config.js                   | 4 ++++
 5 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/apps/builder/app/routes/$.tsx b/apps/builder/app/routes/$.tsx
index 84a3fea2f7..4af9ff93c7 100644
--- a/apps/builder/app/routes/$.tsx
+++ b/apps/builder/app/routes/$.tsx
@@ -1,6 +1,6 @@
 import { redirect } from "@remix-run/node";
-import type { LoaderArgs, ErrorBoundaryComponent } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
+import type { LoaderArgs } from "@remix-run/node";
+import { useLoaderData, useRouteError } from "@remix-run/react";
 import { type Params, Root, getComponent } from "@webstudio-is/react-sdk";
 import env from "~/env/env.public.server";
 import { sentryException } from "~/shared/sentry";
@@ -23,7 +23,8 @@ export const loader = async ({ request }: LoaderArgs) => {
   return { params };
 };
 
-export const ErrorBoundary: ErrorBoundaryComponent = ({ error }) => {
+export const ErrorBoundary = () => {
+  const error = useRouteError();
   sentryException({ error });
   const message = error instanceof Error ? error.message : String(error);
   return <ErrorMessage message={message} />;
diff --git a/apps/builder/app/routes/builder/$projectId.tsx b/apps/builder/app/routes/builder/$projectId.tsx
index c02a2ff1d8..6fbf9846f5 100644
--- a/apps/builder/app/routes/builder/$projectId.tsx
+++ b/apps/builder/app/routes/builder/$projectId.tsx
@@ -1,6 +1,6 @@
-import { useLoaderData } from "@remix-run/react";
+import { useLoaderData, useRouteError } from "@remix-run/react";
 import type { ShouldRevalidateFunction } from "@remix-run/react";
-import type { ErrorBoundaryComponent, LoaderArgs } from "@remix-run/node";
+import type { LoaderArgs } from "@remix-run/node";
 import { loadBuildByProjectId } from "@webstudio-is/project-build/server";
 import { db } from "@webstudio-is/project/server";
 import { authorizeProject } from "@webstudio-is/trpc-interface/server";
@@ -66,7 +66,8 @@ export const loader = async ({
   };
 };
 
-export const ErrorBoundary: ErrorBoundaryComponent = ({ error }) => {
+export const ErrorBoundary = () => {
+  const error = useRouteError();
   sentryException({ error });
   const message = error instanceof Error ? error.message : String(error);
   return <ErrorMessage message={message} />;
diff --git a/apps/builder/app/routes/dashboard/index.tsx b/apps/builder/app/routes/dashboard/index.tsx
index e30987f7af..4411dae675 100644
--- a/apps/builder/app/routes/dashboard/index.tsx
+++ b/apps/builder/app/routes/dashboard/index.tsx
@@ -1,5 +1,5 @@
-import { useLoaderData } from "@remix-run/react";
-import type { ErrorBoundaryComponent, LoaderArgs } from "@remix-run/node";
+import { useLoaderData, useRouteError } from "@remix-run/react";
+import type { LoaderArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 import { Dashboard } from "~/dashboard";
 import { findAuthenticatedUser } from "~/services/auth.server";
@@ -35,7 +35,8 @@ export const loader = async ({
   return { user, projects };
 };
 
-export const ErrorBoundary: ErrorBoundaryComponent = ({ error }) => {
+export const ErrorBoundary = () => {
+  const error = useRouteError();
   sentryException({ error });
   const message = error instanceof Error ? error.message : String(error);
   return <ErrorMessage message={message} />;
diff --git a/apps/builder/app/routes/index.tsx b/apps/builder/app/routes/index.tsx
index 6f8291ab67..490e0e144c 100644
--- a/apps/builder/app/routes/index.tsx
+++ b/apps/builder/app/routes/index.tsx
@@ -3,7 +3,7 @@
 // see https://github.com/remix-run/remix/issues/2098#issuecomment-1049262218 .
 // To solve this, we're re-exporting the $.tsx route API in index.tsx
 
-import type { ErrorBoundaryComponent, LoaderArgs } from "@remix-run/node";
+import type { LoaderArgs } from "@remix-run/node";
 import CatchAllContnet, {
   loader as catchAllloader,
   ErrorBoundary as CatchAllErrorBoundary,
@@ -13,8 +13,6 @@ import CatchAllContnet, {
 // If they are the same, Remix may get confused, and don't load data on page transitions.
 
 export const loader = (args: LoaderArgs) => catchAllloader(args);
-export const ErrorBoundary: ErrorBoundaryComponent = ({ error }) => (
-  <CatchAllErrorBoundary error={error} />
-);
+export const ErrorBoundary = () => <CatchAllErrorBoundary />;
 const Content = () => <CatchAllContnet />;
 export default Content;
diff --git a/apps/builder/remix.config.js b/apps/builder/remix.config.js
index 47e34ad6c4..9b0a0a1017 100644
--- a/apps/builder/remix.config.js
+++ b/apps/builder/remix.config.js
@@ -32,4 +32,8 @@ module.exports = {
   watchPaths: () => {
     return ["../../packages/**/lib/**.js"];
   },
+
+  future: {
+    v2_errorBoundary: true,
+  },
 };