Prefetch works but throws an "uncaught (in promise) error"

Question

I am trying to use the prefetch directive with my fonts as advised by Chrome Lighthouse audit report. However, doing so is throwing the following error:

Uncaught (in promise) Error: 3000ms timeout exceeded

My stack involves NextJS for SSR. My index.jsx looks like this:

import React, { PureComponent, Fragment } from 'react';
import Typography from '@material-ui/core/Typography';
import { withStyles } from '@material-ui/core/styles';
import Head from 'next/head';
import Link from 'next/link';
import withRoot from '../lib/withRoot';
import Fonts from '../lib/Fonts'

const styles = theme => ({
  root: {
    textAlign: 'center',
    paddingTop: theme.spacing.unit * 20,
  },
  paragraph: {
    fontFamily: 'Oswald',
  }
});

class Index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
    };
  }

  componentDidMount() {
    if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/serviceWorker.js'); }
    Fonts();
  }

  render() {
    const { classes } = this.props;
    const { open } = this.state; // eslint-disable-line no-unused-vars
    const title = 'Home';
    const description = 'This is the description for the homepage';
    return (
      <Fragment>
        <Head>
          <title>{ title }</title>
          <meta name="description" content={description} key="description" />
        </Head>
        <div className={classes.root}>
          <Typography gutterBottom>
            <Link href="/blog">
              <a>View posts page</a>
            </Link>
          </Typography>
        </div>
        <p className={classes.paragraph}>All men must die</p>
      </Fragment>
    );
  }
}

export default withRoot(withStyles(styles)(Index));

And the Fonts.js looks like this:

const FontFaceObserver = require('fontfaceobserver');

const addFont = (fontUrl) => {
  const fontName = fontUrl.split('=')[1].split(':')[0].split('&')[0];
  const fontNameWithSpace = fontName.replace(/\+/g, ' ');
  const link = document.createElement('link');
  link.href = fontUrl;
  link.rel = 'stylesheet';
  document.head.appendChild(link);
  const addedFont = new FontFaceObserver(fontNameWithSpace);
  addedFont.load().then(() => {
    document.documentElement.classList.add(fontName);
  });
};

const Fonts = () => {
  // Oswald
  addFont('https://fonts.googleapis.com/css?family=Oswald:400,500,600,700&display=swap');
  // Roboto
  addFont('https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap');
  // Source Sans Pro
  addFont('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600&display=swap');
};

export default Fonts;

As you can see, I'm running the Fonts() method only on the browser via a componentDidMount(). What's going wrong?

score 2 · Answer 1 · answered Jun 16 '20 at 16:24

FontFaceObserver load have some extra parameter,

 * Starts observing the loading of the specified font. Immediately returns a new Promise that resolves when the font is available and rejected when the font is not available.
 * @param testString If your font doesn't contain latin characters you can pass a custom test string.
 * @param timeout The default timeout for giving up on font loading is 3 seconds. You can increase or decrease this by passing a number of milliseconds.
 */
load(testString?: string | null, timeout?: number): Promise<void>;

Some people have the same issue here: Prefetch and slow connections causes Uncaught (in promise) / promise rejected error

In your case just add some extra time to your load promise:

 // null for testString parameter
 addedFont.load(null,5000).then(() => {
document.documentElement.classList.add(fontName);
});

Prefetch works but throws an "uncaught (in promise) error"

1 Answers1