Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

i.toLowerCase is not a function crashes album view #396

Closed
MichaelRuhwedel opened this issue Apr 30, 2019 · 6 comments
Closed

i.toLowerCase is not a function crashes album view #396

MichaelRuhwedel opened this issue Apr 30, 2019 · 6 comments
Labels
bug

Comments

@MichaelRuhwedel
Copy link

Describe the bug
Recently i started seeing this error, which crashed the album view for me:

TypeError: i.toLowerCase is not a function
    at VM33 app.min.js:1
    at Array.sort (<anonymous>)
    at Object.t.sortItems (VM33 app.min.js:1)
    at t.value (VM33 app.min.js:125)
    at t.value (VM33 app.min.js:125)
    at Pi (VM33 app.min.js:81)
    at Ci (VM33 app.min.js:81)
    at Mi (VM33 app.min.js:81)
    at Wo (VM33 app.min.js:81)
    at Vo (VM33 app.min.js:81)

To Reproduce
Not sure, but it could be a missing field or null value in the album list. Here's the list I get back from spotify
https://gist.github.com/MichaelRuhwedel/92003a9208289a281dbcb54819d06e49/raw/fdd0f04553c6acaa061150540d5aaa2085fe2d20/error-response

Environment details:

  • Browser: chromium 74.0.3729.108
  • Iris version: 3.37.0
@jaedb
Copy link
Owner

jaedb commented May 4, 2019

Thanks for following the bug template! Some people seem to find this hard to do 😕

I think you're on the right track; sortItems is a method on the helpers component. Are you able to enable Test mode (Settings > Debug > Test Mode) and then observe the error? This will give us a much more verbose error to work with.

@MichaelRuhwedel
Copy link
Author

Here's the console output, hope it helps:

Uncaught TypeError: a_value.toLowerCase is not a function
    at compare (helpers.js:1394)
    at Array.sort (<anonymous>)
    at Object.sortItems (helpers.js:1400)
    at LibraryAlbums.renderView (LibraryAlbums.js:201)
    at LibraryAlbums.render (LibraryAlbums.js:347)
    at finishClassComponent (react-dom.development.js:14706)
    at updateClassComponent (react-dom.development.js:14661)
    at beginWork (react-dom.development.js:15609)
    at performUnitOfWork (react-dom.development.js:19277)
    at workLoop (react-dom.development.js:19317)
compare @ helpers.js:1394
sortItems @ helpers.js:1400
renderView @ LibraryAlbums.js:201
render @ LibraryAlbums.js:347
finishClassComponent @ react-dom.development.js:14706
updateClassComponent @ react-dom.development.js:14661
beginWork @ react-dom.development.js:15609
performUnitOfWork @ react-dom.development.js:19277
workLoop @ react-dom.development.js:19317
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
replayUnitOfWork @ react-dom.development.js:18543
renderRoot @ react-dom.development.js:19433
performWorkOnRoot @ react-dom.development.js:20307
performWork @ react-dom.development.js:20219
performSyncWork @ react-dom.development.js:20193
requestWork @ react-dom.development.js:20062
scheduleWork @ react-dom.development.js:19876
enqueueSetState @ react-dom.development.js:11155
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
(anonymous) @ Provider.js:53
dispatch @ redux.js:214
(anonymous) @ middleware.js:468
(anonymous) @ middleware.js:139
(anonymous) @ middleware.js:54
(anonymous) @ middleware.js:34
(anonymous) @ middleware.js:337
(anonymous) @ middleware.js:787
(anonymous) @ middleware.js:2424
(anonymous) @ middleware.js:242
(anonymous) @ middleware.js:807
(anonymous) @ middleware.js:13
(anonymous) @ index.js:11
dispatch @ redux.js:611
(anonymous) @ actions.js:2011
Promise.then (async)
(anonymous) @ actions.js:2009
(anonymous) @ index.js:8
dispatch @ redux.js:611
(anonymous) @ middleware.js:300
(anonymous) @ middleware.js:787
(anonymous) @ middleware.js:2424
(anonymous) @ middleware.js:242
(anonymous) @ middleware.js:807
(anonymous) @ middleware.js:13
(anonymous) @ index.js:11
dispatch @ redux.js:611
(anonymous) @ middleware.js:194
(anonymous) @ middleware.js:807
(anonymous) @ middleware.js:13
(anonymous) @ index.js:11
dispatch @ redux.js:611
(anonymous) @ actions.js:1995
(anonymous) @ index.js:8
(anonymous) @ redux.js:462
componentDidMount @ LibraryAlbums.js:60
commitLifeCycles @ react-dom.development.js:17299
commitAllLifeCycles @ react-dom.development.js:18701
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18913
(anonymous) @ react-dom.development.js:20383
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:20382
performWorkOnRoot @ react-dom.development.js:20311
performWork @ react-dom.development.js:20219
performSyncWork @ react-dom.development.js:20193
requestWork @ react-dom.development.js:20062
scheduleWork @ react-dom.development.js:19876
scheduleRootUpdate @ react-dom.development.js:20537
updateContainerAtExpirationTime @ react-dom.development.js:20565
updateContainer @ react-dom.development.js:20622
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20918
(anonymous) @ react-dom.development.js:21055
unbatchedUpdates @ react-dom.development.js:20424
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21051
render @ react-dom.development.js:21120
./src/js/index.js @ index.js:12
__webpack_require__ @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83
Show 52 more frames

