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

@@ -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} />;

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} />;

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} />;

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;

apps/builder/remix.config.js

@@ -32,4 +32,8 @@ module.exports = {
   watchPaths: () => {
     return ["../../packages/**/lib/**.js"];
   },
+
+  future: {
+    v2_errorBoundary: true,
+  },
 };