feat: add ErrorBoundary component

* feat: add ErrorBoundary component

* feat: add error logging to ErrorBoundary

* chore: add changeset file

Author: MieszkoTSH

.changeset/empty-bottles-fold.md

@@ -0,0 +1,5 @@
+---
+'react-starter-boilerplate': minor
+---
+
+add ErrorBoundary component

package-lock.json

@@ -61,6 +61,7 @@
     "qs": "6.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-error-boundary": "4.0.13",
     "react-intl": "6.6.5",
     "react-router-dom": "6.22.3",
     "typescript": "5.4.3"

package.json

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+
+import { logger } from 'integrations/logger';
+
+import { ErrorBoundary } from './ErrorBoundary';
+
+const logErrorSpy = vitest.spyOn(logger, 'error');
+
+const ErrorComponent = ({ shouldError = true }: { shouldError?: boolean }) => {
+  if (shouldError) {
+    throw new Error('error');
+  }
+  return <div>no error</div>;
+};
+
+describe('ErrorBoundary', () => {
+  it('should show fallback component and log error via logger', () => {
+    render(
+      <ErrorBoundary fallback={<div>error</div>}>
+        <ErrorComponent />
+      </ErrorBoundary>,
+    );
+
+    expect(screen.getByText('error')).toBeInTheDocument();
+    expect(logErrorSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not log error when shouldLog = false', () => {
+    render(
+      <ErrorBoundary shouldLog={false} fallback={<div>error</div>}>
+        <ErrorComponent />
+      </ErrorBoundary>,
+    );
+
+    expect(screen.getByText('error')).toBeInTheDocument();
+    expect(logErrorSpy).not.toBeCalled();
+  });
+
+  it('should show children content when there is no error', () => {
+    render(
+      <ErrorBoundary fallback={<div>error</div>}>
+        <ErrorComponent shouldError={false} />
+      </ErrorBoundary>,
+    );
+
+    expect(screen.getByText('no error')).toBeInTheDocument();
+    expect(logErrorSpy).not.toBeCalled();
+  });
+});

src/ui/errorBoundary/ErrorBoundary.test.tsx

@@ -0,0 +1,18 @@
+import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
+import { ErrorInfo } from 'react';
+
+import { logger } from 'integrations/logger';
+
+import { ErrorBoundaryProps } from './ErrorBoundary.types';
+
+export const ErrorBoundary = ({ shouldLog = true, onError, ...props }: ErrorBoundaryProps) => {
+  const handleError = (error: Error, errorInfo: ErrorInfo) => {
+    if (shouldLog) {
+      logger.error(error);
+    }
+    onError?.(error, errorInfo);
+  };
+
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return <ReactErrorBoundary onError={handleError} {...props} />;
+};

src/ui/errorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,10 @@
+import {
+  ErrorBoundaryProps as ReactErrorBoundaryProps,
+  FallbackProps as ErrorBoundaryFallbackProps,
+} from 'react-error-boundary';
+
+export type ErrorBoundaryProps = ReactErrorBoundaryProps & {
+  shouldLog?: boolean;
+};
+
+export type FallbackProps = ErrorBoundaryFallbackProps;

src/ui/errorBoundary/ErrorBoundary.types.ts

@@ -24,6 +24,7 @@ export default defineConfig({
     globals: true,
     environment: 'jsdom',
     setupFiles: 'src/setupTests.ts',
+    clearMocks: true,
     exclude: [...configDefaults.exclude, 'e2e/**/*', 'e2e-playwright/**/*'],
     coverage: {
       reporter: ['text', 'json', 'html'],