react-dom.development.js:17082 The above error occurred in the <LibraryAlbums> component:
    in LibraryAlbums (created by Context.Consumer)
    in Connect(LibraryAlbums) (created by Route)
    in Route (created by App)
    in Switch (created by App)
    in main (created by App)
    in div (created by App)
    in Route (created by App)
    in Switch (created by App)
    in div (created by App)
    in div (created by App)
    in App (created by Context.Consumer)
    in Connect(App) (created by Route)
    in Route
    in Router (created by BrowserRouter)
    in BrowserRouter
    in Provider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:17082
logError @ react-dom.development.js:17118
update.callback @ react-dom.development.js:18030
callCallback @ react-dom.development.js:16398
commitUpdateEffects @ react-dom.development.js:16437
commitUpdateQueue @ react-dom.development.js:16428
commitLifeCycles @ react-dom.development.js:17348
commitAllLifeCycles @ react-dom.development.js:18701
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18913
(anonymous) @ react-dom.development.js:20383
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:20382
performWorkOnRoot @ react-dom.development.js:20311
performWork @ react-dom.development.js:20219
performSyncWork @ react-dom.development.js:20193
requestWork @ react-dom.development.js:20062
scheduleWork @ react-dom.development.js:19876
enqueueSetState @ react-dom.development.js:11155
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
(anonymous) @ Provider.js:53
dispatch @ redux.js:214
(anonymous) @ middleware.js:468
(anonymous) @ middleware.js:139
(anonymous) @ middleware.js:54
(anonymous) @ middleware.js:34
(anonymous) @ middleware.js:337
(anonymous) @ middleware.js:787
(anonymous) @ middleware.js:2424
(anonymous) @ middleware.js:242
(anonymous) @ middleware.js:807
(anonymous) @ middleware.js:13
(anonymous) @ index.js:11
dispatch @ redux.js:611
(anonymous) @ actions.js:2011
Promise.then (async)
(anonymous) @ actions.js:2009
(anonymous) @ index.js:8
dispatch @ redux.js:611
(anonymous) @ middleware.js:300
(anonymous) @ middleware.js:787
(anonymous) @ middleware.js:2424
(anonymous) @ middleware.js:242
(anonymous) @ middleware.js:807
(anonymous) @ middleware.js:13
(anonymous) @ index.js:11
dispatch @ redux.js:611
(anonymous) @ middleware.js:194
(anonymous) @ middleware.js:807
(anonymous) @ middleware.js:13
(anonymous) @ index.js:11
dispatch @ redux.js:611
(anonymous) @ actions.js:1995
(anonymous) @ index.js:8
(anonymous) @ redux.js:462
componentDidMount @ LibraryAlbums.js:60
commitLifeCycles @ react-dom.development.js:17299
commitAllLifeCycles @ react-dom.development.js:18701
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:18913
(anonymous) @ react-dom.development.js:20383
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:20382
performWorkOnRoot @ react-dom.development.js:20311
performWork @ react-dom.development.js:20219
performSyncWork @ react-dom.development.js:20193
requestWork @ react-dom.development.js:20062
scheduleWork @ react-dom.development.js:19876
scheduleRootUpdate @ react-dom.development.js:20537
updateContainerAtExpirationTime @ react-dom.development.js:20565
updateContainer @ react-dom.development.js:20622
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20918
(anonymous) @ react-dom.development.js:21055
unbatchedUpdates @ react-dom.development.js:20424
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21051
render @ react-dom.development.js:21120
./src/js/index.js @ index.js:12
__webpack_require__ @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83
Show 53 more frames

helpers.js:1394 Uncaught (in promise) TypeError: a_value.toLowerCase is not a function
    at compare (helpers.js:1394)
    at Array.sort (<anonymous>)
    at Object.sortItems (helpers.js:1400)
    at LibraryAlbums.renderView (LibraryAlbums.js:201)
    at LibraryAlbums.render (LibraryAlbums.js:347)
    at finishClassComponent (react-dom.development.js:14706)
    at updateClassComponent (react-dom.development.js:14661)
    at beginWork (react-dom.development.js:15609)
    at performUnitOfWork (react-dom.development.js:19277)
    at workLoop (react-dom.development.js:19317)

@jaedb
Copy link
Owner

jaedb commented May 7, 2019 •
edited
Loading

Thanks for that - it definitely looks to be an issue within the sorting function when your Library Albums are being rendered.

Can you please advise your settings for:

  • Album Library > Sort
  • Album Library > Source

You can run the following in your browser console to get these settings:
"sort: "+_store.getState().ui.library_albums_sort+", source: "+_store.getState().ui.library_albums_source

@MichaelRuhwedel
Copy link
Author

here's what i get

console.log("sort: "+_store.getState().ui.library_albums_sort+", source:" +_store.getState().ui.library_albums_source)
sort: artists, source:undefined

@jaedb
Copy link
Owner

jaedb commented May 18, 2019

Can you try Settings > Reset all settings? I think what's happened is your sort is set to an invalid value (perhaps due to an earlier version). When sorting albums by artist, running _store.getState().ui.library_albums_sort should return artists.first.name instead of artists.

@MichaelRuhwedel
Copy link
Author

That did the trick....thank you very much for the support!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@MichaelRuhwedel @jaedb