Font Library uploader apparently crashes with broken font files

[peterwilsoncc]

Description

When a user attempts to upload a font file that is broken, the font library uploader tab apparently crashes.

Inspecting the console, an error is thrown but fails to be caught.

Step-by-step reproduction instructions

MacOS instructions

1. Remove the first 100 bytes from a font file: tail -c +100 OpenSans-Bold.ttf > _broken-font.ttf
2. Open the Font Library uploader tab via the site editor
3. Attempt to upload the broken font file
4. The uploader will show the upload progress bar for the foreseeable future

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.4
• Gutenberg trunk @ 619f0a3

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[t-hamano]

I was also able to reproduce this problem. The console log output in debug mode is below.

lib-font.browser.js:810 Uncaught (in promise) Error: broken-font.ttf is either an unsupported font format, or not a font at all.
    at Font.fromDataBuffer (lib-font.browser.js:810:1)
    at getFontFaceMetadata (upload-fonts.js:110:11)
    at async upload-fonts.js:85:26
    at async Promise.all (:8888/wp-admin/index 0)
    at async loadFiles (upload-fonts.js:83:27)

I'll attach the broken font so that anyone can reproduce this problem. This is a font with the first 100 bytes of the Roboto Regular font removed.

broken-font.zip

[t-hamano]

I think the problem is that the fromDataBuffer method throws an exception if the font file is incorrect, but that exception is not caught.

gutenberg/packages/edit-site/lib/lib-font.browser.js

Lines 809 to 813 in 64fb8dd

	if ( ! type ) {
	throw new Error(
	`${ filenameOrUrL } is either an unsupported font format, or not a font at all.`
	);
	}

gutenberg/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js

Lines 110 to 114 in 64fb8dd

	fontObj.fromDataBuffer( buffer, fontFile.name );
	// Assuming that fromDataBuffer triggers onload event and returning a Promise
	const onloadEvent = await new Promise(
	( resolve ) => ( fontObj.onload = resolve )
	);

cc @matiasbenedetto @pbking

[youknowriad]

Since RC1 is today, this probably won't be fixed for 6.5. So I'm removing from the board.