Initial commit

src/components/ErrorBoundary/__tests__/ErrorBoundary.tsx

@@ -0,0 +1,39 @@
+/**
+ * @jest-environment jsdom
+ */
+import { ReactNode } from "react"
+import { render, screen } from "@testing-library/react"
+import { MemoryRouter } from "react-router-dom"
+
+import ErrorBoundary from "../index"
+
+describe("<ErrorBoundary />", () => {
+    const tree = (children?: ReactNode) =>
+        render(
+            <MemoryRouter>
+                <ErrorBoundary>{children}</ErrorBoundary>
+            </MemoryRouter>
+        ).container.firstChild
+
+    it("renders nothing if no children", () => {
+        expect(tree()).toMatchSnapshot()
+    })
+
+    it("renders children if no error", () => {
+        expect(
+            tree(
+                <div>
+                    <h1>I am PeL</h1>
+                </div>
+            )
+        ).toMatchSnapshot()
+    })
+
+    it("renders error view if an error occurs", () => {
+        console.error = jest.fn()
+
+        tree(<div>{new Error()}</div>)
+
+        expect(screen.getByTestId("error-view")).toBeInTheDocument()
+    })
+})

src/components/ErrorBoundary/__tests__/__snapshots__/ErrorBoundary.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ErrorBoundary /> renders children if no error 1`] = `
+<div>
+  <h1>
+    I am PeL
+  </h1>
+</div>
+`;
+
+exports[`<ErrorBoundary /> renders nothing if no children 1`] = `null`;

src/components/ErrorBoundary/index.tsx

@@ -0,0 +1,45 @@
+import { ReactNode, PureComponent } from "react"
+
+interface Props {
+    children?: ReactNode
+}
+interface State {
+    error: Error | null
+    errorInfo: { componentStack: string } | null
+}
+
+class ErrorBoundary extends PureComponent<Props, State> {
+    constructor(props: Props) {
+        super(props)
+
+        this.state = { error: null, errorInfo: null }
+    }
+
+    componentDidCatch(error: Error, errorInfo: { componentStack: string }): void {
+        // Catch errors in any components below and re-render with error message
+        this.setState({ error, errorInfo })
+
+        // You can also log error messages to an error reporting service here
+    }
+
+    render(): ReactNode {
+        const { children } = this.props
+        const { errorInfo, error } = this.state
+
+        // If there's an error, render error path
+        return errorInfo ? (
+            <div data-testid="error-view">
+                <h2>Something went wrong.</h2>
+                <details style={{ whiteSpace: "pre-wrap" }}>
+                    {error && error.toString()}
+                    <br />
+                    {errorInfo.componentStack}
+                </details>
+            </div>
+        ) : (
+            children || null
+        )
+    }
+}
+
+export default ErrorBoundary