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 ;
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 ;
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 ;
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 }) => (
-
-);
+export const ErrorBoundary = () => ;
const Content = () => ;
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,
+ },
};