trekhleb / covid-19

📈 Coronavirus (COVID-19) dashboard to show the dynamics of Сoronavirus distribution per country
https://trekhleb.dev/covid-19/
266 stars 71 forks source link

Page goes blank when selecting Canadian province #21

Closed JamesCatt closed 4 years ago

JamesCatt commented 4 years ago

Steps to reproduce:

  1. Uncheck "group by countries"
  2. Search for "Canada"
  3. Check the checkbox to select any Canadian province

I haven't been able to find any other sub-national regions (Chinese provinces, US states, etc) that cause this issue. Just Canadian provinces so far.

Console output:

Uncaught TypeError: Cannot read property 'length' of undefined
    at data.js:204
    at Array.reduce (<anonymous>)
    at getTotalCount (data.js:202)
    at DataType (index.js:196)
    at renderWithHooks (react-dom.development.js:14938)
    at updateFunctionComponent (react-dom.development.js:17169)
    at beginWork (react-dom.development.js:18745)
    at HTMLUnknownElement.callCallback (react-dom.development.js:182)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:231)
    at invokeGuardedCallback (react-dom.development.js:286)
(anonymous) @ data.js:204
getTotalCount @ data.js:202
DataType @ index.js:196
renderWithHooks @ react-dom.development.js:14938
updateFunctionComponent @ react-dom.development.js:17169
beginWork @ react-dom.development.js:18745
callCallback @ react-dom.development.js:182
invokeGuardedCallbackDev @ react-dom.development.js:231
invokeGuardedCallback @ react-dom.development.js:286
beginWork$1 @ react-dom.development.js:23338
performUnitOfWork @ react-dom.development.js:22289
workLoopSync @ react-dom.development.js:22265
performSyncWorkOnRoot @ react-dom.development.js:21891
(anonymous) @ react-dom.development.js:11224
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
flushSyncCallbackQueueImpl @ react-dom.development.js:11219
flushSyncCallbackQueue @ react-dom.development.js:11207
flushPendingDiscreteUpdates @ react-dom.development.js:21982
flushDiscreteUpdates @ react-dom.development.js:21962
finishEventHandler @ react-dom.development.js:761
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3691
attemptToDispatchEvent @ react-dom.development.js:4390
dispatchEvent @ react-dom.development.js:4312
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
discreteUpdates$1 @ react-dom.development.js:22022
discreteUpdates @ react-dom.development.js:803
dispatchDiscreteEvent @ react-dom.development.js:4291
react_devtools_backend.js:6 

The above error occurred in the <DataType> component:
    in DataType (created by DataTypes)
    in form (created by DataTypes)
    in DataTypes (created by App)
    in div (created by App)
    in div (created by App)
    in App

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.
blagh commented 4 years ago

I stepped through the error stack, looks like it's because the dataset doesn't include recovery data by province for Canada.

Screenshot of the data to show the array lengths (there are 14 "provinces" cause the data breaks out things like cruise ships):

Screen Shot 2020-03-30 at 8 41 43 PM Screen Shot 2020-03-30 at 8 46 29 PM

Also weird?

Screen Shot 2020-03-30 at 8 46 39 PM
trekhleb commented 4 years ago

Thanks for detailed report @JamesCatt and for debugging the error @blagh. I've made a fix to avoid UI crashing. As you've mentioned the issue is that there is not recovered data for some regions. That is also a reason for -1s in the table. I've made it to display -1 for now just to see that there are issues in the data.