InfiniteLoader doesn't play nice with Vue keep-alive #394

ivelin · 2020-06-02T17:05:02Z

In review of PR #347 we noticed that when the Ambianic Edge Peer ID changes on the Settings page, that causes a Vue callback into infiniteloader which tries to reference its DOM parent. However since the inifiniteloader is on the timeline page, which is not rendered while the user is on the settings page, there is no DOM parent that infiniteloader can reference at the time.

When we remove the keep-alive wrap around the timeline page, the infiniteloader callback error does not occur.

See exception details below:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for immediate watcher "forceUseInfiniteWrapper": "TypeError: Cannot read property 'tagName' of null"

found in

---> <InfiniteLoading>
       <VList>
         <Timeline> at src/views/Timeline.vue
           <VContent>
             <VApp>
               <AppFrame> at src/components/AppFrame.vue
                 <VLazy>
                   <App> at src/App.vue
                     <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
Vue.$watch @ vue.runtime.esm.js?2b0e:4951
mounted @ vue-infinite-loading.js?e166:6
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
callHook @ vue.runtime.esm.js?2b0e:4219
insert @ vue.runtime.esm.js?2b0e:3139
invokeInsertHook @ vue.runtime.esm.js?2b0e:6346
patch @ vue.runtime.esm.js?2b0e:6565
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
eval @ pnp.js?d013:102
wrappedMutationHandler @ vuex.esm.js?2f62:785
commitIterator @ vuex.esm.js?2f62:407
eval @ vuex.esm.js?2f62:406
_withCommit @ vuex.esm.js?2f62:565
commit @ vuex.esm.js?2f62:405
boundCommit @ vuex.esm.js?2f62:350
_callee7$ @ pnp.js?d013:464
tryCatch @ runtime.js?96cf:45
invoke @ runtime.js?96cf:274
prototype.<computed> @ runtime.js?96cf:97
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
eval @ pnp.js?d013:444
wrappedActionHandler @ vuex.esm.js?2f62:792
dispatch @ vuex.esm.js?2f62:457
boundDispatch @ vuex.esm.js?2f62:347
eval @ pnp.js?d013:250
setTimeout (async)
eval @ pnp.js?d013:250
i.emit @ peerjs.min.js?a0bc:46
dataChannel.onopen @ peerjs.min.js?a0bc:62
12:03:46.276 vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'tagName' of null
    at VueComponent.getScrollParent (vue-infinite-loading.js?e166:6)
    at VueComponent.getScrollParent (vue-infinite-loading.js?e166:6)
    at VueComponent.getScrollParent (vue-infinite-loading.js?e166:6)
    at VueComponent.getScrollParent (vue-infinite-loading.js?e166:6)
    at VueComponent.getScrollParent (vue-infinite-loading.js?e166:6)
    at VueComponent.eval (vue-infinite-loading.js?e166:6)
    at VueComponent.Vue.$watch (vue.runtime.esm.js?2b0e:4949)
    at VueComponent.mounted (vue-infinite-loading.js?e166:6)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at callHook (vue.runtime.esm.js?2b0e:4219)
logError @ vue.runtime.esm.js?2b0e:1888
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
Vue.$watch @ vue.runtime.esm.js?2b0e:4951
mounted @ vue-infinite-loading.js?e166:6
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
callHook @ vue.runtime.esm.js?2b0e:4219
insert @ vue.runtime.esm.js?2b0e:3139
invokeInsertHook @ vue.runtime.esm.js?2b0e:6346
patch @ vue.runtime.esm.js?2b0e:6565
Vue._update @ vue.runtime.esm.js?2b0e:3948
updateComponent @ vue.runtime.esm.js?2b0e:4066
get @ vue.runtime.esm.js?2b0e:4479
run @ vue.runtime.esm.js?2b0e:4554
flushSchedulerQueue @ vue.runtime.esm.js?2b0e:4310
eval @ vue.runtime.esm.js?2b0e:1980
flushCallbacks @ vue.runtime.esm.js?2b0e:1906
Promise.then (async)
timerFunc @ vue.runtime.esm.js?2b0e:1933
nextTick @ vue.runtime.esm.js?2b0e:1990
queueWatcher @ vue.runtime.esm.js?2b0e:4402
update @ vue.runtime.esm.js?2b0e:4544
notify @ vue.runtime.esm.js?2b0e:730
reactiveSetter @ vue.runtime.esm.js?2b0e:1055
eval @ pnp.js?d013:102
wrappedMutationHandler @ vuex.esm.js?2f62:785
commitIterator @ vuex.esm.js?2f62:407
eval @ vuex.esm.js?2f62:406
_withCommit @ vuex.esm.js?2f62:565
commit @ vuex.esm.js?2f62:405
boundCommit @ vuex.esm.js?2f62:350
_callee7$ @ pnp.js?d013:464
tryCatch @ runtime.js?96cf:45
invoke @ runtime.js?96cf:274
prototype.<computed> @ runtime.js?96cf:97
asyncGeneratorStep @ asyncToGenerator.js?1da1:3
_next @ asyncToGenerator.js?1da1:25
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js?1da1:13
_next @ asyncToGenerator.js?1da1:25
eval @ asyncToGenerator.js?1da1:32
eval @ asyncToGenerator.js?1da1:21
eval @ pnp.js?d013:444
wrappedActionHandler @ vuex.esm.js?2f62:792
dispatch @ vuex.esm.js?2f62:457
boundDispatch @ vuex.esm.js?2f62:347
eval @ pnp.js?d013:250
setTimeout (async)
eval @ pnp.js?d013:250
i.emit @ peerjs.min.js?a0bc:46
dataChannel.onopen @ peerjs.min.js?a0bc:62
12:03:46.290 vue-infinite-loading.js?e166:6 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at eval (vue-infinite-loading.js?e166:6)

