site-kit-wp: JavaScript error: Loading chunk 0 failed

Bug Description

Some users continue to experience errors in some places when using Site Kit, particularly around the splash/setup screen which prevents them from using the plugin.

E.g.

Loading chunk 0 failed. (error: https://theguyinthekitchen.com/wp-content/plugins/google-site-kit/dist/assets/js/chunk-googlesitekit-adminbar~chunk-googlesitekit-setup-wizard~chunk-googlesitekit-setup-wizard-proxy-7b6a86fd3073896743e0.js)

    in Unknown
    in Suspense
    in DashboardSplashApp
    in ErrorHandler
    in GoogleSitekitDashboardSplash

The error indicates a chunk loading failure, which is an on-demand loading of a React component or JavaScript partial.

These were added as part of the original design of the plugin but no longer offer much benefit, and result in a poor experience in the event of a loading failure which could happen for a number of reasons.

As such, they should be removed and we can re-evaluate their use and implementation in the future if needed.

Historical context

Following on from #1323 investigate JS error below. This occurs after clicking on the “Proceed” button during site verification.

Since reporting the user who initially reported this error has been able to proceed with setup successfully.

Initial report (via WordPress support forum): https://wordpress.org/support/topic/connection-loop/

Additional information:

  • Support unable to replicate
  • Additional users may be impacted, although only confirmed JS error specifically from original topic
  • Site Health info provided with initial support topic
  • First report from user during 1.6.0 setup

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

Acceptance criteria

Implementation Brief

  • Replace lazy imports with normal static imports and remove use of React.Suspense
    • assets/js/components/dashboard-splash/dashboard-splash-app.js
    • assets/js/googlesitekit-module.js
  • Delete assets/js/googlesitekit-adminbar-loader.js, entry in webpack, etc
    • Enqueue googlesitekit-adminbar in its place
  • Update assets/js/googlesitekit-adminbar.js to delay rendering the Admin Bar app until the menu item is hovered
    • Using domReady, add an event listener onto the admin bar menu item’s mouseover event to call the init function (should only run once)
      We should also add another listener on focus or other event for accessibility
  • Add trackEvent( 'admin_bar', 'page_stats_view' ) to GoogleSitekitAdminbar for consistency with loader behavior
    • Can use useEffect with no dependencies to only run once when first rendered

Test Coverage

  • No additions or changes necessary – existing E2E coverage should be sufficient

Visual Regression Changes

  • No changes expected

QA Brief

This issue removed the chunks that were failing to load for some users entirely so there is no longer a possibility of this error being raised again. The main thing to check are the areas that previously used these chunks which are only a few places:

  • Proxy splash screen should still load just fine
  • GCP splash screen should still load just fine - this is more of a legacy developer-specific path but technically still supported (requires providing your own client ID and client secret via Developer Settings)
  • Admin bar item
    • once Site Kit is setup, configure it to use a site that has data and navigate to the front end for a page that has data in SC or GA (the admin bar item should appear)
    • The admin bar stats should display as normal when hovering the menu item
    • Be sure to test the admin bar thoroughly as this part received the most changes

Changelog entry

  • Remove usage of JavaScript chunk files to fix potential issues with certain server configurations.

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 23 (6 by maintainers)

Most upvoted comments

QA update: Pass

Confirmed:

  1. Proxy splash screen loads fine. Successfully connected SK to Google account and Search Console + GA. No Javascript errors appeared in the console on all steps. Step 1 https://d.pr/i/7k7lxW Step 2 https://d.pr/i/huZthx Step 3 https://d.pr/i/JVid67 Step 4 https://d.pr/i/m43RUd Step 5 https://d.pr/i/GhWgRD
  2. GCP splash screen. Activated 2E Tests GCP Credentials Plugin for developer settings.The GCP splash screen appears and no Javascript errors appear in the console https://d.pr/i/jL7fq2
  3. When on the FE for a page, the data from SC and GA appears in the admin bar item. https://d.pr/i/X5MSEt
  4. When on the FE for a post, the data from SC and GA appears in the admin bar item. https://d.pr/i/SaTAFg
  5. Crossed checked the data on the admin bar item with SC and GA

Environment:

WP: 5.5.3 PHP: 7.3.21 SiteKit: 1.19.0 (on develop branch)

@aaemnnosttv Assigning to you for QA Brief.

Other users experienced similar errors before this, and some resolved it in different ways: https://wordpress.org/support/topic/error-plugin-help/ https://wordpress.org/support/topic/loading-chunk-0-failed/ (disabled security plugin firewall) https://wordpress.org/support/topic/site-kit-encountered-an-error-2/ (used workaround to reset proxy)