Having trailing slash in the blog path, results in 404 about old-kentcdodds.com HOT 20 CLOSED

I think we can close this now. If I hear reports from others that they're having this issue I'll raise it again and we can dig deeper. Thanks everyone!

from old-kentcdodds.com.

@kentcdodds I think that's probably more likely than Netlify failing with CDN/redirecting trailing slashes--that seems like behavior that would be unlikely to break.

For some context, the awesome @davidbailey00 wrote a good chunk of the gatsby-plugin-offline code, so thanks for that David!

@dimitrisnl could you shed any light on reproduction steps to trigger this flow? Maybe David's comment above is helpful?

from old-kentcdodds.com.

@dimitrisnl this doesn't really seem like a broken link, though. I'm not sure if anyone else has been able to reproduce, which is unfortunate.

Long shot - but maybe disable all your extensions (I saw some type of ad blocker at least)? It's possible something is conflicting and causing issues with the service worker. The Google Analytics script sometimes gets blocked--wondering if that has anything to do with the error here?

Also perhaps it's a bug in your version of Chrome? Try updating?

Finally - perhaps there's something helpful in the console logs. Could you try opening your console, enabling Preserve Log, and then seeing if any errors arise there?

It's very difficult (as Kent notes) to pin this down when we can't reproduce it. This doesn't seem like a wide-spread issue, but still unfortunate you're experiencing this!

Also PS: thanks for using Gatsby on your personal site 💜

from old-kentcdodds.com.

Just noticed that there is another issue here kentcdodds/kentcdodds.com#94

from old-kentcdodds.com.

from old-kentcdodds.com.

Wondering if adding a simple slash here will do the trick
https://github.com/kentcdodds/kentcdodds.com/blob/master/gatsby-node.js#L127

from old-kentcdodds.com.

I cannot reproduce this. It's weird because there's literally an index.html file at that location on the server so it should just work. I have no idea what's going on here. If you can help figure that out I would be grateful...

from old-kentcdodds.com.

@kentc In safari & FF, it works as expected. Emptying cache and doing a hard reload in Chrome fixes it temporarily, but it still occurs on any subsequent visit.

Wondering if this is a caching issue since this URL was previously used in Medium.

from old-kentcdodds.com.

@DSchau, do you have any ideas?

from old-kentcdodds.com.

@kentcdodds this isn't strictly speaking a Gatsby issue--you're using Netlify, right?

They should redirect trailing slashes appropriately, e.g. /blog and /blog/ both map to /blog/index.html which is the structure that gatsby build creates.

@kentcdodds do you see a spike in 404s or anything in Google Analytics or the equivalent if you're tracking on this stuff?

from old-kentcdodds.com.

Unfortunately if the client-side JS doesn't run then I wont get analytics, so I have no way of knowing if a lot of people are experiencing this.

Maybe @swyx can help with this on the netlify side 🤔

from old-kentcdodds.com.

@DSchau, I was mostly wondering whether the service worker is causing this issue.

from old-kentcdodds.com.

Hi @dimitrisnl, do you have multiple tabs open while clearing the site data? If so, Chrome can't fully clear the data since the other background tab(s) are still being controlled by the same SW, which can sometimes cause the error like the one you've screenshotted. For normal users browsing the site, this shouldn't be an issue.

from old-kentcdodds.com.

(apologies for the low quality, the size was getting out of hand)

I followed David's comments but also tried doing it in incognito with a single tab.
Strangely the first time it worked, but on the second visit, it didn't.

I'm on a different network & laptop than when first spotted.

@kentcdodds @DSchau

edit: Clearing the cache as David suggested, worked as a temporary measure. The issue persists.

from old-kentcdodds.com.

Yeah, it's super weird, but I can't reproduce that at all.

from old-kentcdodds.com.

Wondering if Google Search Console can report these broken links, and if the % of users experiencing it is super low, we can safely close it.

from old-kentcdodds.com.

Thanks @DSchau , will try your suggestions. Here's a GIF I captured earlier.

I'm using incognito, with the latest Chrome, in two different MacBook machines.

Note: This is happening in the 'Talks' page, so I suspect there is something wrong with the Service Worker.

from old-kentcdodds.com.

@dimitrisnl there are some errors in your console--those could be illustrative here?

And thank you--these gifs are actually super helpful. Appreciate it!

from old-kentcdodds.com.

Well, with or without extensions, it came to the point where I can't properly reproduce it anymore. It might happen 2 times out of 10.

I believe it would be best to close it for now.

@DSchau The warning was the following

The resource https://kentcdodds.com/static/d/520/path---offline-plugin-app-shell-fallback-a-30-c5a-NZuapzHg3X9TaN1iIixfv1W23E.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

Something that I frequently encounter in my own website too.

Edit: I just noticed the error you mentioned. Unfortunately, I don't have access to it now. Will check if I can trigger it again.

Edit-2:

@ sw.js:1 

Uncaught (in promise) TypeError: Failed to fetch

and this points to

/**
 * Welcome to your Workbox-powered service worker!
 *
 * You'll need to register this file in your web app and you should
 * disable HTTP caching for this file too.
 * See https://goo.gl/nhQhGp
 *
 * The rest of the code is auto-generated. Please don't update this file
 * directly; instead, make changes to your Workbox build configuration
 * and re-run your build process.
 * See https://goo.gl/2aRDsh
 */

importScripts("workbox-v3.6.3/workbox-sw.js");
workbox.setConfig({modulePathPrefix: "workbox-v3.6.3"});

