Merge pull request #30337 from pasyukevich/feature/migrate-ErrorBoundary

[No QA] [TS Migration] Migrate 'ErrorBoundary' component to TypeScript

src/components/ErrorBoundary/BaseErrorBoundary.js → src/components/ErrorBoundary/BaseErrorBoundary.tsx

@@ -1,32 +1,17 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {ErrorBoundary} from 'react-error-boundary';
 import BootSplash from '@libs/BootSplash';
 import GenericErrorPage from '@pages/ErrorPage/GenericErrorPage';
-
-const propTypes = {
-    /* A message posted to `logError` (along with error data) when this component intercepts an error */
-    errorMessage: PropTypes.string.isRequired,
-
-    /* A function to perform the actual logging since different platforms support different tools */
-    logError: PropTypes.func,
-
-    /* Actual content wrapped by this error boundary */
-    children: PropTypes.node.isRequired,
-};
-
-const defaultProps = {
-    logError: () => {},
-};
+import {BaseErrorBoundaryProps, LogError} from './types';
 
 /**
  * This component captures an error in the child component tree and logs it to the server
  * It can be used to wrap the entire app as well as to wrap specific parts for more granularity
  * @see {@link https://reactjs.org/docs/error-boundaries.html#where-to-place-error-boundaries}
- * @return {React.Component}
  */
-function BaseErrorBoundary({logError, errorMessage, children}) {
-    const catchError = (error, errorInfo) => {
+
+function BaseErrorBoundary({logError = () => {}, errorMessage, children}: BaseErrorBoundaryProps) {
+    const catchError = (error: Error, errorInfo: React.ErrorInfo) => {
         logError(errorMessage, error, JSON.stringify(errorInfo));
         // We hide the splash screen since the error might happened during app init
         BootSplash.hide();
@@ -42,8 +27,6 @@ function BaseErrorBoundary({logError, errorMessage, children}) {
     );
 }
 
-BaseErrorBoundary.propTypes = propTypes;
-BaseErrorBoundary.defaultProps = defaultProps;
 BaseErrorBoundary.displayName = 'BaseErrorBoundary';
-
+export type {LogError, BaseErrorBoundaryProps};
 export default BaseErrorBoundary;

src/components/ErrorBoundary/index.native.tsx

@@ -0,0 +1,30 @@
+import crashlytics from '@react-native-firebase/crashlytics';
+import React from 'react';
+import Log from '@libs/Log';
+import BaseErrorBoundary from './BaseErrorBoundary';
+import {BaseErrorBoundaryProps, LogError} from './types';
+
+const logError: LogError = (errorMessage, error, errorInfo) => {
+    // Log the error to the server
+    Log.alert(`${errorMessage} - ${error.message}`, {errorInfo}, false);
+
+    /* On native we also log the error to crashlytics
+     * Since the error was handled we need to manually tell crashlytics about it */
+    crashlytics().log(`errorInfo: ${errorInfo}`);
+    crashlytics().recordError(error);
+};
+
+function ErrorBoundary({errorMessage, children}: Omit<BaseErrorBoundaryProps, 'logError'>) {
+    return (
+        <BaseErrorBoundary
+            errorMessage={errorMessage}
+            logError={logError}
+        >
+            {children}
+        </BaseErrorBoundary>
+    );
+}
+
+ErrorBoundary.displayName = 'ErrorBoundary';
+
+export default ErrorBoundary;

src/components/ErrorBoundary/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Log from '@libs//Log';
+import BaseErrorBoundary from './BaseErrorBoundary';
+import {BaseErrorBoundaryProps, LogError} from './types';
+
+const logError: LogError = (errorMessage, error, errorInfo) => {
+    // Log the error to the server
+    Log.alert(`${errorMessage} - ${error.message}`, {errorInfo}, false);
+};
+
+function ErrorBoundary({errorMessage, children}: Omit<BaseErrorBoundaryProps, 'logError'>) {
+    return (
+        <BaseErrorBoundary
+            errorMessage={errorMessage}
+            logError={logError}
+        >
+            {children}
+        </BaseErrorBoundary>
+    );
+}
+
+ErrorBoundary.displayName = 'ErrorBoundary';
+
+export default ErrorBoundary;

src/components/ErrorBoundary/types.ts

@@ -0,0 +1,14 @@
+type LogError = (message: string, error: Error, errorInfo: string) => void;
+
+type BaseErrorBoundaryProps = {
+    /* A message posted to `logError` (along with error data) when this component intercepts an error */
+    errorMessage: string;
+
+    /* A function to perform the actual logging since different platforms support different tools */
+    logError?: LogError;
+
+    /* Actual content wrapped by this error boundary */
+    children: React.ReactNode;
+};
+
+export type {BaseErrorBoundaryProps, LogError};