gotchatypescriptreact-nativeModerate

Hermes Engine: Enabling and Debugging with Source Maps

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

React Native 0.70+ (Hermes default on both platforms)

hermesJSCJavaScript enginesource mapscrash symbolicationstartup timebytecode

Problem

Hermes is the default JS engine for React Native but stack traces in production crashes show minified/compiled code, making debugging almost impossible without proper source map setup.

Solution

Hermes is enabled by default in RN 0.64+ on Android and 0.64+ on iOS (opt-in), and 0.70+ on iOS (default). For crash symbolication, upload source maps to your crash reporting tool (Sentry, Crashlytics). Use npx react-native bundle to generate source maps and configure EAS Build to upload them automatically.

Why

Hermes compiles JS to bytecode at build time, improving startup performance significantly (TTI reduction of 30-50% on Android). The tradeoff is that on-device stack traces reference bytecode offsets unless source maps are applied.

Gotchas

JavaScriptCore (JSC) is still used in some Expo SDK versions — verify with global.HermesInternal !== null
Hermes does not support all ES2022+ features — check compatibility before using cutting-edge syntax
The Hermes debugger protocol differs from V8; use Flipper or the experimental Chrome DevTools integration
Source maps for Hermes require the .hbc bundle format, not the standard .js bundle

Code Snippets

Detect Hermes runtime

// Check if Hermes is active at runtime
const isHermes = () => !!global.HermesInternal;
console.log('Running on Hermes:', isHermes());

Revisions (0)

No revisions yet.