RangeError: Maximum call stack size exceeded for dropdown with 200 items

General
1

Repo: GitHub - collegewap/jsonforms-react-seed at issue-3

When I add 200 items to the dropdown it breaks with the error: RangeError: Maximum call stack size exceeded

image
image737×232 8.54 KB

Please provide a solution for this.

2

The example works fine for me. Can you elaborate when and how the error is thrown for you?

many-enum-items

3

I have a similar issue, but I have 2000+ options in a custom dropdown with a search.

RangeError: Maximum call stack size exceeded.

This error is located at:
    in JsonFormsStateProvider (created by JsonForms)
    in JsonForms
    in Unknown (created by Formik)
4

Hi @adanielyan, thanks for the notice.

Can you provide more details?

  • Which version and renderers of JSON Forms are you using?
  • It seems a custom renderer is involved. Does the issue also occur with an off-the-shelf renderer set?
  • Can you determine which repeated nested calls lead to the stack size exceeding?
5

Thank you for a quick response.

Yes, we use a custom renderer that renders interdependent dropdowns (e.g. Country → State → City). This is all implemented in React Native with custom renderers for all types of fields we use. When Json schema is simple everything renders correctly, even with a ~800 options in a dropdown. But having 2000+ options crashes the app.

It seems the code in the renderer doesn’t even have a chance to run as the app crashes before it gets to the renderer.

6

Can you please advise what part of the Json Form’s code I should look into to find the potential cause of this problem? It seems there may be some recursive function or something that overflows the stack.

7

Hi @adanielyan,

I can’t give much indication as I’m unable to reproduce the problem and there are not many details provided here. For example when exactly does the crash occur? e.g. during first rendering, while opening the drop down, etc.

Are you able to pause the JS thread before the crash to check how it looks like? This should give further hints.

I’m not sure where this is cut off. If the error actually occurs during rendering, then you should make sure to not accidentally trigger an endless rendering loop by handing over only stable/memoized props to JSON Forms.

For example if you hand over a new schema object or data object to JsonForms on every render pass, then JSON Forms will notice that new data and/or schema was handed over and trigger a validation round, emitting an update with the validation result. If based on this update, you modify a state and therefore trigger a rerender of the component containing JsonForms and again hand over a new schema or data object, then you are in an endless loop.

8

Hi @adanielyan, @collegewap,

It seems the error comes from the validation framework Ajv we are using, see this open issue (ajv-validator/ajv#1705).

There’s not much we can do about that except for waiting for a fix. However there are some workarounds you can use:

  • Restructure your schema to not use so many oneOf. Instead use enum. If you used the oneOf constructs to render different labels for your enums, you can use the JSON Forms i18n support instead to deliver alternative labels for the enums. Or,
  • Turn off validation within JSON Forms by handing over validationMode="NoValidation". Then whenever you receive a data event from JSON Forms, you can validate it yourself outside. You can also use AJV for this. Once validated, you hand over the determined errors via the additionalErrors prop back to JsonForms. The clue: You validate with a modified schema in which you removed the oneOf construct. You will lose the validation for that specific part, but all the remaining validations will work as before.

I hope this helps. Let me know if you have questions.

9

Thank you for looking into this. The problem was indeed related to use of oneOf. Switching to enum fixed it.

10

Hi Stefan,

Do you have fix planned for this issue, we too are facing issue while using oneOf for dropdown having 200+ items, issue is only observed in Edge browser. Using enum workaround fixes issue but if we can get it working with oneOf then it will be better.

11

Hi @abhi_rathore,

No we don’t plan to fix this issue as the error is not directly on our side but originates from the validation library AJV which we are using. Once the issue is fixed there, it will also be fixed in JSON Forms.

Please have a look at my previous post above in which two different approaches are presented to work around the issue. One of the approaches modifies the JSON Schema, the other one shows how to instrument AJV so that the error is avoided without modifying the JSON Schema.