/**
 * ErrorHandler component.
 *
 * Site Kit by Google, Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * External dependencies
 */
import copyToClipboard from 'clipboard-copy';
import PropTypes from 'prop-types';

/**
 * WordPress dependencies
 */
import { Component, Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Icon, check, stack } from '@wordpress/icons';

/**
 * Internal dependencies
 */
import Notification from '../legacy-notifications/notification';
import Link from '../Link';
import Button from '../Button';

class ErrorHandler extends Component {
	constructor( props ) {
		super( props );

		this.state = {
			error: null,
			info: null,
			copied: false,
		};

		this.onErrorClick = this.onErrorClick.bind( this );
	}

	componentDidCatch( error, info ) {
		global.console.error( 'Caught an error:', error, info );

		this.setState( { error, info } );
	}

	onErrorClick() {
		const { error, info } = this.state;

		// Copy message with wrapping backticks for code block formatting on wp.org.
		copyToClipboard( `\`${ error?.message }\n${ info?.componentStack }\`` );

		this.setState( { copied: true } );
	}

	render() {
		const { children } = this.props;
		const { error, info, copied } = this.state;

		// If there is no caught error, render the children components normally.
		if ( ! error ) {
			return children;
		}

		const icon = <Icon
			className="mdc-button__icon"
			icon={ copied ? check : stack }
		/>;

		return (
			<Notification
				id="googlesitekit-error"
				title={ __( 'Site Kit encountered an error', 'google-site-kit' ) }
				description={ (
					<Fragment>
						<Button trailingIcon={ icon } onClick={ this.onErrorClick }>
							{ __( 'Copy error to clipboard', 'google-site-kit' ) }
						</Button>
						<Link href="https://wordpress.org/support/plugin/google-site-kit/" external>
							{ __( 'Report this problem', 'google-site-kit' ) }
						</Link>
					</Fragment>
				) }
				isDismissable={ false }
				format="small"
				type="win-error"
			>
				<pre className="googlesitekit-overflow-auto">
					{ error.message }
					{ info.componentStack }
				</pre>
			</Notification>
		);
	}
}

ErrorHandler.propTypes = {
	/** @ignore */
	children: PropTypes.node.isRequired,
};

export default ErrorHandler;

@@ -1099,16 +1099,57 @@
 Button';
+%0Aimport %7B trackEvent %7D from '../../util';
 %0A%0Aclass 
@@ -1390,16 +1390,66 @@
 nfo ) %7B%0A
+%09%09const %7B viewContext = 'unknown' %7D = this.props;%0A
 %09%09global
@@ -1496,24 +1496,24 @@
 r, info );%0A%0A
-
 %09%09this.setSt
@@ -1531,24 +1531,150 @@
 r, info %7D );
+%0A%0A%09%09trackEvent(%0A%09%09%09'react_error',%0A%09%09%09%60handle_$%7B viewContext %7D_error%60,%0A%09%09%09%60$%7B error?.message %7D%5Cn$%7B info?.componentStack %7D%60%0A%09%09);
 %0A%09%7D%0A%0A%09onErro

Add event tracking to ErrorHandler.