Javascript Error After Updating

aaemnnosttv commented 4 years ago

Bug Description

Some chunks generated by Webpack are loaded without a version attached to it, or otherwise unique filename which would cause it to be downloaded fresh when the plugin is upgraded.

Related to #326 (and likely many others) but not all blank screen issues.

🆘 TL;DR SUPPORT REMEDY 🆘 For those affected by this bug, simply clear your browser's cache and purge your CDN and you should be back in business!

console.log

``` admin.php?page=googlesitekit-splash:477 GET http://sitekit.labs.srvrx.pw/wp-content/plugins/google-site-kit/dist/assets/js/ads.js?ver=1.2.0 net::ERR_BLOCKED_BY_CLIENT jquery-migrate.js?ver=1.4.1:23 JQMIGRATE: Migrate is installed with logging active, version 1.4.1 react-dom.js?ver=16.9.0:12276 Uncaught TypeError: Cannot read property 'call' of undefined at __webpack_require__ (googlesitekit-dashboard-splash.js?ver=1.2.0:1) __webpack_require__ @ googlesitekit-dashboard-splash.js?ver=1.2.0:1 react-dom.js?ver=16.9.0:19952 The above error occurred in one of your React components: in Unknown (created by t) in Suspense (created by t) in t (created by t) in t React will try to recreate this component tree from scratch using the error boundary you provided, t. logCapturedError @ react-dom.js?ver=16.9.0:19952 logError @ react-dom.js?ver=16.9.0:19988 callback @ react-dom.js?ver=16.9.0:21099 callCallback @ react-dom.js?ver=16.9.0:13067 commitUpdateEffects @ react-dom.js?ver=16.9.0:13106 commitUpdateQueue @ react-dom.js?ver=16.9.0:13097 commitLifeCycles @ react-dom.js?ver=16.9.0:20217 commitLayoutEffects @ react-dom.js?ver=16.9.0:22951 callCallback @ react-dom.js?ver=16.9.0:341 invokeGuardedCallbackDev @ react-dom.js?ver=16.9.0:391 invokeGuardedCallback @ react-dom.js?ver=16.9.0:448 commitRootImpl @ react-dom.js?ver=16.9.0:22723 unstable_runWithPriority @ react.js?ver=16.9.0:2820 runWithPriority$2 @ react-dom.js?ver=16.9.0:11443 commitRoot @ react-dom.js?ver=16.9.0:22552 runRootCallback @ react-dom.js?ver=16.9.0:21692 (anonymous) @ react-dom.js?ver=16.9.0:11491 unstable_runWithPriority @ react.js?ver=16.9.0:2820 runWithPriority$2 @ react-dom.js?ver=16.9.0:11443 flushSyncCallbackQueueImpl @ react-dom.js?ver=16.9.0:11487 scheduler_flushTaskAtPriority_Immediate @ react.js?ver=16.9.0:2607 flushTask @ react.js?ver=16.9.0:2653 flushWork @ react.js?ver=16.9.0:2784 performWorkUntilDeadline @ react.js?ver=16.9.0:2408 ```

I wasn't able to reproduce this in all environments as some servers are more intelligent about serving proper headers used for validating browser-cached assets.

Although I'm able to reproduce this, the exact conditions on the server itself aren't 100% clear. It seems to be related to cache headers, such as ETag or Last-Modified which can vary from server to server.

I was only able to replicate this using a CDN (Cloudflare). However, when I enabled "Development Mode" on the CDN, I was no longer able to replicate it.

Steps to reproduce

Start from clean browser state (incognito or empty cache)
Install and Site Kit 1.1.2
Visit splash screen
Upgrade Site Kit to latest (1.2.0)
See error

Screenshots

Chunk loads

Chunk is cached in the browser

Post Update

Splash screen loads with infamous Cannot read property 'call' of undefined error

Browser shows the same chunk is still cached

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

All chunks generated by Webpack which are not directly enqueued by WordPress (e.g. vendor or commons) should have [chunkhash] in the filename

Implementation Brief

Merge #1056

Changelog entry

Fix several temporary blank screen errors by loading script dependencies more reliably via Webpack.

felixarntz commented 4 years ago

@aaemnnosttv @tofumatt Would these issues here potentially be addressed by this?

tofumatt commented 4 years ago

Given both of those users explicitly mention having recently updated: I'd say yes. I'd check with each user after the next update to see if the issue persists; if not I'd say both of those issues should be fixed/prevented by the change here.