site-kit-wp: WebFont global existing causes Google Charts with custom fontName to throw exception `Cannot read properties of null (reading '__eventTarget')`

Looks like this is a compatibility issue with the Web Font Loader library.

The following is a snippet that can help reproduce the issue on your local machine even without futurio plugin and theme:

add_action( 'admin_footer', function() {
    ?><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    <script>
        WebFont.load({
            google: {
                families: ['Droid Sans', 'Droid Serif']
            }
        });
    </script><?php
} );

QA ❌

@tofumatt while testing, we found that it is still possible to raise the same error while toggling the date range. I wasn’t able to reproduce this at first but was able to eventually so this does not seem to happen consistently. Perhaps there is a bit of a race condition going on but this warrants a bit more testing and exploration.

So, this all seems to stem from the WebFont global being written/available when React Google Charts tries to load a custom font for certain elements like the text in a pie chart slice. I think it only happens for content it renders inside an SVG, where we need to specify a custom font rather than it just relying on the plugin-wide fonts set here: https://github.com/google/site-kit-wp/blob/24e6a6368ce49d8eab433a052d1006c5aabe1e7a/assets/sass/config/_variables.scss#L242-L243

This can be seen with Eugene’s code above; even just using:

add_action( 'admin_footer', function() {
    ?>
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
    <?php
} );

will cause the bug to occur. In fact, even:

add_action( 'admin_footer', function() {
    ?>
    <script>window.WebFont = { load: console.log }</script>
    <?php
} );

causes the bug.

This only happens when another plugin/theme/etc. loads the Google WebFont loader, possible another version, and only affects a few, small elements rendered by our Charts. I am totally unaware of the actual root cause because the errors are opaque and all of this code is third-party and a bit of a black box. But I have found a reliable fix that only needs to be used when the WebFont global is loaded and it causes minimal issue.

I think the best fix is to load those web fonts in Google Chart components as such:

// Instead of this:
textStyle: {
	fontName: '"Google Sans Text", "Helvetica Neue", Helvetica, Arial, sans-serif',
	color: '#5f6561',
	fontSize: 10,
}

// Use this:
textStyle: {
	fontName:
		global?.WebFont?.load === undefined
			? '"Google Sans Text", "Helvetica Neue", Helvetica, Arial, sans-serif'
			: undefined,
	color: '#5f6561',
	fontSize: 10,
}

It fixes the problem and only causes a few, small items to be rendered using Arial instead of Google Sans. Here’s the different for the UserDimensionsPieChart.

Google Sans

Arial

It’s not Analytics but the React Google Charts library, or our usage of it. Enabling Analytics renders the Google Charts PieChart with fontName: 'Google Sans Text' which is what’s causing the error.

I’m still trying to figure out a cause, but as mentioned it might be best to disable custom fonts in our charts for now…

@tofumatt could you please help to troubleshoot this fonts issue? Assigning this ticket to you for now.

@jamesozzie Thanks for all that information. I can reproduce this issue locally and on an InstaWP site. Locally, it happens even when selecting the 7 days period - although on the InstaWP site it only occurred for 14 or 90 day periods. When I comment out the latest additions to GoogleChart, I do not get the error so this has been introduced in the last release. Not sure why those lines are an issue - haven’t dug deeper. Also not sure why this happens only with the install of Futurio either at this stage. But worth moving this to the Execution board as a bug to investigate further I guess?

I couldn’t reproduce the Data Errors - Invalid Credentials errors.

Just a quick comment that I’ve added steps to reproduce this within the main content of this issue, where I could recreate this with the Futurio theme and plugin. In my case the error appears on the 14 day or 90 day reporting period only. Testing ongoing.