How to debug Fetch as Google for an SPA?

Google claims to be able to render SPAs since 2015: https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html.

To check how google sees your page, you can use a Fetch As Google tool (choose Fetch And Render for an SPA, this way google bot will try to execute JS).

If your page doesn’t get properly rendered (displays blank page for example), you may want to follow these steps:

1. Check if you have any errors mentioned at the search console itself (click on the request and scroll down past your site screenshots)
2. Try adding browser shims. Note that it doesn’t matter if you use Babel to compile your code, you still need polyfills for older browsers and for headless browsers such as Google Bot or PhantomsJS.

npm install --save es5-shim es6-shim

// in your frontend/index.js, as early as possible
import ‘es5-shim’;
import ‘es6-shim’;

3. If not — try adding

window.onerror = (error) => { document.innerHTML = error };

It may not help if the error you are getting originates form the rejected promise. addEventListener('unhandledrejection') event could help here, but there are no polyfills for it as far as I know.

My story:

Fetch and Render tool was returning a properly rendered JS for some pages (even those including multiple ajax calls), but not for others. Soon I realized that this was due to a particular library (DraftJS).

Pages with DraftJS were rendering everything until they stumbled upon DraftJS and silently failed, leaving blank space where editors should have been.

I tried to debug it with 1. and 3., but it didn’t work. I looked at a server-side rendering, but it was a headache, and, besides, DraftJS doesn’t support it well yet.

After that I decided to try out https://prerender.io. It’s a service that renders your pages using PhantomJS, caches them, and returns them to Google Bot when it makes requests using deprecated ?_escapred_fragment_= query.

While testing it locally, PhantomJS raised the error along the lines of undefined is not a function. This error was solved by adding ES6 shims (2.).

I decided to see if Google Bot will appreciate the shims too, and, miraculously, it did.