RangeError: Maximum regex stack depth reached

[iagormoraes]

Description

Hello there, I received an error in production with the error of RangeError: Maximum regex stack depth reached and I wanted to know what is the possible reasons that throw this range error as I checked the code from the call and I don't see any regex usages. Maybe the regex are not being recycled?

Stacktrace

Follow stack trace of production, sorry but Sentry was not applying the source maps to RN 62 for the moment:

RangeError: Maximum regex stack depth reached
  at test(app:///native)
  at anonymous(app:///index.android.bundle:1:1961518)
  at anonymous(app:///index.android.bundle:1:1821552)
  at find(app:///native)
  at anonymous(app:///index.android.bundle:1:1821489)
  at value(app:///index.android.bundle:1:1817528)
  at Ba(app:///index.android.bundle:1:197310)
  at anonymous(app:///index.android.bundle:1:286362)
  at un(app:///index.android.bundle:1:164135)
  at Qa(app:///index.android.bundle:1:195963)
  at Ia(app:///index.android.bundle:1:190606)
  at anonymous(app:///index.android.bundle:1:164544)
  at anonymous(app:///index.android.bundle:1:286362)
  at un(app:///index.android.bundle:1:164135)
  at dn(app:///index.android.bundle:1:164397)
  at fn(app:///index.android.bundle:1:164291)
  at Pe(app:///index.android.bundle:1:210309)
  at Re(app:///index.android.bundle:1:158454)
  at Ie(app:///index.android.bundle:1:158801)
  at receiveEvent(app:///index.android.bundle:1:204317)
  at apply(app:///native)
  at value(app:///index.android.bundle:1:116687)
  at anonymous(app:///index.android.bundle:1:115217)
  at value(app:///index.android.bundle:1:116284)
  at value(app:///index.android.bundle:1:115175)

Checking the bundle we can find that Me is has registerEvent function return value.

var ze="function"==typeof Symbol&&Symbol.for,Me=receiveEvent(app:///index.android.bundle:1:204317)ze?Symbol.for("react.element"):60103,Ae=ze?Symbol.for("react.portal"):60106,De=ze?Symbol.for("react.fragment"):60107,Fe=ze?Symbol.for("react.strict_mode"):60108,Oe=ze?Symbol.for("react.profiler"):60114,We=ze?Symbol.for("react.provider"):60109,je=ze?Symbol.for("react.context"):60110,He=ze?Symbol.for("react.concurrent_mode"):60111,Le=ze?Symbol.for("react.forward_ref"):60112,Qe=ze?Symbol.for("react.suspense"):60113,Be=ze?Symbol.for("react.suspense_list"):60120,Ve=ze?Symbol.for("react.memo"):60115,Ye=ze?Symbol.for("react.lazy"):60116;ze&&Symbol.for("react.fundamental"),ze&&Symbol.for("react.responder"),ze&&Symbol.for("react.scope");

Checking the IE call in stack trace I found:

function Ie(e,t,n){var r,i=n||Ne,a=xe(e);r=i.target,Re(function(){for(var e=r,n=null,l=0;l<m.length;l++){var o=m[l];o&&(o=o.extractEvents(t,a,i,e,1))&&(n=I(n,o))}if(null!==(e=n)&&(z=I(z,e)),e=z,z=null,e){if(U(e,M),z)throw Error("processEventQueue(): Additional events were enqueued while processing an event queue. Support for this has not yet been implemented.");if(E)throw e=x,E=!1,x=null,e}})}u.RCTEventEmitter.register({receiveEvent:function(e,t,n){Ie(e,t,n)},receiveTouches:function(e,t,n){if("topTouchEnd"===e||"topTouchCancel"===e){for(var r=[],i=0;i<n.length;i++){var a=n[i];r.push(t[a]),t[a]=null}for(i=n=0;i<t.length;i++)null!==(a=t[i])&&(t[n++]=a);t.length=n}else for(r=[],i=0;i<n.length;i++)r.push(t[n[i]]);for(n=0;n<r.length;n++){(i=r[n]).changedTouches=r,i.touches=t,a=null;var l=i.target;null===l||void 0===l||1>l||(a=l),Ie(a,e,i)}}})

and inside it we can see that there is an issue on processEventQueue "processEventQueue(): Additional events were enqueued while processing an event queue. Support for this has not yet been implemented."

Going further I found Ia

function Ia(e){var t=e.lastExpiredTime;if(t=0!==t?t:1073741823,e.finishedExpirationTime===t)Qa(e);else{if((48&ea)!==Bi)throw Error("Should not already be working.");if(Ya(),e===ta&&t===ra||za(e,t),null!==na){var n=ea;ea|=Yi;for(var r=Aa();;)try{Oa();break}catch(t){Ma(e,t)}if(En(),ea=n,Li.current=r,ia===$i)throw n=aa,za(e,t),dl(e,t),Ra(e),n;if(null!==na)throw Error("Cannot commit an incomplete root. This error is likely caused by a bug in React. Please file an issue.");e.finishedWork=e.current.alternate,e.finishedExpirationTime=t,ta=null,Qa(e),Ra(e)}}return null}

And then I found Qa and Ba

function Qa(e){var t=ln();return un(99,Ba.bind(null,e,t)),null}

Going from the path that can be the issue of registerEvent, in a RecyclerView I use a onClickListener for each item that is like:

        movementButton.setOnClickListener {
            // as there will be header in the list, probably it will show the position + 1 of relative to the header
            movementListViewInstance.onClickMovement(movementItem.id, layoutPosition)
        }

and inside the onClickMovement I have:

    fun onClickMovement(id: String, index: Int) {
        val event = Arguments.createMap()
        val correctIndex : Int = movementListManager.cachedMovementList.indexOfFirst { it.id == id }

        event.putString("id", id)
        event.putInt("listIndex", index)
        event.putInt("index", correctIndex)

        reactContext.getJSModule(RCTEventEmitter::class.java).receiveEvent(getId(), "topMovementPress", event)
    }

[mhorowitz]

Thanks for your report.

The only place in the source code where this exception is thrown is in RegExp code.

Can you send us more information about the failure? A screen shot of a RN red box showing the exception and a snippet of code around where the error is being thrown would be best. This will help us understand what's happening.

Thanks!

[iagormoraes]

Thanks for your report.

The only place in the source code where this exception is thrown is in RegExp code.

Can you send us more information about the failure? A screen shot of a RN red box showing the exception and a snippet of code around where the error is being thrown would be best. This will help us understand what's happening.

Thanks!

I've updated the description, hope it can be helpful.

[mhorowitz]

Thanks for digging into this. Unfortunately, the code you've added doesn't include any usage of regexps, so we still don't have much to go on.

There are some instructions in #276 (comment) which explain how to manually symbolicate a hermes stack. The stack from sentry is not in the same format as Hermes emits it, so you may need to manually reformat it to look like the earlier comment in that issue.

https://docs.sentry.io/platforms/react-native/hermes/ gives some documentation on using Sentry with Hermes. We have no experience with Sentry so we can't provide more guidance there.

[iagormoraes]

Thanks for digging into this. Unfortunately, the code you've added doesn't include any usage of regexps, so we still don't have much to go on.

There are some instructions in #276 (comment) which explain how to manually symbolicate a hermes stack. The stack from sentry is not in the same format as Hermes emits it, so you may need to manually reformat it to look like the earlier comment in that issue.

https://docs.sentry.io/platforms/react-native/hermes/ gives some documentation on using Sentry with Hermes. We have no experience with Sentry so we can't provide more guidance there.

@mhorowitz thanks for the reply, I tried the command but the result was still minified:

RangeError: Maximum regex stack depth reached
  at test(app:///native)
  at anonymous(null:null:null)
  at anonymous(null:null:null)
  at find(app:///native)
  at anonymous(null:null:null)
  at value(null:null:null)
  at Ba(null:null:null)
  at anonymous(null:null:null)
  at un(null:null:null)
  at Qa(null:null:null)
  at Ia(null:null:null)
  at anonymous(null:null:null)
  at anonymous(null:null:null)
  at un(null:null:null)
  at dn(null:null:null)
  at fn(null:null:null)
  at Pe(null:null:null)
  at Re(null:null:null)
  at Ie(null:null:null)
  at receiveEvent(null:null:null)
  at apply(app:///native)
  at value(null:null:null)
  at anonymous(null:null:null)
  at value(null:null:null)
  at value(null:null:null)

Do I have to have the bundle file at the same folder as the map file?

[mhorowitz]

Do I have to have the bundle file at the same folder as the map file?

I don't think so. Did you reformat the input file? Can you paste the input you used with metro-symbolicate?

[iagormoraes]

Do I have to have the bundle file at the same folder as the map file?

I don't think so. Did you reformat the input file? Can you paste the input you used with metro-symbolicate?

Apparently I was using the packager.map instead of the merged .map file, with hermes enabled I got it working with:

    hermesFlagsRelease: ["-w", "-O", "-output-source-map"], // remove hermes build warnings,
    hermesFlagsDebug: ["-w", "-O", "-output-source-map"], // remove hermes build warnings,

[Md-Mudassir47]

Do I have to have the bundle file at the same folder as the map file?

I don't think so. Did you reformat the input file? Can you paste the input you used with metro-symbolicate?

Apparently I was using the packager.map instead of the merged .map file, with hermes enabled I got it working with:

    hermesFlagsRelease: ["-w", "-O", "-output-source-map"], // remove hermes build warnings,
    hermesFlagsDebug: ["-w", "-O", "-output-source-map"], // remove hermes build warnings,

is this the fix? I'm also facing the same issue

[chenop]

Hi got the same exception.

RN 0.63 crashlytics shows an exception (see below) - manage to de-obfuscate it.
it points to:

    const VALID_EMAIL_REGEX = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

    export const isPaymentMethodValueValid = value => {
        return value === "" || VALID_EMAIL_REGEX.test(value);
    };

The Exception:

    Fatal Exception: com.facebook.react.common.JavascriptException: RangeError: Maximum regex stack depth reached, js engine: hermes, stack:
    /Users/chen.oppenhaim/dev/toluna-mobile-app/mobile-apps/packages/core/modules/paymentMethods/utils.js:4:isPaymentMethodValueValid
    /Users/chen.oppenhaim/dev/toluna-mobile-app/mobile-apps/packages/core/common/components/PaymentMethods/PaymentMethods.js:55:onValueChange
    /Users/chen.oppenhaim/dev/toluna-mobile-app/mobile-apps/packages/core/common/components/PersonalDetails/components/EditItem.js:28:controlProps.onChange
    /Users/chen.oppenhaim/dev/toluna-mobile-app/mobile-apps/node_modules/react-native/Libraries/Components/TextInput/TextInput.js:1006:_onChange
    /Users/chen.oppenhaim/dev/toluna-mobile-app/mobile-apps/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:32:invokeGuardedCallbackImpl
    /Users/chen.oppenhaim/dev/toluna-mobile-app/mobile-apps/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:50:invokeGuardedCallback
    /Users/chen.oppenhaim/dev/toluna-mobile-app/mobile-apps/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:63:invokeGuardedCallbackAndCatchFirstError
    /Users/chen.oppenhaim/dev/toluna-mobile-app/mobile-apps/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:82:executeDispatch
    /Users/chen.oppenhaim/dev/toluna-mobile-app/mobile-apps/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:976:executeDispatchesAndReleaseTopLevel
    /Users/chen.oppenhaim/dev/toluna-mobile-app/mobile-apps/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:155:forEachAccumulated
    /Users/chen.oppenhaim/dev/toluna-mobile-app/mobile-apps/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1007:batchedUpdates$argument_0
    /Users/chen.oppenhaim/dev/toluna-mobile-app/mobile-apps/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:7566:batchedUpdatesImpl
    /Users/chen.oppenhaim/dev/toluna-mobile-app/mobile-apps/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:957:batchedUpdates
    /Users/chen.oppenhaim/dev/toluna-mobile-app/mobile-apps/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:988:_receiveRootNodeIDEvent
    /Users/chen.oppenhaim/dev/toluna-mobile-app/mobile-apps/node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-prod.js:1022:ReactNativePrivateInterface.RCTEventEmitter.register$argument_0.receiveEvent
    /Users/chen.oppenhaim/dev/toluna-mobile-app/mobile-apps/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:416:__callFunction
    /Users/chen.oppenhaim/dev/toluna-mobile-app/mobile-apps/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:109:__guard$argument_0
    /Users/chen.oppenhaim/dev/toluna-mobile-app/mobile-apps/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:__guard
    /Users/chen.oppenhaim/dev/toluna-mobile-app/mobile-apps/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:108:callFunctionReturnFlushedQueue

    at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:83)
    at java.lang.reflect.Method.invoke(Method.java)
    at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
    at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:151)
    at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
    at android.os.Handler.handleCallback(Handler.java:938)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
    at android.os.Looper.loop(Looper.java:257)
    at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
    at java.lang.Thread.run(Thread.java:923)

[akhil-x1]

Same issue with react native version 70.6 on calling below function.
Working well after disabling hermes.

Happens on both ios & android.

const validURL = (str) => {
  const pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
      '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
      '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
      '(\\#[-a-z\\d_]*)?$',
    'i'
  ); // fragment locator
  return Boolean(pattern.test(str));
};

[fobin]

I have the same issue. Only thing it only happens sometimes and I cannot reproduce it all the time.

Hermes. React Native 0.70.7.

const emailRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w\w+)+$/;

const hasInvalidEmailError = (email: string = ''): boolean => {
  if (typeof email !== 'string' || email.length === 0) {
    return false;
  }

  return !emailRegex.test(email);
};

[cristea2017]

I got this issue from sentry(email validation) : RangeError: Maximum regex stack depth reached

Steps to fix: change regex from :
/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w+)+$/;

to : /^[\w-.]+@([\w-]+.)+[\w-]{2,4}$/

[tmikov]

@neildhar what do you think?

[neildhar]

This RegExp is unfortunately subject to catastrophic backtracking, and that is what is happening here (although our error message could be more descriptive).

For instance, on the following input, we end up hitting the internal backtrack limit and failing:

/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w+)+$/.exec("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");

Notably, V8 also takes a long time on this input (although it does eventually produce a result). JSC performs much better, but I haven't looked into why.

Closing this again since this is by design.

[DeepakSharma04]

/^[\w-.]+@([\w-]+.)+[\w-]{2,4}$/

It's not validate the format of email but error is gone any other solution.

[appsgenie]

getting the same as the regex @chenop has
started to happen only after switching to using hermes
any idea what this means?
"react-native": "0.72.10"