From 280a69bd3ccc5d56475a08275780cc27fa7f61eb Mon Sep 17 00:00:00 2001 From: Prateek Shourya Date: Thu, 20 Jun 2024 16:50:05 +0530 Subject: [PATCH] [WEB-1669] chore: enable sign out and sentry on exception error page. (#4884) * [WEB-1669] chore: enable sign out and sentry on exception error page. * fix: global error handling --------- Co-authored-by: sriram veeraghanta --- web/.gitignore | 3 +++ web/app/error.tsx | 56 +++++++++++++++------------------------- web/app/global-error.tsx | 23 +++++++++++++++++ web/package.json | 2 +- 4 files changed, 48 insertions(+), 36 deletions(-) create mode 100644 web/.gitignore create mode 100644 web/app/global-error.tsx diff --git a/web/.gitignore b/web/.gitignore new file mode 100644 index 000000000..7d7c7a5f2 --- /dev/null +++ b/web/.gitignore @@ -0,0 +1,3 @@ + +# Sentry Config File +.env.sentry-build-plugin diff --git a/web/app/error.tsx b/web/app/error.tsx index 5722a9913..da5d3bf20 100644 --- a/web/app/error.tsx +++ b/web/app/error.tsx @@ -1,49 +1,37 @@ "use client"; -// import { useEffect } from "react"; -// import * as Sentry from "@sentry/nextjs"; -// services -import { Button } from "@plane/ui"; +// ui +import { Button, TOAST_TYPE, setToast } from "@plane/ui"; // helpers -// import { API_BASE_URL } from "@/helpers/common.helper"; +import { API_BASE_URL } from "@/helpers/common.helper"; +// hooks +import { useAppRouter } from "@/hooks/use-app-router"; // layouts import DefaultLayout from "@/layouts/default-layout"; -// -// import { AuthService } from "@/services/auth.service"; -// layouts -// ui +// services +import { AuthService } from "@/services/auth.service"; // services -// const authService = new AuthService(); +const authService = new AuthService(); -// type props = { -// error: Error & { digest?: string }; -// }; - -// TODO: adding error sentry logging. -// const CustomErrorComponent = ({ error }: props) => { -const CustomErrorComponent = () => { - // const router = useAppRouter(); - - // useEffect(() => { - // Sentry.captureException(error); - // }, [error]); +export default function CustomErrorComponent() { + const router = useAppRouter(); const handleRefresh = () => { window.location.reload(); }; const handleSignOut = async () => { - // await authService - // .signOut(API_BASE_URL) - // .catch(() => - // setToast({ - // type: TOAST_TYPE.ERROR, - // title: "Error!", - // message: "Failed to sign out. Please try again.", - // }) - // ) - // .finally(() => router.push("/")); + await authService + .signOut(API_BASE_URL) + .catch(() => + setToast({ + type: TOAST_TYPE.ERROR, + title: "Error!", + message: "Failed to sign out. Please try again.", + }) + ) + .finally(() => router.push("/")); }; return ( @@ -84,6 +72,4 @@ const CustomErrorComponent = () => { ); -}; - -export default CustomErrorComponent; +} diff --git a/web/app/global-error.tsx b/web/app/global-error.tsx new file mode 100644 index 000000000..a984441f0 --- /dev/null +++ b/web/app/global-error.tsx @@ -0,0 +1,23 @@ +"use client"; + +import { useEffect } from "react"; +import * as Sentry from "@sentry/nextjs"; +import NextError from "next/error"; + +export default function GlobalError({ error }: { error: Error & { digest?: string } }) { + useEffect(() => { + Sentry.captureException(error); + }, [error]); + + return ( + + + {/* `NextError` is the default Next.js error page component. Its type + definition requires a `statusCode` prop. However, since the App Router + does not expose status codes for errors, we simply pass 0 to render a + generic error message. */} + + + + ); +} diff --git a/web/package.json b/web/package.json index 382f5a4b1..177f4dcc7 100644 --- a/web/package.json +++ b/web/package.json @@ -7,7 +7,7 @@ "develop": "next dev --port 3000", "build": "next build", "start": "next start", - "lint": "eslint . --ext .ts,.tsx,.js,.jsx", + "lint": "next lint --dir .", "export": "next export", "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist" },