From e17474adad49c819988fead2e16905e1def8092d Mon Sep 17 00:00:00 2001 From: Giuseppe Scuglia Date: Tue, 14 Jan 2025 19:39:31 +0100 Subject: [PATCH 1/3] wip error boundary --- src/components/Error.tsx | 41 ++++++++++++++++++++++++++++++++ src/components/ErrorBoundary.tsx | 33 +++++++++++++++++++++++++ src/components/Header.tsx | 11 ++++++--- src/main.tsx | 6 ++++- 4 files changed, 87 insertions(+), 4 deletions(-) create mode 100644 src/components/Error.tsx create mode 100644 src/components/ErrorBoundary.tsx diff --git a/src/components/Error.tsx b/src/components/Error.tsx new file mode 100644 index 00000000..e35a0455 --- /dev/null +++ b/src/components/Error.tsx @@ -0,0 +1,41 @@ +import { XCircle } from "lucide-react"; +import { Header } from "./Header"; +import { Card } from "./ui/card"; + +export function Error() { + return ( +
+
+
+
+
+ + +
+ An error occurred +
+
+ If this issue persists, please reach out to us on{" "} + + Discord + {" "} + or open a new{" "} + + Github issue + +
+ +
+
+ ); +} diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx new file mode 100644 index 00000000..a70764ea --- /dev/null +++ b/src/components/ErrorBoundary.tsx @@ -0,0 +1,33 @@ +import type { ReactNode } from "react"; +import { Component } from "react"; + +interface Props { + children?: ReactNode; + fallback: ReactNode; +} + +interface State { + hasError: boolean; +} + +export default class ErrorBoundary extends Component { + public state: State = { + hasError: false, + }; + + public static getDerivedStateFromError(_: Error): State { + return { hasError: true }; + } + + public componentDidCatch(error: Error) { + console.error(error); + } + + public render() { + if (this.state.hasError) { + return this.props.fallback; + } + + return this.props.children; + } +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 74dc4121..33115d7c 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -2,12 +2,17 @@ import { Link } from "react-router-dom"; import { SidebarTrigger } from "./ui/sidebar"; import { Separator } from "./ui/separator"; -export function Header() { +export function Header({ hasError }: { hasError?: boolean }) { return (
- - + {!hasError && ( + <> + + + + )} +
- -
+ +
An error occurred
-
+
If this issue persists, please reach out to us on{" "} Date: Wed, 15 Jan 2025 11:18:50 +0100 Subject: [PATCH 3/3] test: add ErrorBoundary --- src/components/ErrorBoundary.tsx | 6 ++--- .../__tests__/ErrorBoundary.test.tsx | 22 +++++++++++++++++++ 2 files changed, 25 insertions(+), 3 deletions(-) create mode 100644 src/components/__tests__/ErrorBoundary.test.tsx diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx index a70764ea..acd1ee61 100644 --- a/src/components/ErrorBoundary.tsx +++ b/src/components/ErrorBoundary.tsx @@ -15,12 +15,12 @@ export default class ErrorBoundary extends Component { hasError: false, }; - public static getDerivedStateFromError(_: Error): State { + public static getDerivedStateFromError(): State { return { hasError: true }; } - public componentDidCatch(error: Error) { - console.error(error); + public componentDidCatch() { + // this should log the error to a service like Sentry } public render() { diff --git a/src/components/__tests__/ErrorBoundary.test.tsx b/src/components/__tests__/ErrorBoundary.test.tsx new file mode 100644 index 00000000..31f731f3 --- /dev/null +++ b/src/components/__tests__/ErrorBoundary.test.tsx @@ -0,0 +1,22 @@ +import { render } from "@/lib/test-utils"; +import { screen } from "@testing-library/react"; +import { describe, expect, it, vi } from "vitest"; +import ErrorBoundary from "../ErrorBoundary"; +import { Error } from "../Error"; + +const ErrorComponent = () => { + throw Error(); +}; + +describe("ErrorBoundary", () => { + it("renders fallback when a child throws an error", () => { + vi.spyOn(console, "error").mockImplementation(() => {}); + render( + }> + + , + ); + + expect(screen.getByText(/an error occurred/i)).toBeVisible(); + }); +});