feat: Implement better reanimated logger with clean stack traces

apps/fabric-example/metro.config.js

@@ -1,4 +1,7 @@
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const {
+  wrapWithReanimatedMetroConfig,
+} = require('react-native-reanimated/metro-config');
 
 const path = require('path');
 
@@ -8,4 +11,6 @@ const config = {
   watchFolders: [root],
 };
 
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+module.exports = wrapWithReanimatedMetroConfig(
+  mergeConfig(getDefaultConfig(__dirname), config)
+);

apps/macos-example/metro.config.js

@@ -1,4 +1,7 @@
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const {
+  wrapWithReanimatedMetroConfig,
+} = require('react-native-reanimated/metro-config');
 
 const path = require('path');
 const exclusionList = require('metro-config/src/defaults/exclusionList');
@@ -30,4 +33,6 @@ const config = {
   },
 };
 
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+module.exports = wrapWithReanimatedMetroConfig(
+  mergeConfig(getDefaultConfig(__dirname), config)
+);

apps/paper-example/metro.config.js

@@ -1,4 +1,7 @@
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const {
+  wrapWithReanimatedMetroConfig,
+} = require('react-native-reanimated/metro-config');
 
 const path = require('path');
 
@@ -8,4 +11,6 @@ const config = {
   watchFolders: [root],
 };
 
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+module.exports = wrapWithReanimatedMetroConfig(
+  mergeConfig(getDefaultConfig(__dirname), config)
+);

apps/tvos-example/metro.config.js

@@ -1,4 +1,7 @@
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+const {
+  wrapWithReanimatedMetroConfig,
+} = require('react-native-reanimated/metro-config');
 
 const path = require('path');
 const exclusionList = require('metro-config/src/defaults/exclusionList');
@@ -29,4 +32,6 @@ const config = {
   },
 };
 
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+module.exports = wrapWithReanimatedMetroConfig(
+  mergeConfig(getDefaultConfig(__dirname), config)
+);

apps/web-example/metro.config.js

@@ -1,4 +1,7 @@
 const { getDefaultConfig } = require('expo/metro-config');
+const {
+  wrapWithReanimatedMetroConfig,
+} = require('react-native-reanimated/metro-config');
 
 const path = require('path');
 const exclusionList = require('metro-config/src/defaults/exclusionList');
@@ -27,4 +30,4 @@ config.resolver.blacklistRE = exclusionList(
   )
 );
 
-module.exports = config;
+module.exports = wrapWithReanimatedMetroConfig(config);

packages/react-native-reanimated/metro-config/index.d.ts

@@ -0,0 +1,3 @@
+import type { ConfigT } from 'metro-config';
+
+export declare function wrapWithReanimatedMetroConfig(config: ConfigT): ConfigT;

packages/react-native-reanimated/metro-config/index.js

@@ -0,0 +1,35 @@
+const COLLAPSED_STACK_REGEX = new RegExp(
+  [
+    // For internal usage in the example app
+    '/packages/react-native-reanimated/.+\\.(t|j)sx?$',
+    // When reanimated is installed as a dependency (node_modules)
+    '/node_modules/react-native-reanimated/.+\\.(t|j)sx?$',
+  ]
+    // Make patterns work with both Windows and POSIX paths.
+    .map((pathPattern) => pathPattern.replaceAll('/', '[/\\\\]'))
+    .join('|')
+);
+
+function wrapWithReanimatedMetroConfig(config) {
+  return {
+    ...config,
+    symbolicator: {
+      async customizeFrame(frame) {
+        const collapse = Boolean(
+          // Collapse the stack frame based on user's config symbolicator settings
+          (await config?.symbolicator?.customizeFrame?.(frame))?.collapse ||
+          // or, if not already collapsed, collapse the stack frame with path
+          // to react-native-reanimated source code
+          (frame.file && COLLAPSED_STACK_REGEX.test(frame.file))
+        );
+        return {
+          collapse,
+        };
+      },
+    },
+  };
+}
+
+module.exports = {
+  wrapWithReanimatedMetroConfig,
+};

packages/react-native-reanimated/package.json

@@ -50,6 +50,7 @@
     "scripts/reanimated_utils.rb",
     "mock.js",
     "plugin/index.js",
+    "metro-config",
     "plugin/build/plugin.js",
     "!**/__tests__",
     "!**/__fixtures__",

packages/react-native-reanimated/plugin/src/globals.ts

