Add function

Author: krystofwoldrich

example/src/App.tsx

@@ -1,20 +1,104 @@
-import { Text, View, StyleSheet } from 'react-native';
-import { multiply } from 'react-native-console-symbolicator';
+import {
+  View,
+  StyleSheet,
+  useColorScheme,
+  FlatList,
+  SafeAreaView,
+  Text,
+} from 'react-native';
+import { installConsoleSymbolicator } from 'react-native-console-symbolicator';
+import Button from './components/Button';
 
-const result = multiply(3, 7);
+installConsoleSymbolicator();
+
+const message =
+  'When reading this error in React Native Dev Tools, you should see the original source code location instead of the bundle.';
 
 export default function App() {
+  const colorScheme = useColorScheme();
+  const isDarkMode = colorScheme === 'dark';
+
   return (
-    <View style={styles.container}>
-      <Text>Result: {result}</Text>
-    </View>
+    <SafeAreaView
+      style={[styles.container, isDarkMode && styles.containerDark]}
+    >
+      <View style={styles.header}>
+        <Text style={[styles.headerText, isDarkMode && styles.headerTextDark]}>
+          Console Examples
+        </Text>
+      </View>
+      <FlatList
+        data={[
+          {
+            title: 'Throw example error',
+            action: () => {
+              throw new Error(message);
+            },
+          },
+          {
+            title: 'console.error',
+            action: () => console.error(new Error(message)),
+          },
+          {
+            title: 'console.warn',
+            action: () => console.warn(new Error(message)),
+          },
+          {
+            title: 'console.log',
+            action: () => console.log(new Error(message)),
+          },
+          {
+            title: 'console.info',
+            action: () => console.info(new Error(message)),
+          },
+          {
+            title: 'console.debug',
+            action: () => console.debug(new Error(message)),
+          },
+          {
+            title: 'console.assert',
+            action: () =>
+              console.assert(
+                false,
+                'For the example purpose this is always `false`.'
+              ),
+          },
+        ]}
+        keyExtractor={(item) => item.title}
+        renderItem={({ item }) => (
+          <Button title={item.title} onPress={item.action} />
+        )}
+        ItemSeparatorComponent={() => <View style={{ height: 10 }} />}
+        contentContainerStyle={{ width: '100%', padding: 20 }}
+      />
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
+    backgroundColor: 'white',
     flex: 1,
     alignItems: 'center',
-    justifyContent: 'center',
+    justifyContent: 'flex-start',
+  },
+  containerDark: {
+    backgroundColor: 'black',
+  },
+  header: {
+    width: '100%',
+    paddingVertical: 16,
+    paddingHorizontal: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e0e0e0',
+    alignItems: 'center',
+  },
+  headerText: {
+    fontSize: 22,
+    fontWeight: 'bold',
+    color: '#333',
+  },
+  headerTextDark: {
+    color: '#f0f0f0',
   },
 });

example/src/components/Button.tsx

@@ -0,0 +1,52 @@
+import { Pressable, Text, StyleSheet, useColorScheme } from 'react-native';
+
+interface ButtonProps {
+  title: string;
+  onPress: () => void;
+}
+
+const Button = ({ title, onPress }: ButtonProps) => {
+  const colorScheme = useColorScheme();
+  const isDarkMode = colorScheme === 'dark';
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => [
+        styles.button,
+        isDarkMode && styles.buttonDark,
+        pressed && styles.buttonPressed,
+      ]}
+    >
+      <Text style={[styles.text, isDarkMode && styles.textDark]}>{title}</Text>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    borderColor: 'black',
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonDark: {
+    borderColor: 'white',
+  },
+  buttonPressed: {
+    transform: [{ scale: 0.95 }],
+  },
+  text: {
+    color: 'black',
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  textDark: {
+    color: 'white',
+  },
+});
+
+export default Button;

src/index.tsx

@@ -1,3 +1,77 @@
-export function multiply(a: number, b: number): number {
-  return a * b;
-}
+import symbolicateStackTrace from 'react-native/Libraries/Core/Devtools/symbolicateStackTrace';
+import parseErrorStack from 'react-native/Libraries/Core/Devtools/parseErrorStack';
+
+type ConsoleLogFunction = (...args: unknown[]) => void;
+
+export const installConsoleSymbolicator = () => {
+  if (!__DEV__) {
+    return;
+  }
+
+  const originalConsole = {
+    error: console.error,
+    warn: console.warn,
+    log: console.log,
+    info: console.info,
+    debug: console.debug,
+    assert: console.assert,
+  };
+
+  const makeSymbolicatedConsole = (fn: ConsoleLogFunction) =>
+    symbolicatedConsole(fn, originalConsole.error);
+
+  console.error = makeSymbolicatedConsole(originalConsole.error);
+  console.warn = makeSymbolicatedConsole(originalConsole.warn);
+  console.log = makeSymbolicatedConsole(originalConsole.log);
+  console.info = makeSymbolicatedConsole(originalConsole.info);
+  console.debug = makeSymbolicatedConsole(originalConsole.debug);
+  console.assert = makeSymbolicatedConsole(
+    originalConsole.assert as ConsoleLogFunction
+  );
+};
+
+const symbolicatedConsole =
+  (original: ConsoleLogFunction, logError: ConsoleLogFunction) =>
+  async (...args: unknown[]) => {
+    const symbolicating: Array<Promise<unknown>> = args.map(async (arg) => {
+      if (!(arg instanceof Error) || !arg.stack) {
+        return arg;
+      }
+
+      // Symbolication works only with the dev server running
+      try {
+        // @ts-ignore = the TS types are broken, the function returns object with `stack` property and a code snippet
+        const { stack: frames } = await symbolicateStackTrace(
+          // @ts-ignore - the TS types are broken, the function requires the stack string not the error object
+          parseErrorStack(arg.stack)
+        );
+        const newStack = frames
+          .map(
+            (frame: {
+              // FIXME: (@krystofwoldrich) Remove when RN types are fixed
+              methodName: string;
+              file: string | null | undefined;
+              lineNumber: number | null | undefined;
+              column: number | null | undefined;
+            }) => {
+              const fileInfo =
+                frame.file != null && frame.file.length > 0
+                  ? `${frame.file}:${frame.lineNumber || 0}:${frame.column || 0}`
+                  : 'unknown';
+              return `    at ${frame.methodName} (${fileInfo})`;
+            }
+          )
+          .join('\n');
+
+        arg.stack = arg.message ? `${arg.message}\n${newStack}` : newStack;
+      } catch (Oo) {
+        logError('Error during symbolication:', Oo);
+      }
+
+      return arg;
+    });
+
+    const symbolicated = await Promise.all(symbolicating);
+
+    original(...symbolicated);
+  };