Hi, I have a search box text filter that uses the 'Surname' field from the database table for the lookup.
However, if I type some letters that don't match any results from the database table lookup i.e. surname starting with letters 'zx' does not exist, then the metabase table just errors out and shows this message:
Does anyone know of a solution to prevent error and create a more user friendly experience?
Thanks
Dave
Definitely not the most helpful message in trying to troubleshoot.
In these cases, it’s best if you open browser developer tools and use the Console and Network tabs while you’re doing this to see what may be happening.
There may be something that jumps out that gives a better indication of what's happening.
Also, does this happen as you’re typing ‘zx’ into the search field?
Or after you’ve clicked on ‘Add filter’ to apply the filter?
Hi @Filmon, thanks for coming back to me. Below are some further details that should help.
The search is an autocomplete search filter (so never have to click add filter). I've connected the variable to the name field in the database (in the edit options for the search filter), so the search is a live lookup.
When you type a string that doesn't exist i.e. the first letter that is not matched in the search lookup metabase instantly breaks as per the original screenshot, rather than providing a no results message.
In the network tab, all is fine, but in the console I get the following errors
The full console error log output is:
react-dom.production.min.js:209 TypeError: Cannot read properties of undefined (reading 'display_name')
at Ye (FieldValuesWidget.jsx:469:3)
at Jo (react-dom.production.min.js:153:146)
at ya (react-dom.production.min.js:261:496)
at mc (react-dom.production.min.js:246:265)
at bc (react-dom.production.min.js:246:194)
at cc (react-dom.production.min.js:239:172)
at react-dom.production.min.js:123:115
at t.unstable_runWithPriority (scheduler.production.min.js:19:467)
at Yi (react-dom.production.min.js:122:325)
at Gi (react-dom.production.min.js:123:61)
oa @ react-dom.production.min.js:209
Oa.n.payload @ react-dom.production.min.js:227
bo @ react-dom.production.min.js:129
$s @ react-dom.production.min.js:179
ya @ react-dom.production.min.js:263
mc @ react-dom.production.min.js:246
bc @ react-dom.production.min.js:246
cc @ react-dom.production.min.js:239
(anonymous) @ react-dom.production.min.js:123
t.unstable_runWithPriority @ scheduler.production.min.js:19
Yi @ react-dom.production.min.js:122
Gi @ react-dom.production.min.js:123
Ki @ react-dom.production.min.js:122
rc @ react-dom.production.min.js:230
enqueueSetState @ react-dom.production.min.js:132
v.setState @ react.production.min.js:12
(anonymous) @ FieldValuesWidget.jsx:176
u @ runtime.js:63
(anonymous) @ runtime.js:293
(anonymous) @ runtime.js:118
Fe @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
a @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
Promise.then (async)
Fe @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
a @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ FieldValuesWidget.jsx:292
u @ runtime.js:63
(anonymous) @ runtime.js:293
(anonymous) @ runtime.js:118
Fe @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
a @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ FieldValuesWidget.jsx:284
c @ debounce.js:17
setTimeout (async)
c @ debounce.js:14
setTimeout (async)
c @ debounce.js:14
setTimeout (async)
(anonymous) @ debounce.js:28
(anonymous) @ restArguments.js:16
(anonymous) @ FieldValuesWidget.jsx:307
(anonymous) @ FieldValuesWidget.jsx:278
(anonymous) @ TokenField.tsx:268
c @ react-dom.production.min.js:14
f @ react-dom.production.min.js:14
(anonymous) @ react-dom.production.min.js:14
m @ react-dom.production.min.js:15
ct @ react-dom.production.min.js:52
st @ react-dom.production.min.js:51
lt @ react-dom.production.min.js:52
At @ react-dom.production.min.js:56
F @ react-dom.production.min.js:287
$ @ react-dom.production.min.js:19
en @ react-dom.production.min.js:70
Jt @ react-dom.production.min.js:69
t.unstable_runWithPriority @ scheduler.production.min.js:19
Yi @ react-dom.production.min.js:122
T @ react-dom.production.min.js:287
Gt @ react-dom.production.min.js:68
app.js:16 Error: {componentStack: '\n in Ye\n in div\n in u\n in div\n in s…\n in p\n in DragDropContextProvider\n in I'}
f @ app.js:16
n.<computed> @ bindActionCreators.js:8
value @ ErrorBoundary.tsx:29
Oa.o.componentDidCatch.n.callback @ react-dom.production.min.js:227
go @ react-dom.production.min.js:131
ua @ react-dom.production.min.js:212
Oc @ react-dom.production.min.js:255
t.unstable_runWithPriority @ scheduler.production.min.js:19
Yi @ react-dom.production.min.js:122
zc @ react-dom.production.min.js:248
cc @ react-dom.production.min.js:239
(anonymous) @ react-dom.production.min.js:123
t.unstable_runWithPriority @ scheduler.production.min.js:19
Yi @ react-dom.production.min.js:122
Gi @ react-dom.production.min.js:123
Ki @ react-dom.production.min.js:122
rc @ react-dom.production.min.js:230
enqueueSetState @ react-dom.production.min.js:132
v.setState @ react.production.min.js:12
(anonymous) @ FieldValuesWidget.jsx:176
u @ runtime.js:63
(anonymous) @ runtime.js:293
(anonymous) @ runtime.js:118
Fe @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
a @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
Promise.then (async)
Fe @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
a @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ FieldValuesWidget.jsx:292
u @ runtime.js:63
(anonymous) @ runtime.js:293
(anonymous) @ runtime.js:118
Fe @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
a @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ FieldValuesWidget.jsx:284
c @ debounce.js:17
setTimeout (async)
c @ debounce.js:14
setTimeout (async)
c @ debounce.js:14
setTimeout (async)
(anonymous) @ debounce.js:28
(anonymous) @ restArguments.js:16
(anonymous) @ FieldValuesWidget.jsx:307
(anonymous) @ FieldValuesWidget.jsx:278
(anonymous) @ TokenField.tsx:268
c @ react-dom.production.min.js:14
f @ react-dom.production.min.js:14
(anonymous) @ react-dom.production.min.js:14
m @ react-dom.production.min.js:15
ct @ react-dom.production.min.js:52
st @ react-dom.production.min.js:51
lt @ react-dom.production.min.js:52
At @ react-dom.production.min.js:56
F @ react-dom.production.min.js:287
$ @ react-dom.production.min.js:19
en @ react-dom.production.min.js:70
Jt @ react-dom.production.min.js:69
t.unstable_runWithPriority @ scheduler.production.min.js:19
Yi @ react-dom.production.min.js:122
T @ react-dom.production.min.js:287
Gt @ react-dom.production.min.js:68
StructuredQuery.ts:352 Warning: can't clean query without metadata!
value @ StructuredQuery.ts:352
value @ Question.ts:1232
value @ Question.ts:968
S @ questions.ts:100
(anonymous) @ NewItemMenu.tsx:79
useMemo @ react-dom.production.min.js:165
t.useMemo @ react.production.min.js:25
Mr @ NewItemMenu.tsx:72
Jo @ react-dom.production.min.js:153
ya @ react-dom.production.min.js:261
mc @ react-dom.production.min.js:246
bc @ react-dom.production.min.js:246
cc @ react-dom.production.min.js:239
(anonymous) @ react-dom.production.min.js:123
t.unstable_runWithPriority @ scheduler.production.min.js:19
Yi @ react-dom.production.min.js:122
Gi @ react-dom.production.min.js:123
Ki @ react-dom.production.min.js:122
rc @ react-dom.production.min.js:230
enqueueSetState @ react-dom.production.min.js:132
v.setState @ react.production.min.js:12
(anonymous) @ FieldValuesWidget.jsx:176
u @ runtime.js:63
(anonymous) @ runtime.js:293
(anonymous) @ runtime.js:118
Fe @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
a @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
Promise.then (async)
Fe @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
a @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ FieldValuesWidget.jsx:292
u @ runtime.js:63
(anonymous) @ runtime.js:293
(anonymous) @ runtime.js:118
Fe @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
a @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ app-main.bundle.js?6aa3d9703cb47acbfecc:2
(anonymous) @ FieldValuesWidget.jsx:284
c @ debounce.js:17
setTimeout (async)
c @ debounce.js:14
setTimeout (async)
c @ debounce.js:14
setTimeout (async)
(anonymous) @ debounce.js:28
(anonymous) @ restArguments.js:16
(anonymous) @ FieldValuesWidget.jsx:307
(anonymous) @ FieldValuesWidget.jsx:278
(anonymous) @ TokenField.tsx:268
c @ react-dom.production.min.js:14
f @ react-dom.production.min.js:14
(anonymous) @ react-dom.production.min.js:14
m @ react-dom.production.min.js:15
ct @ react-dom.production.min.js:52
st @ react-dom.production.min.js:51
lt @ react-dom.production.min.js:52
At @ react-dom.production.min.js:56
F @ react-dom.production.min.js:287
$ @ react-dom.production.min.js:19
en @ react-dom.production.min.js:70
Jt @ react-dom.production.min.js:69
t.unstable_runWithPriority @ scheduler.production.min.js:19
Yi @ react-dom.production.min.js:122
T @ react-dom.production.min.js:287
Gt @ react-dom.production.min.js:68
Hope this provides the conext you need. Look forward to hearing from you.
Thanks
Dave