From 891a2fe576a9c0895b5c876837166069bc288a71 Mon Sep 17 00:00:00 2001
From: ArslanSaleem
Date: Mon, 28 Oct 2024 17:34:15 +0100
Subject: [PATCH] feat(rollbar): add error boundaries on app and main view
---
frontend/.env.example | 3 +-
frontend/package.json | 2 +
frontend/src/app/(app)/layout.tsx | 10 ++-
frontend/src/app/layout.tsx | 29 +++++---
frontend/src/components/ErrorFallback.tsx | 81 +++++++++++++++++++++
frontend/yarn.lock | 85 ++++++++++++++++++++++-
6 files changed, 196 insertions(+), 14 deletions(-)
create mode 100644 frontend/src/components/ErrorFallback.tsx
diff --git a/frontend/.env.example b/frontend/.env.example
index 49593d3..3b74913 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -1,3 +1,4 @@
NEXT_PUBLIC_API_URL=http://localhost:3000/api/v1
NEXT_PUBLIC_STORAGE_URL=http://localhost:3000/api/assets
-NEXT_PUBLIC_MIXPANEL_TOKEN=f2e8a71ab2bde33ebf346c5abf6ba9fa
\ No newline at end of file
+NEXT_PUBLIC_MIXPANEL_TOKEN=f2e8a71ab2bde33ebf346c5abf6ba9fa
+NEXT_PUBLIC_ROLLBAR_ACCESS_TOKEN=0df0bee895044430880278e2b2a5b2d2
diff --git a/frontend/package.json b/frontend/package.json
index 4faf62c..2c7c9f1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,6 +16,7 @@
"@radix-ui/react-context-menu": "^2.2.1",
"@radix-ui/react-radio-group": "^1.2.0",
"@react-pdf/renderer": "^4.0.0",
+ "@rollbar/react": "^0.12.0-beta",
"@tanstack/react-query": "^5.51.1",
"@tippyjs/react": "^4.2.6",
"@types/mixpanel-browser": "^2.50.1",
@@ -39,6 +40,7 @@
"react-quill": "^2.0.0",
"rehype-sanitize": "^6.0.0",
"remark-gfm": "^4.0.0",
+ "rollbar": "^2.26.4",
"tailwind-merge": "^2.4.0"
},
"devDependencies": {
diff --git a/frontend/src/app/(app)/layout.tsx b/frontend/src/app/(app)/layout.tsx
index f184192..06f391f 100644
--- a/frontend/src/app/(app)/layout.tsx
+++ b/frontend/src/app/(app)/layout.tsx
@@ -4,6 +4,8 @@ import { ScrollProvider } from "@/context/ScrollContext";
import Sidebar from "@/components/ui/Sidebar";
import Navbar from "@/components/ui/Navbar";
import "@/app/style/globals.css";
+import { ErrorBoundary } from "@rollbar/react";
+import { ViewErrorFallback } from "@/components/ErrorFallback";
export default function RootLayout({
children,
@@ -17,9 +19,11 @@ export default function RootLayout({
-
- {children}
-
+
+
+ {children}
+
+
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index ac7ff76..f38de68 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -4,9 +4,16 @@ import React from "react";
import { ReactQueryClientProvider } from "@/components/ReactQueryClientProvider";
import { Toaster } from "react-hot-toast";
import "@/app/style/globals.css";
+import { Provider, ErrorBoundary } from "@rollbar/react";
+import { GlobalErrorFallback } from "@/components/ErrorFallback";
const inter = Inter({ subsets: ["latin"] });
+const rollbarConfig = {
+ accessToken: process.env.NEXT_PUBLIC_ROLLBAR_ACCESS_TOKEN,
+ environment: process.env.NODE_ENV ?? "production",
+};
+
export const metadata: Metadata = {
title: "PandaETL",
description:
@@ -22,14 +29,18 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
-
-
-
-
-
- {children}
-
-
-
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
);
}
diff --git a/frontend/src/components/ErrorFallback.tsx b/frontend/src/components/ErrorFallback.tsx
new file mode 100644
index 0000000..bb3f048
--- /dev/null
+++ b/frontend/src/components/ErrorFallback.tsx
@@ -0,0 +1,81 @@
+"use client";
+import React, { useEffect } from "react";
+import { Button } from "./ui/Button";
+import { useRouter } from "next/navigation";
+
+// Define the props that the ErrorFallback will receive
+interface ErrorFallbackProps {
+ error: Error | null; // The error that caused the fallback
+ resetError: () => void; // Function to reset the error state
+}
+
+// Fallback UI component displayed on error
+export const GlobalErrorFallback = ({
+ error,
+ resetError,
+}: ErrorFallbackProps) => {
+ const router = useRouter();
+
+ // useEffect(() => {
+ // const handleRouteChange = () => {
+ // resetError(); // Reset error state on route change
+ // };
+
+ // // Handle route change by overriding the router push method
+ // const originalPush = router.push;
+ // router.push = (...args) => {
+ // handleRouteChange(); // Call the reset function
+ // return originalPush(...args);
+ // };
+
+ // // Cleanup function to restore original router push method
+ // return () => {
+ // router.push = originalPush;
+ // };
+ // }, [resetError, router]);
+
+ return (
+
+
Oops! Something went wrong.
+
{error?.message || "We're working on fixing this issue."}
+
+
+
Oops! Something went wrong.
+
{error?.message || "We're working on fixing this issue."}
+
+