The text was updated successfully, but these errors were encountered:

it turns out infiniteloader does not play nive with vue keep-alive see issue ambianic#394 for details

ivelin · 2020-06-02T17:12:52Z

Related to an open issue in the infiniteloader repo:
PeachScript/vue-infinite-loading#281

# [2.4.0](v2.3.3...v2.4.0) (2020-06-02) ### Bug Fixes * Added E2E test ([de1d8e3](de1d8e3)) * Bug in disconnecting / connecting ([c4d27a0](c4d27a0)) * Bug removed ([34c0c6e](34c0c6e)) * Changed disconnection stream ([f457ab4](f457ab4)) * changed text to be more specific ([2674ca7](2674ca7)) * choose edge connection clean up ([d0b563b](d0b563b)) * cosmetic UI changes in settings page ([4596d29](4596d29)) * Fixed merge conflicts ([87907df](87907df)) * fixed tests so timeout was correct ([f616f66](f616f66)) * mapstate to avoid error ([9608cbb](9608cbb)) * merge branch 'master' of https://github.com/ambianic/ambianic-ui into remote-access ([66883b3](66883b3)) * merge branch 'remote-access' of https://github.com/BKristenssonAlfsson/ambianic-ui into remote-access ([ac4c957](ac4c957)) * Redirect to edge connect if connected ([16b1878](16b1878)) * remote pairing code cleanup ([e095212](e095212)) * remove vue keep-alive around timeline vue ([1bde1b1](1bde1b1)), closes [#394](#394) * Removed unused variable ([43c03ec](43c03ec)) * Setting state to false ([d4a8914](d4a8914)) * structure grid system ([cbecd0b](cbecd0b)) * vuetify warnings and initilization of app ([6f3545d](6f3545d)) ### Features * Remote connection ([1a89b66](1a89b66)) * remote first time connectivity ([538a2d1](538a2d1)) * remote first time connectivity ([d038f27](d038f27)) * remote network pairing with ambianic edge ([7c297b1](7c297b1)) * Remote-access changes ([4c6b58a](4c6b58a))

sniperadmin · 2020-06-04T13:41:21Z

I am having thoughts about the dynamic importing for the timeline component,.. my thoughts might be wrong, so I will try a small test and see...

sniperadmin · 2020-06-04T14:11:26Z

looks like it is taking long to connect

I think it might be better to test it on a good internet connection (I don't have this option yet 😆 )

ivelin · 2020-06-04T14:18:46Z

It is normal to take 5-10 seconds, because of the way aiortc implements ICE. Until it supports ICE trickle, it will be that way. With ICE trickle, I've seen connection times to drop to 1-2 seconds. If it takes more than 10 seconds, that usually means one of the ICE servers (STUN or TURN) is down, which is also a related aiortc issue. Instead of using fallback servers independently, it fails if any of these servers fail. Also an open issue with aiortc <aiortc/aioice#4>.

…

On Thu, Jun 4, 2020 at 9:11 AM Nasr Galal ***@***.***> wrote: looks like it is taking long to connect [image: image] <https://user-images.githubusercontent.com/24525973/83767419-ed43fc80-a67d-11ea-9a93-05c7e3b4552f.png> I think it might be better to test it on a good internet connection (I don't have this option yet 😆 ) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#394 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AARBUFK36N6MIGAC5HRQHB3RU6TR3ANCNFSM4NQ5DJQA> .

ivelin · 2021-01-25T19:11:57Z

fixed.

ivelin added the bug Something isn't working label Jun 2, 2020

ivelin mentioned this issue Jun 2, 2020

Cannot read property 'tagName' of null PeachScript/vue-infinite-loading#281

Open

ivelin added a commit to BKristenssonAlfsson/ambianic-ui that referenced this issue Jun 2, 2020

fix: remove vue keep-alive around timeline vue

1bde1b1

it turns out infiniteloader does not play nive with vue keep-alive see issue ambianic#394 for details

ivelin closed this as completed Jan 25, 2021

github-actions bot locked as resolved and limited conversation to collaborators Jan 26, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

InfiniteLoader doesn't play nice with Vue keep-alive #394

InfiniteLoader doesn't play nice with Vue keep-alive #394

ivelin commented Jun 2, 2020

ivelin commented Jun 2, 2020 •

edited

Loading

sniperadmin commented Jun 4, 2020

sniperadmin commented Jun 4, 2020

ivelin commented Jun 4, 2020 via email

ivelin commented Jan 25, 2021

InfiniteLoader doesn't play nice with Vue keep-alive #394

InfiniteLoader doesn't play nice with Vue keep-alive #394

Comments

ivelin commented Jun 2, 2020

ivelin commented Jun 2, 2020 • edited Loading

sniperadmin commented Jun 4, 2020

sniperadmin commented Jun 4, 2020

ivelin commented Jun 4, 2020 via email

ivelin commented Jan 25, 2021

ivelin commented Jun 2, 2020 •

edited

Loading