No internet connection
  1. Home
  2. General

Non-blurry images fail to load in docs

By Joey Parrish @joeyparrish
    2021-05-06 21:01:36.930Z

    When I visit your docs in one particular Chrome instance, all of the images are hopelessly blurry and unusable, and there is an uncaught Promise rejection in the JS console. This doesn't happen in incognito or on my phone. There must be some browser extension that is triggering it, but it's my work profile, so some of them I can't disable.

    Here's the top of the backtrace:

    Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.appendChild (https://tinypilotkvm.com/assets/js/app.3485c92d.js:42:40599)
    at p (https://tinypilotkvm.com/assets/js/app.3485c92d.js:42:53331)
    at f (https://tinypilotkvm.com/assets/js/app.3485c92d.js:42:52962)
    at h (https://tinypilotkvm.com/assets/js/app.3485c92d.js:42:53417)

    Reply
    • 6 replies
    1. Michael Lynch @michael2021-05-06 21:45:55.854Z

      Whoops, looks like there was a bad build. I've pushed an update that I believe fixes the issue.

      Thanks for letting me know!

      Reply
      1. JJoey Parrish @joeyparrish
          2021-05-06 22:05:50.505Z

          Happy to help!

          I'm still seeing the issue FWIW. The new JS URL has app.d8708ed4.js in it.

          I tried disabling every extension the company will let me disable, and I still have the issue.

          But in incognito, which disables several more, it's gone. So I expect some corp nonsense extension has manipulated the page content in a way that breaks your site. Not your fault.

          Still, if there's any extra info you'd like from me to debug, let me know. Otherwise, I can just keep using incognito if I need to refer to the docs again.

          I was able to set up everything in our lab, so I'm a happy customer!

          Reply
          1. Michael Lynch @michael2021-05-06 22:26:08.969Z

            Darn! Yeah, that's the latest version. I'll keep investigating. My Sentry logs are showing other users hitting this as well.

            Reply
            1. JJoey Parrish @joeyparrish
                2021-05-07 17:01:20.884Z

                Where it throws, the code looks like:

                            appendChild: function(t, e) {
                t.appendChild(e)
            },

                When it throws, t is a comment, and e is a list item.

                This also throws in all contexts I can test (with and without incognito): document.createComment('').appendChild(document.createElement('div'))

                But the docs load correctly for me in incognito without throwing. This leads me to believe one of my extensions changes the environment such that something is a comment that wouldn't be otherwise.

                Obviously I know nothing about the code behind your site, so I may be off-base. But you could maybe try something like:

                            appendChild: function(t, e) {
                if (t instanceof Comment) {
                  return;
                }
                t.appendChild(e)
            },

                Adding a node to a comment is as good as throwing it away, right? So this should be fine. At least you can say it's easier than finding out which Google corp extension is causing a comment to appear where you might not expect.

                Hope that helps!

                Reply
                1. Michael Lynch @michael2021-05-07 21:04:49.804Z

                  Thanks! The TinyPilot site is a Vue SPA built on top of Gridsome. The error seems to be several layers deep into Vue code. Nuxt (another Vue-based SSG) seem to run into this as well:

                  https://github.com/nuxt/nuxt.js/issues/5800

                  It's a frustrating bug that's popped up before. It's a bit maddening because it's usually not related to incorrect use of Vue or Gridsome features as far as I can tell, but just something breaking in the way that Vue is supposed to work. The best we can do is zero in on the code that's causing it and implement the logic a different way (usually it's related to using the v-if feature in Vue).

                  I haven't found the root cause yet, but I realized that it triggers if you add an item to your cart and either reload the page or close the tab and return to tinypilotkvm.com.

                  I suspect the reason that you're seeing it on your normal browser but not in incognito is because your regular browser still has saved items in your cart. You can test my hypothesis if you go to Chrome Developer Tools > Application Tab > Local Storage and then clear tinypilotkvm.com and reload the page.

                  I was hoping to have a solution by the end of the week, but it looks like it'll have to wait till next week, although this is an embarrassing bug to have stick around over the weekend.

                  Reply
                  1. JJoey Parrish @joeyparrish
                      2021-05-07 22:54:11.579Z

                      I can confirm. Clearing site data fixed it. Although I checked first what was in my cart, and it was empty.

                      Thanks!

                      Reply
            ReplyAdd progress note