Fix remaining chunk error noise

I've been getting more Sentry errors about JS chunk errors after deploys, and finally looked into it!

Turns out that, our try/catch handling was working great, and the page was reloading correctly for users as expected. But in these scenarios we would _also_ throw and log two uncaught errors!

The first is that, because we're a single-page app, unrecognized routes fall back to the index.html by default (to power our custom client-side routes, like /outfits/123 etc). So this meant that missing JS files, which _should_ be returning a 404, were instead returning 200 OK and an HTML file, which failed to parse. (And running the script isn't included in the catchable part of the `import` promise!)

Now, in our `vercel.json` config, we catch those paths specifically and 404 them. (The exact choice of path is important: on dev, all these routes run _before_ the dev server, which is responsible for serving the static files - but dev doesn't include hashes in the JS file names, so this 404 route only matches built prod JS files, not local dev JS files.)

The second is that we failed to return anything to `@loadable/component` in the error case, so it would try to render `undefined` as if it were a component class. Now, we return a trivial component class that returns null!
This commit is contained in:
Emi Matchu 2021-01-26 11:43:27 -08:00
parent 03a3f7ede4
commit f74fc05112
3 changed files with 19 additions and 2 deletions

View file

@ -236,7 +236,11 @@ function SubmitPetForm() {
// Start preloading the WardrobePage, too! // Start preloading the WardrobePage, too!
// eslint-disable-next-line no-unused-expressions // eslint-disable-next-line no-unused-expressions
import("./WardrobePage"); import("./WardrobePage").catch((e) => {
// Let's just let this slide, because it's a preload error. Critical
// failures will happen elsewhere, and trigger reloads!
console.error(e);
});
}; };
const { brightBackground } = useCommonStyles(); const { brightBackground } = useCommonStyles();

View file

@ -326,8 +326,10 @@ export function loadable(load, options) {
return loadableLibrary( return loadableLibrary(
() => () =>
load().catch((e) => { load().catch((e) => {
console.error("Error loading page, reloading", e); console.error("Error loading page, reloading:", e);
window.location.reload(); window.location.reload();
// Return a component that renders nothing, while we reload!
return () => null;
}), }),
options options
); );

11
vercel.json Normal file
View file

@ -0,0 +1,11 @@
{
"routes": [
{
"handle": "filesystem"
},
{
"src": "/static/js/[^.]*\\.[^.]*\\.chunk.js",
"status": 404
}
]
}