refactor: Remove unused ErrorBoundary component and update imports in Example and Startup screens

Author: JeremyDolle

documentation/docs/04-Guides/08 - Components/03 - ErrorBoundary.md

@@ -6,7 +6,7 @@ id: default-error
 keywords: [DefaultError, Error, boundary]
 ---
 
-The molecule `DefaultError` component is used into the `SafeScreen` component as the default error UI.
+The molecule `DefaultError` component is used into the [`ErrorBoundary` component](/docs/components/error-boundary) as the default error UI.
 This component is composed of `Text` components and a `Button` to reset the error (for re-executing the query for example).
 
 ### Props

documentation/docs/04-Guides/08 - Components/04 - Skeleton.md renamed to documentation/docs/04-Guides/08 - Components/03 - Skeleton.md

@@ -0,0 +1,43 @@
+---
+slug: /components/error-boundary
+sidebar_label: ErrorBoundary
+title: ErrorBoundary
+id: error-boundary
+keywords: [ErrorBoundary, Error, boundary]
+---
+
+The organism `ErrorBoundary` component is a helper component that allows you to catch JavaScript errors anywhere in the component tree and log those errors. This component is particularly useful when you need to catch errors in your app and display a fallback UI to the user.
+
+### Usage
+
+```jsx
+import { ErrorBoundary } from "@/components/atoms";
+
+<ErrorBoundary fallback={<div>Something went wrong</div>}>
+  <ExampleApplication />
+</ErrorBoundary>
+```
+
+### Log errors
+In the `ErrorBoundary` component, you will find a `onErrorReport` function that allows you to log the error in your application. You can use any logging library to log the error like `sentry`, `logrocket`, `crashlytics`, etc.
+
+```jsx
+const onErrorReport = (error: Error, info: ErrorInfo) => {
+  // use any crash reporting tool here
+  return onError?.(error, info);
+};
+```
+
+### Props
+
+As the `ErrorBoundary` component is a wrapper component, it accepts all the props from the [`react-error-boundary`](https://github.com/bvaughn/react-error-boundary) library with fallback props except that the `fallback` prop is empty by default.
+
+| Name       | Type   | Default | Description                                                                                   |
+|------------|--------|---------|-----------------------------------------------------------------------------------------------|
+| fallback   | ReactNode |         | The required fallback UI to be displayed when an error occurs.                                |
+| onReset    | function |         | The optional function to reset the error state                     |
+| ...props   | any    |         | all props from `ErrorBoundary` component are supported.                                      |
+
+
+:::info
+This component is used in the `SafeScreen` component to catch JavaScript errors and display a fallback UI to the user.

documentation/docs/04-Guides/08 - Components/06 - DefaultError.md renamed to documentation/docs/04-Guides/08 - Components/04 - DefaultError.md

@@ -1,13 +1,13 @@
 import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import tsEslint from 'typescript-eslint';
 import importPlugin from 'eslint-plugin-import';
 import jest from 'eslint-plugin-jest';
 import react from 'eslint-plugin-react';
 import reactHooks from 'eslint-plugin-react-hooks';
 import typescriptSortKeys from 'eslint-plugin-typescript-sort-keys';
 import unicorn from 'eslint-plugin-unicorn';
 import unusedImports from 'eslint-plugin-unused-imports';
+import tsEslint from 'typescript-eslint';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
@@ -56,6 +56,13 @@ export default [
       'react/jsx-sort-props': 2,
       'react/prop-types': 2,
       'react/react-in-jsx-scope': 0,
+      'react/require-default-props': [
+        2,
+        {
+          forbidDefaultForRequired: true,
+          functions: 'defaultArguments',
+        },
+      ],
       'unicorn/better-regex': 2,
       'unicorn/catch-error-name': 2,
       'unicorn/consistent-empty-array-spread': 2,

documentation/docs/04-Guides/08 - Components/05 - ErrorBoundary.md

@@ -1,4 +1,3 @@
 export { default as AssetByVariant } from './AssetByVariant/AssetByVariant';
-export { default as ErrorBoundary } from './ErrorBoundary/ErrorBoundary';
 export { default as IconByVariant } from './IconByVariant/IconByVariant';
 export { default as Skeleton } from './Skeleton/Skeleton';

documentation/docs/04-Guides/08 - Components/07 - SafeScreen.md renamed to documentation/docs/04-Guides/08 - Components/06 - SafeScreen.md

@@ -10,7 +10,7 @@ type Props = {
   onReset?: () => void;
 };
 
-function DefaultErrorScreen({ onReset }: Props) {
+function DefaultErrorScreen({ onReset = undefined }: Props) {
   const { gutters, layout, colors, fonts } = useTheme();
   const { t } = useTranslation();
   const { resetBoundary } = useErrorBoundary();

template/eslint.config.mjs

@@ -2,13 +2,21 @@ import type { ErrorInfo } from 'react';
 import type { ErrorBoundaryPropsWithFallback } from 'react-error-boundary';
 
 import { ErrorBoundary as DefaultErrorBoundary } from 'react-error-boundary';
-import { View } from 'react-native';
+
+import { DefaultError } from '@/components/molecules';
 
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 
-type Props = Optional<ErrorBoundaryPropsWithFallback, 'fallback'>;
+type Props = Optional<ErrorBoundaryPropsWithFallback, 'fallback'> & {
+  onReset?: () => void;
+};
 
-function ErrorBoundary({ fallback = <View />, onError, ...props }: Props) {
+function ErrorBoundary({
+  fallback = undefined,
+  onReset = undefined,
+  onError,
+  ...props
+}: Props) {
   const onErrorReport = (error: Error, info: ErrorInfo) => {
     // use any crash reporting tool here
     return onError?.(error, info);
@@ -17,7 +25,7 @@ function ErrorBoundary({ fallback = <View />, onError, ...props }: Props) {
   return (
     <DefaultErrorBoundary
       {...props}
-      fallback={fallback}
+      fallback={fallback || <DefaultError onReset={onReset} />}
       onError={onErrorReport}
     />
   );

template/src/components/atoms/index.ts

@@ -0,0 +1 @@
+export { default as ErrorBoundary } from './ErrorBoundary/ErrorBoundary';