@@ -116,6 +116,7 @@ const notCapturedIdentifiers = [
 
   // Reanimated
   '_WORKLET',
+  'ReanimatedError',
 ];
 
 /**

packages/react-native-reanimated/src/errors.ts

@@ -1,6 +1,23 @@
 'use strict';
 import type { WorkletStackDetails } from './commonTypes';
 
+export interface ReanimatedError extends Error {
+  // eslint-disable-next-line @typescript-eslint/no-misused-new
+  new (message: string): ReanimatedError;
+}
+
+const ReanimatedErrorFactory: ReanimatedError = ((message: string) => {
+  'worklet';
+  const errorInstance = new Error(`[Reanimated] ${message}`);
+  errorInstance.name = 'ReanimatedError';
+  return errorInstance;
+}) as unknown as ReanimatedError;
+
+export function registerReanimatedError() {
+  'worklet';
+  global.ReanimatedError = ReanimatedErrorFactory;
+}
+
 const _workletStackDetails = new Map<number, WorkletStackDetails>();
 
 export function registerWorkletStackDetails(

packages/react-native-reanimated/src/globals.d.ts

@@ -19,6 +19,7 @@ import type { UpdatePropsManager } from './UpdateProps';
 import type { callGuardDEV } from './initializers';
 import type { WorkletRuntime } from './runtimes';
 import type { RNScreensTurboModuleType } from './screenTransition/commonTypes';
+import type { ReanimatedError } from './errors';
 
 declare global {
   var _REANIMATED_IS_REDUCED_MOTION: boolean | undefined;
@@ -112,4 +113,5 @@ declare global {
     shadowNodeWrapper: ShadowNodeWrapper,
     propName: string
   ) => string;
+  var ReanimatedError: ReanimatedError;
 }

packages/react-native-reanimated/src/initializers.ts

@@ -1,5 +1,5 @@
 'use strict';
-import { reportFatalErrorOnJS } from './errors';
+import { reportFatalErrorOnJS, registerReanimatedError } from './errors';
 import { isChromeDebugger, isJest, shouldBeUseWeb } from './PlatformChecker';
 import {
   runOnJS,
@@ -9,6 +9,8 @@ import {
 } from './threads';
 import { mockedRequestAnimationFrame } from './mockedRequestAnimationFrame';
 
+registerReanimatedError();
+
 const IS_JEST = isJest();
 const SHOULD_BE_USE_WEB = shouldBeUseWeb();
 const IS_CHROME_DEBUGGER = isChromeDebugger();

packages/react-native-reanimated/src/logger/LogBox.ts

@@ -0,0 +1,56 @@
+'use strict';
+/**
+ * Copied from:
+ * react-native/Libraries/LogBox/Data/LogBoxData.js
+ * react-native/Libraries/LogBox/Data/parseLogBoxLog.js
+ */
+
+import type { LogBoxStatic } from 'react-native';
+import { LogBox as RNLogBox } from 'react-native';
+
+export type LogLevel = 'warn' | 'error' | 'fatal' | 'syntax';
+
+type Message = {
+  content: string;
+  substitutions: { length: number; offset: number }[];
+};
+
+type Category = string;
+
+interface Location {
+  row: number;
+  column: number;
+}
+
+interface CodeFrame {
+  content: string;
+  location?: Location | null;
+  fileName: string;
+  collapse?: boolean;
+}
+
+type ComponentStack = CodeFrame[];
+
+type ComponentStackType = 'legacy' | 'stack';
+
+export type LogData = {
+  level: LogLevel;
+  message: Message;
+  category: Category;
+  componentStack: ComponentStack;
+  componentStackType: ComponentStackType | null;
+  stack?: string;
+};
+
+interface LogBoxExtended extends LogBoxStatic {
+  addLog(data: LogData): void;
+}
+
+const LogBox = RNLogBox as LogBoxExtended;
+
+const noop = () => {
+  // do nothing
+};
+
+// Do nothing when addLogBoxLog is called if LogBox is not available
+export const addLogBoxLog = LogBox?.addLog?.bind(LogBox) ?? noop;

packages/react-native-reanimated/src/logger/index.ts

@@ -0,0 +1,3 @@
+'use strict';
+export * from './logger';
+export * from './LogBox';

packages/react-native-reanimated/src/logger/logger.ts

