Description
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 raised the issue in the hermes repo facebook/hermes#581 and it was suggested to raise it here instead since the regex is seemingly slow and might need some changes.
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 (not console.error or warn).
React Native version:
Run react-native info in your terminal and copy the results here.
System:
OS: macOS 10.15.6
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Memory: 253.65 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.17.0 - /usr/local/opt/node@14/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 6.14.13 - /usr/local/opt/node@14/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.1 - /Users/williamsd2/.rvm/gems/ruby-2.7.0/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
Android SDK: Not Found
IDEs:
Android Studio: 4.2 AI-202.7660.26.42.7351085
Xcode: 12.4/12D4e - /usr/bin/xcodebuild
Languages:
Java: 15.0.2 - /usr/local/opt/openjdk/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.65.1 => 0.65.1
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found
Steps To Reproduce
I made a minimal repro here https://github.com/dannyhw/hermes-regex-repro
To recreate that you could do the following
npx react-native init repro --template react-native-template-typescript- follow react native docs to enable hermes
- add the code from the code example below into app.tsx (replace existing code)
- run the app
code example:
This is the main code in the repro mentioned
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>
);
};
Expected Results
Large messages should not crash the app when parsed by logbox.
I think that the regex could maybe be split up to parts to for example not run the regex if the log doesn't contain the initial "TransformError" string at all.
I could work on it if that would be helpful however I would need guidance.
Snack, code example, screenshot, or link to a repository:
I have created a minimal repro here https://github.com/dannyhw/hermes-regex-repro
- clone the repro https://github.com/dannyhw/hermes-regex-repro
- yarn install, pod install, gradle clean etc
- yarn ios or yarn android
- when loading app.tsx it will attempt to log and display the logbox and parse the message which causes the exception in the screenshot