Cannot remove a seemingly corrupted "group by" field

I wish I knew how I got in this situation. Hopefully recording it here without the steps to reproduce it will be helpful.

Problem
When I click the “x” in the green box, nothing happens in the UI, but an error is logged to the console (included below). No server errors are logged.

When I click the “x” to remove the summarize block, an error is logged to the console (also included below), with a different stack trace, but most likely from the same line of javascript code. Again, no server errors are logged.

My environment

{
  "browser-info": {
    "language": "en-US",
    "platform": "Win32",
    "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36",
    "vendor": "Google Inc."
  },
  "system-info": {
    "java.runtime.name": "OpenJDK Runtime Environment",
    "java.runtime.version": "11.0.3+7",
    "java.vendor": "AdoptOpenJDK",
    "java.vendor.url": "https://adoptopenjdk.net/",
    "java.version": "11.0.3",
    "java.vm.name": "OpenJDK 64-Bit Server VM",
    "java.vm.version": "11.0.3+7",
    "os.name": "Linux",
    "os.version": "4.14.152-98.182.amzn1.x86_64",
    "user.language": "en",
    "user.timezone": "US/Eastern"
  },
  "metabase-info": {
    "databases": [
      "mysql",
      "h2"
    ],
    "hosting-env": "elastic-beanstalk",
    "application-database": "postgres",
    "run-mode": "prod",
    "version": {
      "date": "2019-11-19",
      "tag": "v0.33.6",
      "branch": "release-0.33.x",
      "hash": "be1e0e1"
    },
    "settings": {
      "report-timezone": "US/Eastern"
    }
  }
}

Console logs
First error (after clicking the green x)

app-main.bundle.js?d…ced319abf1b617b66:5 Uncaught (in promise) TypeError: Cannot read property 'toLowerCase' of undefined
    at app-main.bundle.js?d…ced319abf1b617b66:5
    at vendor.bundle.js?d1dced3…:1
    at Function._.map._.collect (vendor.bundle.js?d1dced3…:1)
    at Function._.sortBy (vendor.bundle.js?d1dced3…:1)
    at _.<computed> [as sortBy] (vendor.bundle.js?d1dced3…:1)
    at t.value (app-main.bundle.js?d…ced319abf1b617b66:5)
    at app-main.bundle.js?d…ced319abf1b617b66:5
    at r (app-main.bundle.js?d…ced319abf1b617b66:5)
    at t.n.value (app-main.bundle.js?d…ced319abf1b617b66:5)
    at t.value (app-main.bundle.js?d…ced319abf1b617b66:5)
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	vendor.bundle.js?d1dced3…:1
_.map._.collect	@	vendor.bundle.js?d1dced3…:1
_.sortBy	@	vendor.bundle.js?d1dced3…:1
_.<computed>	@	vendor.bundle.js?d1dced3…:1
value	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
r	@	app-main.bundle.js?d…ced319abf1b617b66:5
n.value	@	app-main.bundle.js?d…ced319abf1b617b66:5
value	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
r	@	app-main.bundle.js?d…ced319abf1b617b66:5
n.value	@	app-main.bundle.js?d…ced319abf1b617b66:5
value	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
M	@	vendor.bundle.js?d1dced3…:1
u._invoke	@	vendor.bundle.js?d1dced3…:1
e.<computed>	@	vendor.bundle.js?d1dced3…:1
r	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	vendor.bundle.js?d1dced3…:1
value	@	app-main.bundle.js?d…ced319abf1b617b66:5
value	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
M	@	vendor.bundle.js?d1dced3…:1
u._invoke	@	vendor.bundle.js?d1dced3…:1
e.<computed>	@	vendor.bundle.js?d1dced3…:1
r	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
a	@	app-main.bundle.js?d…ced319abf1b617b66:5
l	@	app-main.bundle.js?d…ced319abf1b617b66:5
value	@	app-main.bundle.js?d…ced319abf1b617b66:5
onRemove	@	app-main.bundle.js?d…ced319abf1b617b66:5
onClick	@	app-main.bundle.js?d…ced319abf1b617b66:5
i	@	vendor.bundle.js?d1dced3…:1
s	@	vendor.bundle.js?d1dced3…:1
executeDispatchesInOrder	@	vendor.bundle.js?d1dced3…:1
d	@	vendor.bundle.js?d1dced3…:1
f	@	vendor.bundle.js?d1dced3…:1
e.exports	@	vendor.bundle.js?d1dced3…:1
processEventQueue	@	vendor.bundle.js?d1dced3…:1
handleTopLevel	@	vendor.bundle.js?d1dced3…:1
f	@	vendor.bundle.js?d1dced3…:1
perform	@	vendor.bundle.js?d1dced3…:1
batchedUpdates	@	vendor.bundle.js?d1dced3…:1
batchedUpdates	@	vendor.bundle.js?d1dced3…:1
dispatchEvent	@	vendor.bundle.js?d1dced3…:1

Second error (after clicking grey “x” to remove “Summarize” section)

