Apache Superset Frontend error when setting metadata parameters on a database

There is unusual frontend behaviour when trying to edit the metadata parameters for a database: e.g. if I type {} it clears all text from the field. If I type well-formed JSON e.g. {"foo": "bar"} it errors out and blanks the screen the moment I type the final }.

How to reproduce the bug

1. Go to database connections
2. Add or edit a database
3. Go to "Other"
4. Try to add any config

Expected results

Form should work, data should be saveable

Actual results

An error takes over the screen as soon as any valid JSON is typed, or in the case of an empty object {}, it blanks the field instead.

Screenshots

Environment

(please complete the following information):

• browser type and version: Firefox 107.0
• superset version: master
• python version: 3.9.18
• node.js version: v16.19.1
• any feature flags active:

Checklist

Make sure to follow these steps before submitting your issue - thank you!

• [x] I have checked the superset logs for python stacktraces and included it here as text if there are any.
• [x] I have reproduced the issue with at least the latest released version of superset.
• [x] I have checked the issue tracker for the same issue and I haven't found one similar.

Additional context

Full stack trace of the error:

Unexpected error: TypeError: text.match is not a function



    in ReactAce (created by ForwardRef(ExtendedAceEditor))
    in ForwardRef(ExtendedAceEditor) (created by ForwardRef(AsyncComponent))
    in ForwardRef(AsyncComponent) (created by Styled(Component))
    in Styled(Component) (created by ExtraOptions)
    in div (created by ExtraOptions)
    in div (created by Styled(div))
    in Styled(div) (created by ExtraOptions)
    in div (created by PanelContent)
    in div (created by PanelContent)
    in PanelContent (created by CSSMotion)
    in DomWrapper (created by CSSMotion)
    in CSSMotion (created by CollapsePanel)
    in div (created by CollapsePanel)
    in CollapsePanel (created by CollapsePanel)
    in CollapsePanel (created by ExtraOptions)
    in div (created by Collapse)
    in Collapse (created by Collapse)
    in Collapse
    in Unknown (created by Styled(Component))
    in Styled(Component) (created by EmotionCssPropInternal)
    in EmotionCssPropInternal (created by ExtraOptions)
    in ExtraOptions (created by DatabaseModal)
    in div (created by TabPane)
    in TabPane (created by Styled(TabPane))
    in Styled(TabPane) (created by DatabaseModal)
    in div (created by TabPanelList)
    in div (created by TabPanelList)
    in TabPanelList (created by ForwardRef(Tabs))
    in div (created by ForwardRef(Tabs))
    in ForwardRef(Tabs) (created by Tabs)
    in Tabs (created by EmotionCssPropInternal)
    in EmotionCssPropInternal (created by StyledTabs)
    in StyledTabs (created by Styled(StyledTabs))
    in Styled(StyledTabs) (created by DatabaseModal)
    in div (created by Content)
    in div (created by Content)
    in Unknown
    in Unknown (created by CSSMotion)
    in div (created by CSSMotion)
    in DomWrapper (created by CSSMotion)
    in CSSMotion (created by Content)
    in Content (created by Dialog)
    in div (created by Dialog)
    in div (created by Dialog)
    in Dialog (created by PortalWrapper)
    in ForwardRef (created by PortalWrapper)
    in PortalWrapper (created by Dialog)
    in Dialog (created by Modal)
    in Modal (created by BaseModal)
    in BaseModal (created by Styled(BaseModal))
    in Styled(BaseModal) (created by Modal)
    in Modal (created by EmotionCssPropInternal)
    in EmotionCssPropInternal (created by DatabaseModal)
    in DatabaseModal (created by Connect(DatabaseModal))
    in Connect(DatabaseModal) (created by DatabaseList)
    in DatabaseList (created by Connect(DatabaseList))
    in Connect(DatabaseList) (created by App)
    in ErrorBoundary (created by App)
    in Suspense (created by App)
    in Route (created by App)
    in Switch (created by App)
    in LocationProvider (created by Context.Consumer)
    in Route (created by QueryParamProvider)
    in QueryParamProvider (created by RootContextProviders)
    in DynamicPluginProvider (created by RootContextProviders)
    in EmbeddedUiConfigProvider (created by RootContextProviders)
    in FlashProvider (created by RootContextProviders)
    in Unknown (created by RootContextProviders)
    in Provider (created by RootContextProviders)
    in ThemeProvider (created by RootContextProviders)
    in RootContextProviders (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
    in App

Comment From: foreground-voice

are there any suggestions to solve it?

Comment From: giftig

The error stack trace should be a good starting point but I didn't get much chance to do any analysis of what the bug is here. If you're looking for a workaround you could just update the record in the database via SQL or via the flask shell, but the metadata textarea will continue to break the page as soon as it loads if you do that, unfortunately.

Comment From: foreground-voice

I believe that bug is caused inconsistent value property. Which has distinct of string type periodically. I just attach suspicious piece of code here.

Comment From: rusackas

This one seems to have gone silent, but I just checked, and it's still happening as of 4.0.1

Comment From: rusackas

Can anyone validate if this is happening in 4.1.1/5.0.0?