[feat] allow to filter runtime errors/errors/warning in overlay

[alexander-akait]

The idea:

client: {
 errors?: boolean | (error: Error) => boolean
 warnings?: boolean | (warn: unknown) => boolean
 runtimeErrors?: boolean | (error: Error) => boolean
}

But let's implement boolean firstly, so you can disable it if you need, and then we can look at serilization

Originally posted by @alexander-akait in #4771 (comment)

[malcolm-kee]

@alexander-akait I thought boolean already supported? Or the intention is to move it from client.overlay.[messageType] to client.[messageType]?

[alexander-akait]

@malcolm-kee Yeah, boolean already supports, I mean we need to allow to filter them, i.e. pass function to our client (serilized) and use (deserilize) in the client code, so some errors can be filtered without filly disable functional of errors/warnings/runtimeErrors, for example:

client: {
  runtimeErrors: (error) { 
   return !/Any custom/.test(error.message);
  }
}

[malcolm-kee]

@alexander-akait I would love to work on this but quite clueless how to do this, as all current options are JSON values. Do you have any pointer, such as plugins with similar capabilities that I can take inspiration from?

[alexander-akait]

@malcolm-kee Hello, yeah, feel free to send a PR, we can use this logic (but!):

const myFn = function (num) {
  return num;
};
const myFnString = `(${myFn.toString()})`;

console.log(myFnString);
console.log(eval(myFnString)(12));

Without eval we can't solve it...

As the first step let's allow to pass on only regexps, it will be safer and without eval and should solve around 99% problems

[CarryOnHxy]

Very looking forward to see this new feature when i saw the constant ResizeObserver problem on the screen!!

[alexander-akait]

Fixed #4813, release will be soon

[malcolm-kee]

This is now documented: https://webpack.js.org/configuration/dev-server/#overlay