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!