caniuse.com is broken after search (cache issue)

[ydaniv]

Once you try searching something errors are thrown during rendering of results and sites becomes unresponsive:

Uncaught TypeError: Cannot read property 'isShown' of undefined
    at s.getShownOldVersionCount (base-browser-view.js:177)
    at s.handleShownChange (feature-support-view.js:259)
    at s.resetShown (feature-support-view.js:197)
    at setViewMode (feature-support-view.js:115)
    at s.makeSupportView (feature-view.js:450)
    at s.renderContents (feature-view.js:88)
    at s.handleLoaded (feature-view.js:49)
    at s.emitEvents (stapes.min.js:2)
    at s.emit (stapes.min.js:2)
    at s.initFullData (feature-model.js:35)

Also, got this one before, shouldn't be related, but why is the site querying my info??:

Failed to load resource: the server responded with a status of 429 ()

Many thanks!
~Y

[ydaniv]

@Fyrd seems to be fixed after cache clean, you might want to revisit your cache policies, probably some of your JS is being cached longer than the rest, or the HTML.

[Fyrd]

Good point, I'll look into that!

[atjn]

Yeah, i've had issues several times that were fixed by a cache clean, or just waiting a day :)

[ydaniv]

@Fyrd great! Keeping this as a reminder, you can close if you wish.

[Fyrd]

This issue should no longer occur since the recent client side update, so closing.

[atjn]

@Fyrd This has actually started to happen more frequently for me since the update. It might not be the exact same error, but it has the same effect. I can try to collect some error logs if you are interested.

[Fyrd]

@atjn Ah, sorry to hear that. Curious as to what's going on, so yeah error logs would be great! Have re-opened the issue.

[atjn]

Alright, I have spent some time trying to isolate the error. There are many different ways to make the UI fail, but I found a very reliable way to do it:
1) Open caniuse.com
2) Write anything into the search bar, and wait a second to let it process (examples: "avif", "flex", "fghgdfhjdfg")
3) Delete what's in your search bar, and wait for the UI to show the home screen again
4) Write a second search term into the search bar (this has to be a term that would return a result, and it has to be different from the first search result; examples: "webp", "css", "es6")
5) Observe that nothing happens, and that a JS error is logged to your console

This happens in different (modern) versions of Firefox/Chrome with/without devtools open, on a fresh/old version, with/without extra plugins installed. It doesn't seem like the client browser has any effect on whether the error happens or not.

Here are some of the errors i was able to create. They change depending on how you break caniuse and which client you are using:

parts.ts:238 Uncaught TypeError: Cannot read property 'nodeType' of null
    at h._commitText (parts.ts:238)
    at h.commit (parts.ts:201)
    at n.update (template-instance.ts:53)
    at h._commitTemplateResult (parts.ts:254)
    at h.commit (parts.ts:204)
    at a (render.ts:56)
    at Object.Te (search.module.ts:118)
    at Object.n [as publish] (mediator.ts:25)
    at Object.success (search.module.ts:175)
    at XMLHttpRequest.r.onreadystatechange (utils.ts:84)

parts.ts:238 Uncaught TypeError: Cannot read property 'nodeType' of null
    at h._commitText (parts.ts:238)
    at h.commit (parts.ts:201)
    at n.update (template-instance.ts:53)
    at h._commitTemplateResult (parts.ts:254)
    at h.commit (parts.ts:204)
    at a (render.ts:56)
    at Object.Te (search.module.ts:118)
    at Object.n [as publish] (mediator.ts:25)
    at HTMLInputElement.Se (search.module.ts:162)
    at utils.ts:139



md5-4c02c782573f828df7ce3618a5d7d5c9



dom.ts:58 Uncaught TypeError: Cannot read property 'nextSibling' of null
    at n (dom.ts:58)
    at h.clear (parts.ts:318)
    at h._commitNode (parts.ts:229)
    at h._commitTemplateResult (parts.ts:264)
    at h.commit (parts.ts:204)
    at a (render.ts:56)
    at Object.Te (search.module.ts:118)
    at Object.n [as publish] (mediator.ts:25)
    at Object.success (search.module.ts:175)
    at XMLHttpRequest.r.onreadystatechange (utils.ts:84)



md5-4c02c782573f828df7ce3618a5d7d5c9



dom.ts:58 Uncaught TypeError: Cannot read property 'nextSibling' of null
    at n (dom.ts:58)
    at h.clear (parts.ts:318)
    at h._commitNode (parts.ts:229)
    at h._commitTemplateResult (parts.ts:264)
    at h.commit (parts.ts:204)
    at a (render.ts:56)
    at Object.Te (search.module.ts:118)
    at Object.n [as publish] (mediator.ts:25)
    at HTMLInputElement.Se (search.module.ts:162)
    at utils.ts:139



md5-4c02c782573f828df7ce3618a5d7d5c9



Uncaught TypeError: t is null
    _commitText parts.ts:237
    commit parts.ts:201
    update template-instance.ts:53
    _commitTemplateResult parts.ts:254
    commit parts.ts:204
    a render.ts:56
    Te search.module.ts:118
    n mediator.ts:25
    success search.module.ts:175
    onreadystatechange utils.ts:84
    m utils.ts:80
    Se search.module.ts:165
    i utils.ts:139
    setTimeout handler*x/< utils.ts:143
    listen dom.js:57
    Ae search.module.ts:204
    init search.module.ts:254
    <anonymous> index.js:34

[Fyrd]

Thanks @atjn for finding that issue! I was able to reproduce the bug, turns out it was a lit-element error that got fixed in a recent update, so updating that library appears to have also fixed the issue. Let me know if it fixed it for you as well and I think I'll be able to close this.

[atjn]

@Fyrd awesome! Judging from a quick test, it seems to have solved the issue on my end as well. If i encounter an edge case that isn't fixed, i'll just open a new bug, so feel free to close this one :)