[RN] Allow passing error details to logError

Author: FranAguilera

examples/expo/src/app/App.tsx

@@ -83,6 +83,16 @@ const triggerGlobalJsError = (errorType: ErrorType = 'TypeError') => {
   }
 };
 
+const triggerLogErrorExample = () => {
+  try {
+    const data = JSON.parse('{ invalid json }');
+    console.log(data);
+  } catch (err) {
+    error('JSON parsing failed in example', err);
+    showToast('Error logged with error API');
+  }
+};
+
 
 const LOG_LEVEL_ARRAY = Array.from(LOG_LEVELS.keys());
 
@@ -331,13 +341,30 @@ const HomeScreen = () => {
       </View>
       <View style={styles.buttonRow}>
         <Pressable
-          style={({ pressed }) => [styles.button, pressed && styles.buttonActive]}
+          style={({ pressed }) => [
+            styles.button,
+            styles.errorButton,
+            pressed && styles.buttonActive,
+          ]}
           onPress={() => triggerGlobalJsError(selectedErrorType)}
         >
           <Text style={styles.buttonText}>Trigger {selectedErrorType}</Text>
         </Pressable>
       </View>
 
+      <View style={styles.buttonRow}>
+        <Pressable
+          style={({ pressed }) => [
+            styles.button,
+            styles.logErrorButton,
+            pressed && styles.buttonActive,
+          ]}
+          onPress={triggerLogErrorExample}
+        >
+          <Text style={styles.buttonText}>Test logError API</Text>
+        </Pressable>
+      </View>
+
     </View>
   );
 };
@@ -387,6 +414,12 @@ const styles = StyleSheet.create({
     borderRadius: 5,
     marginVertical: 10,
   },
+  errorButton: {
+    backgroundColor: '#e74c3c',
+  },
+  logErrorButton: {
+    backgroundColor: '#007ACC',
+  },
   buttonActive: {
     backgroundColor: '#007867',
   },

packages/react-native/README.md

@@ -109,6 +109,15 @@ warn('Hello, World!');
 
 error('Hello, World!');
 
+// Optionally pass an Error object to automatically capture error details
+try {
+  // some code that might throw
+} catch (err) {
+  error('Failed to process request', err);
+  // Or with additional fields
+  error('Failed to process request', { userId: '123' }, err);
+}
+
 ```
 
 ### Network Integration

packages/react-native/src/index.tsx

@@ -71,8 +71,18 @@ export function warn(message: string, fields?: SerializableLogFields): void {
   return logInternal('warn', message, fields);
 }
 
-export function error(message: string, fields?: SerializableLogFields): void {
-  return logInternal('error', message, fields);
+export function error(
+  message: string,
+  fields?: SerializableLogFields,
+  error?: Error | null,
+): void {
+  const combinedFields = error ? {
+    ...fields,
+    _error: error.name || 'Error',
+    _error_details: error.message || '',
+  } : fields;
+  
+  return logInternal('error', message, combinedFields);
 }
 
 export function log(

packages/react-native/src/log.test.ts

@@ -8,14 +8,20 @@
 /* eslint-disable no-useless-escape */
 
 import { logInternal } from './log';
+import { error } from './index';
 import Native from './NativeBdReactNative';
 
 jest.mock('react-native', () => ({
   TurboModuleRegistry: {
     getEnforcing: jest.fn().mockReturnValue({
       log: jest.fn(),
+      init: jest.fn(),
     }),
   },
+  NativeModules: {},
+  Platform: {
+    select: jest.fn(),
+  },
 }));
 
 describe('log', () => {
@@ -41,3 +47,105 @@ describe('log', () => {
     expect(Native.log).toHaveBeenCalledWith(0, 'message', expected);
   });
 });
+
+describe('error', () => {
+  beforeEach(() => {
+    (Native.log as jest.Mock) = jest.fn();
+  });
+
+  it('should log error with just message', () => {
+    error('Simple error message');
+
+    expect(Native.log).toHaveBeenCalledWith(
+      4,
+      'Simple error message',
+      undefined
+    );
+  });
+
+  it('should log error with message and fields', () => {
+    error('Error message', { userId: '123' });
+
+    expect(Native.log).toHaveBeenCalledWith(
+      4,
+      'Error message',
+      { userId: '123' }
+    );
+  });
+
+  it('should log error with Error object', () => {
+    const err = new Error('Technical error');
+    err.name = 'TestError';
+
+    error('User-friendly message', undefined, err);
+
+    expect(Native.log).toHaveBeenCalledWith(
+      4,
+      'User-friendly message',
+      {
+        _error: 'TestError',
+        _error_details: 'Technical error',
+      }
+    );
+  });
+
+  it('should log error with fields and Error object', () => {
+    const err = new Error('Technical error');
+    err.name = 'TestError';
+
+    error('User-friendly message', { userId: '123', action: 'submit' }, err);
+
+    expect(Native.log).toHaveBeenCalledWith(
+      4,
+      'User-friendly message',
+      {
+        userId: '123',
+        action: 'submit',
+        _error: 'TestError',
+        _error_details: 'Technical error',
+      }
+    );
+  });
+
+  it('should handle null Error', () => {
+    error('Message with null error', { context: 'test' }, null);
+
+    expect(Native.log).toHaveBeenCalledWith(
+      4,
+      'Message with null error',
+      { context: 'test' }
+    );
+  });
+
+  it('should handle error with empty message', () => {
+    const err = new Error();
+    err.name = 'EmptyError';
+
+    error('Error occurred', undefined, err);
+
+    expect(Native.log).toHaveBeenCalledWith(
+      4,
+      'Error occurred',
+      {
+        _error: 'EmptyError',
+        _error_details: '',
+      }
+    );
+  });
+
+  it('should handle error without name', () => {
+    const err = new Error('Message only');
+    Object.defineProperty(err, 'name', { value: '' });
+
+    error('Operation failed', undefined, err);
+
+    expect(Native.log).toHaveBeenCalledWith(
+      4,
+      'Operation failed',
+      {
+        _error: 'Error',
+        _error_details: 'Message only',
+      }
+    );
+  });
+});