Bug Description

In react native when you log a large error to console.error and logbox attempts to parse it if the message is very large then the following regex throws an exception.

from node_modules/react-native/Libraries/LogBox/Data/parseLogBoxLog.js line 251

const BABEL_CODE_FRAME_ERROR_FORMAT = /^(?:TransformError )?(?:.*):? (?:.*?)(\/.*): ([\s\S]+?)\n([ >]{2}[\d\s]+ \|[\s\S]+|\u{001b}[\s\S]+)/u;

...
const babelCodeFrameError = message.match(BABEL_CODE_FRAME_ERROR_FORMAT);

Initially I thought it was a react native bug, however I've tried this when turning off hermes and using jsc and it doesn't have any issues parsing the log.

This starting happening when we recently swapped to hermes on a project where sometimes we get large error messages that return a long graphql query and request body + stack trace. My workaround for now is to just truncate any messages or use a regular log message.

I believe this issue is probably related also facebook/react-native#29402

• I have run gradle clean and confirmed this bug does not occur with JSC

Hermes version: the one that comes with rn 0.65.1 which I believe is 0.81
React Native version (if any): 0.65.1
OS version (if any): MacOS 10.15.6
Platform (most likely one of arm64-v8a, armeabi-v7a, x86, x86_64): x86_64

code is running on a simulator/emulator happening on both android and ios

I'm really trying to use the ndk stack tool but I don't understand the steps in the docs, I'm not able to find my abi and I'm not sure where to look or what that is 😅. I can add some of the adb log in the comments.

Steps To Reproduce

I have created a minimal repro here https://github.com/dannyhw/hermes-regex-repro

The project was created using npx react-native init repro --template react-native-template-typescript

Then I enabled hermes by following the react native docs and I added some simple code to call console.error

1. clone the repro https://github.com/dannyhw/hermes-regex-repro
2. yarn install, pod install, gradle clean etc
3. yarn ios or yarn android
4. when loading app.tsx it will attempt to log and display the logbox and parse the message which causes the exception in the screenshot

code example:
This is the main code in the repro

import {Text} from 'react-native';
import React from 'react';

const MESSAGE_REPEAT_AMOUNT = 1000;

const MESSAGE_TO_REPEAT = `Labore ad cupidatat dolor dolor officia consectetur voluptate veniam aute nisi fugiat pariatur. Tempor culpa quis non duis cillum. Aliquip enim consectetur commodo occaecat commodo id deserunt exercitation magna dolor elit in duis culpa. Esse aliqua excepteur ipsum non non occaecat voluptate et consequat veniam aliquip qui ipsum.`;
const LONG_MESSAGE = MESSAGE_TO_REPEAT.repeat(MESSAGE_REPEAT_AMOUNT);

export default () => {
  // @ts-ignore (hermes internal global variable not in global type)
  const isHermes = !!global.HermesInternal;
  console.error(LONG_MESSAGE);
  return (
    <Text style={{marginTop: 80}}>is it hermes? {isHermes ? 'yes' : 'no'}</Text>
  );
};

The Expected Behavior

The regex should not fail or maybe fail gracefully somehow?

I'm happy to help but I'm not familiar with the codebase so would need guidance.