SPA getting a lots of chunk loading errors on Workers Site

Hey all, we have an Emberjs SPA being hosted on workers (workers site) with assets stored in KV. We get a lot of chunk loading errors reported in Rollbar like this:

#3328 ChunkLoadError: Loading chunk 9426 failed. (error: httpx://app[.]website[.]io/assets/chunk.356a3c7429bb825c3059.js)

after every new deploy, presumably because their index.html is stored for a long time and once reloaded, tries to find chunks that aren’t in KV anymore.

Not sure if that’s the reason, we tried to set our index.html cache time to zero so it always loads the version with the links to the newest chunks but the issue persists.

Here is our index.js for the worker:

import {
  getAssetFromKV,
  serveSinglePageApp,
} from '@cloudflare/kv-asset-handler';

/*
 * For every request made to the worker this script will run.
 * The DEBUG flag will do two things that help during development:
 * 1. Skips caching on the edge, which makes it easier to
 *    debug.
 * 2. Returns an error message on exception in your Response rather
 *    than the default 404.html page.
 */
const DEBUG = false;

addEventListener('fetch', (event) => {
  try {
    event.respondWith(handleEvent(event));
  } catch (e) {
    if (DEBUG) {
      return event.respondWith(
        new Response(e.message || e.toString(), {
          status: 500,
        })
      );
    }
    event.respondWith(new Response('Internal Error', { status: 500 }));
  }
});

async function handleEvent(event) {
  let pathname = event.request.url;
  let options = { mapRequestToAsset: serveSinglePageApp };

  const filesRegex =
    /(.*\.(gif|ico|jpeg|jpg|json|png|svg|ttf|txt|webp|woff|woff2|xml|zip))$/;
  const htmlJsRegex = /(.*\.(html|js))$/;

  try {
    if (!DEBUG) {
      options.cacheControl = {
        browserTTL: 0, // 0 hours on html, css, js in the browser.
        edgeTTL: 0, // 0 hours on html, css, js on the CF edge.
        bypassCache: false, // do not bypass CF cache
      };
      // Ignore caching on index.html, always get the latest versions with the newest chunk links.
      if (pathname.match(htmlJsRegex)) {
        options.cacheControl.edgeTTL = 0;
        options.cacheControl.browserTTL = 0; // Should this just be null?
        options.cacheControl.bypassCache = true;
      }
      // 1 year TTL on images and fonts in the browser and CF edge.
      if (pathname.match(filesRegex)) {
        options.cacheControl.edgeTTL = 31536000;
        options.cacheControl.browserTTL = 31536000;
      }
    }
    return await getAssetFromKV(event, options);
  } catch (e) {
    // if an error is thrown try to serve the asset at 404.html
    if (!DEBUG) {
      try {
        let notFoundResponse = await getAssetFromKV(event, {
          mapRequestToAsset: (req) =>
            new Request(`${new URL(req.url).origin}/404.html`, req),
        });

        return new Response(notFoundResponse.body, {
          ...notFoundResponse,
          status: 404,
        });
      } catch (e) {}
    }

    return new Response(e.message || e.toString(), { status: 500 });
  }
}

When looking at the KV store for our site assets (that contain our JS) it seems like there are multiple versions of JS chunks stored with different hashes, we thought this would mitigate the issue by default but chunks eventually disappear and the worker returns 404 causing chunk loading errors and forcing the user to hard refresh.

Are there any good ways around this? Forcing KV to store more assets for longer or is there something wrong with our caching setup in index.js? Thanks for any tips!