Global catch all error handling outside of NextJS to catch potential bootstrapping errors.

[cfrank]

Hi all,

I am working on a large NextJS application and wanted to know if there is currently any supported pattern for injecting a standalone inline script which can be used for a global catch-all error handler that can catch any errors during application bootstrapping.

An example situation I am trying to handle is this - Though there are other error categories which I'm sure I'm missing:

• We know the supported browsers of NextJS and our company adds a eligibility check above our application whose jobs it is to filter traffic and redirect ineligible traffic to a legacy experience which works with a larger set of browsers.
• Within the eligibility code there is a bug and ineligible traffic makes its way into the NextJS application and the framework bundle fails to load with an exception.
• This is during application bootstrapping, so global-error.js and other React error boundary systems are not available yet.

What is the best way to handle something like this?

• Using a <Script /> tag requires the framework to be invoked in order to append it to the DOM, and I worry that we're introducing a race condition between the script loading, and any error which might disrupt application bootstrapping.
• Injecting the script using custom server middleware is another option, but it comes within similar drawbacks as mentioned above.
• Adding a script tag with dangerouslySetInnerHTML in a server component is another option, but it doesn't send the inline script through the build system and we can't use typescript etc.

I'm wondering if there is a NextJS recommended approach for this, or if others have solved this using more robust means? I want to give our customers the best experience, and make sure we are catching any show stopping issues as quickly as possible.

Thanks!