Crash if not in debug on android and iOS

Question

Environment

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
      Memory: 133.91 MB / 16.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.11.2 - ~/.nvm/versions/node/v8.11.2/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 5.6.0 - ~/.nvm/versions/node/v8.11.2/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 17, 21, 23, 25, 26, 27
        Build Tools: 23.0.1, 23.0.3, 24.0.1, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.1, 27.0.3, 28.0.2, 28.0.3
        System Images: android-25 | Google APIs Intel x86 Atom_64
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3
      react-native: 0.57.8 => 0.57.8

Description

When I am in debug, the app just gives me a red screen of error

package.json

{
  "name": "xxx",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "lodash": "^4.17.11",
    "react": "16.6.3",
    "react-native": "0.57.8",
    "react-native-file-selector": "^0.0.6",
    "react-native-firebase": "^5.2.0",
    "react-native-fs": "^2.13.3",
    "react-native-languages": "^3.0.2",
    "react-native-tts": "^2.0.0",
    "react-native-vector-icons": "^6.1.0",
    "react-navigation": "2.18.2"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3"
  },
  "jest": {
    "preset": "react-native"
  },
  "rnpm": {
    "assets": [
      "./resources/fonts/"
    ]
  }
}

Error (firebase crash report)

Caused by com.facebook.jni.CppException
Invalid regular expression: unrecognized character after (? (index.android.bundle:462)
com.facebook.react.bridge.queue.NativeRunnable.run

Output (on simulator)

screenshot_1547894429

Simulator info

screenshot_1547894475

Phone info

Nexus 5X - 8.1.0 (same error)
One Plus One (same error)
1. react-native run-ios

Output

Debug not activated simulator screen shot - iphone x - 2019-01-19 at 11 49 11

Debug activated simulator screen shot - iphone x - 2019-01-19 at 11 49 23

Thanks for reading

Can I get more info, please? What actions did you do before this started happening? Any relevant code? It seems that these errors can be related to a few different things so I'd like more info. — Michael Ostrovsky, Jan 20 '19 at 09:59
It looks like you are using a regular expression somewhere in your code and have passed it an invalid character. Are you using the `.replace` in your code? — Andrew, Jan 20 '19 at 10:04
I am using some .replace indeed and don't remember when it started to be honest. But the error seems to be with react more than my code (I thought) cause I commented the only place in my code where I was splitting using `?` and the bug is still there @MichaelOst I coudln't find anything about this error anywhere :s tell me more — Clad Clad, Jan 20 '19 at 10:11
Okay thanks for your help I was thinking wrongly that is was due to react but it was just my mistake it seems don't know yet why but I could locate the page in fault — Clad Clad, Jan 20 '19 at 10:15
I mean the most concrete advice is as @Andrew here mentioned it seems you either have a regex somewhere or a js function that uses regex so need to find that and comment that out, try to check on git what changes you made lately if you're working with that. — Michael Ostrovsky, Jan 20 '19 at 10:19
You were absolutely right though don't know why but I could now thanks to you two @Andrew @Michael Ost found that the negative lookbehind that I was using it causing this issue. `/(?<!\.|\n)\n/g;` and `.split(/\.|(?<!\.)\n/);` seems to kill the app :/ any guess why ? — Clad Clad, Jan 20 '19 at 10:21
@CladClad what are you trying to match/not match on? can you give an example — Andrew, Jan 20 '19 at 10:31
@Andrew the first one was trying to beautify a big text that can sometimes have a \n in the text for no reason and the second to split my text in sentence — Clad Clad, Jan 20 '19 at 10:35

score 2 · Accepted Answer · answered Jan 20 '19 at 10:34

2

Search your code for .replace and fix the regular expression that is causing you the issue.

Unfortunately these involve negative lookbehinds and javascript does not support them

/(?<!\.|\n)\n/g; and .split(/\.|(?<!\.)\n/);

answered Jan 20 '19 at 10:34

Andrew

26,706
9
85
101

any equivalent for them ? :s – Clad Clad Jan 20 '19 at 10:45
Though they are not in ES6 but have been approved for the 2018 specification. https://stackoverflow.com/a/11347100/5508175 has some interesting thoughts – Andrew Jan 20 '19 at 10:58
I will take a look though still strange to me that react can use them perfectly in debug mode :D – Clad Clad Jan 20 '19 at 11:10
It isn't strange, because the javascript is being run through the Chrome browser which supports negative look behinds. When you run it with the debugger detached it is being processed on the device, which may/may not support certain javascript features. – Andrew Jan 20 '19 at 11:14
Thanks for your explanation it makes sense now ;) I could reproduce the behavior I wanted with other regex so now everything is fine. – Clad Clad Jan 20 '19 at 12:45

score 0 · Answer 2 · answered Jan 20 '19 at 10:32

After some research on my code and thanks to the comments (@Andrew and @Michael Ost thanks you a lot) I could reduce the problem to one page in particular and indeed to the use of regex negative lookbehind / lookahead that are not supported in javascript.

See the following : Error using both lookahead and look behind regex

Thanks a lot for your help