Catch the Page build failure during Puppeteer Render at scully build time

[nikLD2022]

Hi Team ,

I want to catch the error which was thrown when a HTTP Network request to fetch the page data is done and it returns and error.

Currently i am trying to throw an error from my container component which makes the API call but the puppeteer renderer plugin is not able to catch that.

Any help on this will be highly appreciated.

Thanks !

[SanderElias]

Hi @nikLD2022
Do you want Scully to catch an error that happens inside your application?

There is no direct way of doing that. Adding the code that will make this possible is challenging, at least. Also, it will slow down rendering in all cases. I don't think this is a feature we will add.

However, you can still handle this use case. First catch the error in your application, and make sure you do render something special in the template:

<section *ngIf="weCatchedAError" errorrendering>{{weCacthedAError.message}}</setion>

Then you create a plugin that scans the page for this, and updates it accordingly!

registerPlugin('postProcessByDom', 'catchError', async (dom, route) => {
  const {
    window: { document },
  } = dom;
  const errNode = document.querySelector('section[errorrendering])
  if (errNode) {
     document.body.innerHTML = `<h1> there are an API error rendering this page</h1>
  }
  return dom
});

You probably want to do something more meaningful as just replacing the entire content, but that is totally up to you.