app-main.bundle.js?d…ced319abf1b617b66:5 Uncaught (in promise) TypeError: Cannot read property 'toLowerCase' of undefined
    at app-main.bundle.js?d…ced319abf1b617b66:5
    at vendor.bundle.js?d1dced3…:1
    at Function._.map._.collect (vendor.bundle.js?d1dced3…:1)
    at Function._.sortBy (vendor.bundle.js?d1dced3…:1)
    at _.<computed> [as sortBy] (vendor.bundle.js?d1dced3…:1)
    at t.value (app-main.bundle.js?d…ced319abf1b617b66:5)
    at app-main.bundle.js?d…ced319abf1b617b66:5
    at r (app-main.bundle.js?d…ced319abf1b617b66:5)
    at t.n.value (app-main.bundle.js?d…ced319abf1b617b66:5)
    at t.value (app-main.bundle.js?d…ced319abf1b617b66:5)
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	vendor.bundle.js?d1dced3…:1
_.map._.collect	@	vendor.bundle.js?d1dced3…:1
_.sortBy	@	vendor.bundle.js?d1dced3…:1
_.<computed>	@	vendor.bundle.js?d1dced3…:1
value	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
r	@	app-main.bundle.js?d…ced319abf1b617b66:5
n.value	@	app-main.bundle.js?d…ced319abf1b617b66:5
value	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
r	@	app-main.bundle.js?d…ced319abf1b617b66:5
n.value	@	app-main.bundle.js?d…ced319abf1b617b66:5
value	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
M	@	vendor.bundle.js?d1dced3…:1
u._invoke	@	vendor.bundle.js?d1dced3…:1
e.<computed>	@	vendor.bundle.js?d1dced3…:1
r	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	vendor.bundle.js?d1dced3…:1
value	@	app-main.bundle.js?d…ced319abf1b617b66:5
value	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
M	@	vendor.bundle.js?d1dced3…:1
u._invoke	@	vendor.bundle.js?d1dced3…:1
e.<computed>	@	vendor.bundle.js?d1dced3…:1
r	@	app-main.bundle.js?d…ced319abf1b617b66:5
(anonymous)	@	app-main.bundle.js?d…ced319abf1b617b66:5
a	@	app-main.bundle.js?d…ced319abf1b617b66:5
l	@	app-main.bundle.js?d…ced319abf1b617b66:5
value	@	app-main.bundle.js?d…ced319abf1b617b66:5
j	@	app-main.bundle.js?d…ced319abf1b617b66:5
i	@	vendor.bundle.js?d1dced3…:1
s	@	vendor.bundle.js?d1dced3…:1
executeDispatchesInOrder	@	vendor.bundle.js?d1dced3…:1
d	@	vendor.bundle.js?d1dced3…:1
f	@	vendor.bundle.js?d1dced3…:1
e.exports	@	vendor.bundle.js?d1dced3…:1
processEventQueue	@	vendor.bundle.js?d1dced3…:1
handleTopLevel	@	vendor.bundle.js?d1dced3…:1
f	@	vendor.bundle.js?d1dced3…:1
perform	@	vendor.bundle.js?d1dced3…:1
batchedUpdates	@	vendor.bundle.js?d1dced3…:1
batchedUpdates	@	vendor.bundle.js?d1dced3…:1
dispatchEvent	@	vendor.bundle.js?d1dced3…:1

How to duplicate
I wish I knew. Now that I know it could happen, if/when it happens again, I will try to recall the steps I took to get to that point.

Severity
Since this question is not used by any dashboards or other questions, I can simply archive and recreate this question from scratch. However, if I had used a question like this a lot, it would be a painful process to update everywhere it was used, and I might miss some places where it is used. (I don’t think there is a way to see usages of a particular question.)

Interesting note
The table visualization still works for this question, for some reason.

UI integration testing
I was going to suggest Cypress as a tool to help make and keep the UI robust, but it looks like you are already starting to go down that path, which is great!

Here is an image of the table visualization which still works for this question, for some reason…
image

Hi @ben-pg
I have a feeling that you might be seeing one of these issues:
https://github.com/metabase/metabase/issues/11235
https://github.com/metabase/metabase/issues/11495
But since you haven’t been able to reproduce it, I’m not totally sure. Though, I haven’t noticed the toLowerCase error while reproducing the issues.
By the way, upgrade to 0.33.7.3

Hi, @flamber
Upgrading is my next step. We’re on the same page. :+1:

It does look like those two issues are fairly similar to mine. They may have a similar root cause.

I find it curious that this question does not show up in my list of “saved questions”. I suspect that the root cause of this bug may the root cause of that issue also. I did perform a refresh to avoid https://github.com/metabase/metabase/issues/9027

Upgrading did not resolve this issue.
image

After upgrade, actions have the same results as before

  • Clicking the green box with the arrow and the “x” does not show any context menu items
  • Clicking the “x” results in an error log in the console, but nothing more
  • Clicking the other “x” to remove the “Sumarize” section results in an error log in the console, but nothing more

@ben-pg
Yes, issue #9027, can really cause some confusion, but luckily a simple browser refresh fixes it.
I didn’t expect 0.33.7.3 to fix anything related to this. It’s a security release.
Have you been able to reproduce this (preferably with Sample Dataset), when you look at my other steps to reproduce the other issues?

@ben-pg Okay, I’ve reproduced problem - took me a little extra time because I just stumbled on another issue:
https://github.com/metabase/metabase/issues/11561 - upvote by clicking :+1: on the first issue

1 Like