Add `securitypolicyviolation` plugin

[xPaw]

I'm experimenting with something like this:

	document.addEventListener( 'securitypolicyviolation', ( e ) =>
	{
		if( !e.sourceFile.startsWith( location.origin ) )
		{
			return;
		}

		const error = new Error( `CSP Error ${e.violatedDirective}` );
		error.name = 'SecurityPolicyViolationError';

		Bugsnag.notify( error, {
			severity: 'info',
			metadata:
			{
				originalPolicy: e.originalPolicy,
				sourceFile: e.sourceFile,
				blockedURI: e.blockedURI
			}
		} );
	} );

This could be wrapped into a nicely formatted plugin.

[birtles]

Looks great! Are you interested in making a PR for this?

[xPaw]

This might require more work as bugsnag groups these errors together inconsistently, perhaps it needs to create separate error names for each directive.

And as always with CSP there's some spam caused by browser extensions.

[birtles]

This might require more work as bugsnag groups these errors together inconsistently, perhaps it needs to create separate error names for each directive.

For what it's worth, we can simplify the code to just pass in a structured object rather than an Error object since we recognize them here:

Bugsnag.notify(
  {
    name: 'SecurityPolicyViolationError',
    message: `CSP Error ${e.violatedDirective}`,
  },
  {
    severity: 'info',
    metadata: {
      originalPolicy: e.originalPolicy,
      sourceFile: e.sourceFile,
      blockedURI: e.blockedURI,
    },
  },
);

I'm not quite sure why Bugsnag is grouping them differently. I think it uses the error class and top stack frame (ref) so it should be the same.

And as always with CSP there's some spam causes by browser extensions.

Yeah, I'm finding CSP reports mostly useless because of browser extensions.

[xPaw]

The stacktrace being the same in this callback would cause the groupings yeah. But that's maybe not ideal for different classes of violations.