diff --git a/docs/react-native/features/index.md b/docs/react-native/features/index.md index bfc2b979..06806343 100644 --- a/docs/react-native/features/index.md +++ b/docs/react-native/features/index.md @@ -14,4 +14,5 @@ how your application is performing in production. 3. [**Traces.**](/react-native/features/traces/) Gain visibility into app operations to help debug the root cause of your mobile app's performance issues. 4. [**Current Device ID API.**](/react-native/features/current-device-id-api) This API lets you know what the current Session ID is in case you need to track it separately. 5. [**Current Session ID API.**](/react-native/features/current-session-id-api) This API lets you know what the current Embrace ID is in case you need to track it separately. -6. [**Last Run End State.**](/react-native/features/last-run-end-state) This API lets you know if the previous app instance ended in a crash. \ No newline at end of file +6. [**Last Run End State.**](/react-native/features/last-run-end-state) This API lets you know if the previous app instance ended in a crash. +7. [**Tracking Render Errors.**](/react-native/features/tracking-render-errors) Automatic logging of React Native rendering errors. \ No newline at end of file diff --git a/docs/react-native/features/tracking-render-errors.md b/docs/react-native/features/tracking-render-errors.md new file mode 100644 index 00000000..2ec08da6 --- /dev/null +++ b/docs/react-native/features/tracking-render-errors.md @@ -0,0 +1,70 @@ +--- +title: Tracking Render Errors +description: Ensure meaningful screen names in render errors by configuring Metro bundler. +sidebar_position: 7 +--- + +# Tracking Render Errors + +If the Embrace SDK detects a component stack trace in a React Native rendering error it will log it automatically. The +resulting log will have a stack trace similar to: + +```text + * in Screen2 + * in RCTView + * in Screen1 + * in AppContainer + ``` + +In release builds you may see some "Unknown" entries for view names that could not be retrieved: + +```text + * in Unknown + * in RCTView + * in Unknown + * in AppContainer +``` + +## Preserving screen names + +Making sure components have their `displayName` should help, in addition it is possible to modify your `metro.config.js` +to include the following: + +```javascript +const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); + +const config = { + transformer: { + minifierConfig: { + keep_classnames: true, + keep_fnames: true, + mangle: { + keep_classnames: true, + keep_fnames: true, + }, + }, + }, +}; + +module.exports = mergeConfig(getDefaultConfig(__dirname), config); +``` + +- **`keep_classnames: true` and `keep_fnames: true`**: These options ensure that class names and function names are +preserved during the minification process. +- **`mangle`**: Prevents the renaming of class and function names. + +Though note that these settings will likely increase your bundle size. If you apply these then we strongly recommend +testing your project to confirm that any added bundle size due to this configuration is acceptable. +To analyze the bundle size, run the following command: + +```bash +npx react-native bundle \ + --platform \ + --dev false \ + --entry-file index.js \ + --bundle-output ./output/main.bundle.js \ + --assets-dest ./output +``` + +Replace `` with either `android` or `ios`. This command generates the bundle and assets, allowing you to +compare the size with and without the Metro configuration. \ No newline at end of file