0

We have an Aurelia SPA that is served from a .NET MVC application. The SPA is bundled using Webpack.

Under certain conditions seemingly random JavaScript functions and objects will be undefined. We are unable to navigate to certain routes because of this. Refreshing the browser fixes these issues.

The steps we have found to reproduce this behavior are not always reliable.

  1. The SPA is open in the browser (specifically Chrome in this case).
  2. We deploy a new version of the code to our server; .NET and JavaScript.
  3. The previously open browser stays open for about 12 hours

Then we will see the issues like this Cannot read property 'split' of undefined. when navigating to certain routes. The undefined objects preventing route navigation are not always the same.

I cannot reproduce this behavior on my localhost.

Without deploying new code, I have left my browser open over a weekend and returned to a functioning application.

Any suggestions would be greatly appreciated. I am unsure how the deploy can be related since the browser should be unaware of any server changes.

Chris Roth
  • 59
  • 3
  • 1
    Try this https://stackoverflow.com/questions/118884/how-to-force-browser-to-reload-cached-css-js-files – Dmitry Apr 29 '19 at 13:56
  • 1
    There are couple of things to narrow down question: Use file hashes for your builds. Implement a reset session method, which would refresh the page after 30 mins of inactivity. (This will work just after your 12+hours since javascript don't work in background). Make sure you return your index.html file in all your paths. Check if you have serviceWorker caching stuff automatically. If still problem continues, you'll need to share how many .js files you are sharing, caches etc. – Doğancan Arabacı Apr 29 '19 at 13:58
  • Yeah, serviceWorker would've been my first guess. –  Apr 29 '19 at 14:58

1 Answers1

0

I have fixed this problem by adding a contenthash to my chunk files.

        path: path.resolve(bundleOutputDir),
        publicPath: "dist/",
        filename: "[name].js",
        chunkFilename: "[name].[contenthash].js",
      },

Our webpack build outputs a couple of files. Most of them are required at start up and are included in the index.cshtml of our MVC app's home controller.

e.g. <script type="text/javascript" src="~/dist/app.js" asp-append-version="true"></script>

asp-append-version="true" appends a version to these files so that the browser knows if it should load them from cache or not.

The problem is that the other chunk files that webpack outputs are not referenced in this way. They are referenced from the files that the index.cshtml references.

This is what I believe was happening.

  1. The web app would be open in the browser.
  2. We would release new code to the server.
  3. The browser goes idle.
  4. The user returns to the browser.
  5. The browser wakes up from being idle and requests the files again.
  6. The ones with asp-append-version="true" are updated while the ones with a static name are fetched from cache.
  7. Any minor change to that cached file will throw off the application because of the way webpack bundles files.
Chris Roth
  • 59
  • 3