workbox.core.setCacheNameDetails({prefix: "gatsby-plugin-offline"});

workbox.skipWaiting();
workbox.clientsClaim();

/**
 * The workboxSW.precacheAndRoute() method efficiently caches and responds to
 * requests for URLs in the manifest.
 * See https://goo.gl/S9QRab
 */
self.__precacheManifest = [
  {
    "url": "webpack-runtime-23376e9eef1cf18c6ac3.js"
  },
  {
    "url": "styles.315ea2a66aec714e6b14.css"
  },
  {
    "url": "styles-dc053cebc25613d88847.js"
  },
  {
    "url": "app-ed67a016cdc98b183c80.js"
  },
  {
    "url": "component---node-modules-gatsby-plugin-offline-app-shell-js-9837e02d99c357be8d95.js"
  },
  {
    "url": "offline-plugin-app-shell-fallback/index.html",
    "revision": "06e151f26d2ea6819dd2569dc34375b4"
  },
  {
    "url": "component---src-pages-404-js-99fa8de09add3d8355f6.js"
  },
  {
    "url": "static/d/164/path---404-html-516-62a-NZuapzHg3X9TaN1iIixfv1W23E.json"
  },
  {
    "url": "static/d/520/path---offline-plugin-app-shell-fallback-a-30-c5a-NZuapzHg3X9TaN1iIixfv1W23E.json"
  },
  {
    "url": "manifest.webmanifest",
    "revision": "043d5d916d6852fdc580da637015e773"
  }
].concat(self.__precacheManifest || []);
workbox.precaching.suppressWarnings();
workbox.precaching.precacheAndRoute(self.__precacheManifest, {});

workbox.routing.registerRoute(/(\.js$|\.css$|static\/)/, workbox.strategies.cacheFirst(), 'GET');
workbox.routing.registerRoute(/^https?:.*\.(png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/, workbox.strategies.staleWhileRevalidate(), 'GET');
workbox.routing.registerRoute(/^https?:\/\/fonts\.googleapis\.com\/css/, workbox.strategies.staleWhileRevalidate(), 'GET');

/* global importScripts, workbox, idbKeyval */

importScripts(`idb-keyval-iife.min.js`)
const WHITELIST_KEY = `custom-navigation-whitelist`

const navigationRoute = new workbox.routing.NavigationRoute(({ event }) => {
  const { pathname } = new URL(event.request.url)

  return idbKeyval.get(WHITELIST_KEY).then((customWhitelist = []) => {
    // Respond with the offline shell if we match the custom whitelist
    if (customWhitelist.includes(pathname)) {
      const offlineShell = `/offline-plugin-app-shell-fallback/index.html`
      const cacheName = workbox.core.cacheNames.precache

      return caches.match(offlineShell, { cacheName }).then(cachedResponse => {
        if (cachedResponse) return cachedResponse

        console.error(
          `The offline shell (${offlineShell}) was not found ` +
            `while attempting to serve a response for ${pathname}`
        )

        return fetch(offlineShell).then(response => {
          if (response.ok) {
            return caches.open(cacheName).then(cache =>
              // Clone is needed because put() consumes the response body.
              cache.put(offlineShell, response.clone()).then(() => response)
            )
          } else {
            return fetch(event.request)
          }
        })
      })
    }

    return fetch(event.request)
  })
})

workbox.routing.registerRoute(navigationRoute)

let updatingWhitelist = null

function rawWhitelistPathnames(pathnames) {
  if (updatingWhitelist !== null) {
    // Prevent the whitelist from being updated twice at the same time
    return updatingWhitelist.then(() => rawWhitelistPathnames(pathnames))
  }

  updatingWhitelist = idbKeyval
    .get(WHITELIST_KEY)
    .then((customWhitelist = []) => {
      pathnames.forEach(pathname => {
        if (!customWhitelist.includes(pathname)) customWhitelist.push(pathname)
      })

      return idbKeyval.set(WHITELIST_KEY, customWhitelist)
    })
    .then(() => {
      updatingWhitelist = null
    })

  return updatingWhitelist
}

function rawResetWhitelist() {
  if (updatingWhitelist !== null) {
    return updatingWhitelist.then(() => rawResetWhitelist())
  }

  updatingWhitelist = idbKeyval.set(WHITELIST_KEY, []).then(() => {
    updatingWhitelist = null
  })

  return updatingWhitelist
}

const messageApi = {
  whitelistPathnames(event) {
    let { pathnames } = event.data

    pathnames = pathnames.map(({ pathname, includesPrefix }) => {
      if (!includesPrefix) {
        return `${pathname}`
      } else {
        return pathname
      }
    })

    event.waitUntil(rawWhitelistPathnames(pathnames))
  },

  resetWhitelist(event) {
    event.waitUntil(rawResetWhitelist())
  },
}

self.addEventListener(`message`, event => {
  const { gatsbyApi } = event.data
  if (gatsbyApi) messageApi[gatsbyApi](event)
})

But again, the website is working properly for me now, so I don't believe this is relevant.

from old-kentcdodds.com.

@dimitrisnl I think this:

Uncaught (in promise) TypeError: Failed to fetch

is maybe due to the Google Analytics script failing to fetch? I get that error too--but weirdly mine never fails to load/white screens 😩

In any case--if you can ever reliably reproduce this again, we'd love a bug report over at gatsbyjs/gatsby!

from old-kentcdodds.com.