@ainias42/react-bootstrap-mobile 1.0.3 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Mobile React Components",
   "publishConfig": {
     "access": "public"

package/src/Components/ErrorBoundary.tsx

@@ -0,0 +1,46 @@
+import { Block } from '@/Components/Layout/Block';
+import { Heading } from '@/Components/Text/Heading';
+import { Text } from '@/Components/Text/Text';
+import React, { Component } from 'react';
+import type { ReactNode } from 'react';
+
+export type ErrorBoundaryProps = {
+    children: ReactNode;
+    formatError?: (error: unknown) => string;
+    showStack?: boolean;
+};
+
+type State = {
+    error: any;
+};
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
+    state = {
+        error: null,
+    } as State;
+
+    static getDerivedStateFromError(error: any) {
+        console.error('Got error', error);
+        return { error };
+    }
+
+    render() {
+        const { error } = this.state;
+        const { children, formatError, showStack } = this.props;
+        if (error) {
+            const message = formatError?.(error) || String(error);
+            let stack: string | undefined;
+            if (error instanceof Error) {
+                stack = error.stack;
+            }
+
+            return (
+                <Block>
+                    <Heading>{message}</Heading>
+                    {!!stack && showStack && <Text style={{ whiteSpace: 'pre' }}>{stack}</Text>}
+                </Block>
+            );
+        }
+        return children;
+    }
+}

package/src/index.ts

@@ -2,6 +2,7 @@ export * from './Size';
 export * from './treeshakeTest';
 export * from './TypeHelpers';
 export * from './WrongChildError';
+export * from './Components/ErrorBoundary';
 export * from './Components/Flavor';
 export * from './Components/RbmComponentProps';
 export * from './helper/Characters';