@@ -0,0 +1,69 @@
+'use strict';
+import { addLogBoxLog } from './LogBox';
+import type { LogLevel, LogData } from './LogBox';
+
+function logToConsole(data: LogData) {
+  'worklet';
+  switch (data.level) {
+    case 'warn':
+      console.warn(data.message.content);
+      break;
+    case 'error':
+    case 'fatal':
+    case 'syntax':
+      console.error(data.message.content);
+      break;
+  }
+}
+
+function formatMessage(message: string) {
+  'worklet';
+  return `[Reanimated] ${message}`;
+}
+
+function createLog(level: LogLevel, message: string): LogData {
+  'worklet';
+  const formattedMessage = formatMessage(message);
+
+  return {
+    level,
+    message: {
+      content: formattedMessage,
+      substitutions: [],
+    },
+    category: formattedMessage,
+    componentStack: [],
+    componentStackType: null,
+    stack: new Error().stack,
+  };
+}
+
+const loggerImpl = {
+  logFunction: logToConsole,
+};
+
+export function logToLogBoxAndConsole(data: LogData) {
+  addLogBoxLog(data);
+  logToConsole(data);
+}
+
+export function replaceLoggerImplementation(
+  logFunction: (data: LogData) => void
+) {
+  loggerImpl.logFunction = logFunction;
+}
+
+export const logger = {
+  warn(message: string) {
+    'worklet';
+    loggerImpl.logFunction(createLog('warn', message));
+  },
+  error(message: string) {
+    'worklet';
+    loggerImpl.logFunction(createLog('error', message));
+  },
+  fatal(message: string) {
+    'worklet';
+    loggerImpl.logFunction(createLog('fatal', message));
+  },
+};

packages/react-native-reanimated/src/threads.ts

@@ -7,6 +7,14 @@ import {
   makeShareableCloneRecursive,
 } from './shareables';
 import { isWorkletFunction } from './commonTypes';
+import type { LogData } from './logger';
+import {
+  logger,
+  logToLogBoxAndConsole,
+  replaceLoggerImplementation,
+} from './logger';
+import { registerReanimatedError } from './errors';
+import { shareableMappingCache } from './shareableMappingCache';
 
 const IS_JEST = isJest();
 const SHOULD_BE_USE_WEB = shouldBeUseWeb();
@@ -76,12 +84,12 @@ export function runOnUI<Args extends unknown[], ReturnValue>(
 ): (...args: Args) => void {
   'worklet';
   if (__DEV__ && !SHOULD_BE_USE_WEB && _WORKLET) {
-    throw new Error(
-      '[Reanimated] `runOnUI` cannot be called on the UI runtime. Please call the function synchronously or use `queueMicrotask` or `requestAnimationFrame` instead.'
+    throw new ReanimatedError(
+      '`runOnUI` cannot be called on the UI runtime. Please call the function synchronously or use `queueMicrotask` or `requestAnimationFrame` instead.'
     );
   }
   if (__DEV__ && !SHOULD_BE_USE_WEB && !isWorkletFunction(worklet)) {
-    throw new Error('[Reanimated] `runOnUI` can only be used on worklets.');
+    throw new ReanimatedError('`runOnUI` can only be used on worklets.');
   }
   return (...args) => {
     if (IS_JEST) {
@@ -162,13 +170,13 @@ export function runOnUIImmediately<Args extends unknown[], ReturnValue>(
 ): (...args: Args) => void {
   'worklet';
   if (__DEV__ && !SHOULD_BE_USE_WEB && _WORKLET) {
-    throw new Error(
-      '[Reanimated] `runOnUIImmediately` cannot be called on the UI runtime. Please call the function synchronously or use `queueMicrotask` or `requestAnimationFrame` instead.'
+    throw new ReanimatedError(
+      '`runOnUIImmediately` cannot be called on the UI runtime. Please call the function synchronously or use `queueMicrotask` or `requestAnimationFrame` instead.'
     );
   }
   if (__DEV__ && !SHOULD_BE_USE_WEB && !isWorkletFunction(worklet)) {
-    throw new Error(
-      '[Reanimated] `runOnUIImmediately` can only be used on worklets.'
+    throw new ReanimatedError(
+      '`runOnUIImmediately` can only be used on worklets.'
     );
   }
   return (...args) => {
@@ -255,3 +263,17 @@ export function runOnJS<Args extends unknown[], ReturnValue>(
     );
   };
 }
+
+// Override the logFunction implementation with the one that adds logs
+// with better stack traces to the LogBox (need to override it after runOnJS
+// is defined).
+replaceLoggerImplementation((data: LogData) => {
+  'worklet';
+  runOnJS(logToLogBoxAndConsole)(data);
+});
+shareableMappingCache.set(logger, makeShareableCloneRecursive(logger));
+
+// Register ReanimatedError in the UI global scope
+if (!shouldBeUseWeb()) {
+  executeOnUIRuntimeSync(registerReanimatedError)();
+}