Skip to content

Commit 03f8c2e

Browse files
felixarntzfelixarntz
committed
Merge branch 'develop' into fix/1130-e2e-tests
2 parents 3767d5f + c872b3b commit 03f8c2e

14 files changed

+246
-363
lines changed

‎assets/js/components/ErrorHandler/ErrorComponent.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { useState } from '@wordpress/element';
5+
6+
/**
7+
* Internal dependencies
8+
*/
9+
// eslint-disable-next-line @wordpress/dependency-group
10+
import Button from 'GoogleComponents/button';
11+
12+
export const ThrowError = ( event ) => {
13+
if ( event ) {
14+
event.preventDefault();
15+
}
16+
17+
throw new Error( 'Something bad happened. 💣 (On purpose; ErrorComponent was used to simulate an error.)' );
18+
};
19+
20+
const ErrorComponent = () => {
21+
const [ shouldThrow, setShouldThrow ] = useState( false );
22+
23+
if ( shouldThrow ) {
24+
ThrowError();
25+
}
26+
27+
return (
28+
<Button
29+
danger
30+
onClick={ () => {
31+
setShouldThrow( true );
32+
} }
33+
>
34+
Simulate an error
35+
</Button>
36+
);
37+
};
38+
39+
export default ErrorComponent;

‎assets/js/components/ErrorHandler/index.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import PropTypes from 'prop-types';
5+
6+
/**
7+
* WordPress dependencies
8+
*/
9+
import { Component } from '@wordpress/element';
10+
import { __ } from '@wordpress/i18n';
11+
12+
/**
13+
* Internal dependencies
14+
*/
15+
import Notification from 'GoogleComponents/notifications/notification';
16+
17+
class ErrorHandler extends Component {
18+
constructor( props ) {
19+
super( props );
20+
21+
this.state = {
22+
error: null,
23+
info: null,
24+
};
25+
}
26+
27+
componentDidCatch( error, info ) {
28+
global.console.error( 'Caught an error:', error, info );
29+
30+
this.setState( { error, info } );
31+
}
32+
33+
render() {
34+
const { children } = this.props;
35+
const { error, info } = this.state;
36+
37+
// If there is no caught error, render the children components normally.
38+
if ( ! error ) {
39+
return children;
40+
}
41+
42+
return (
43+
<Notification
44+
id="googlesitekit-error"
45+
title={ __( 'Site Kit encountered an error', 'google-site-kit' ) }
46+
description={ <code>{ error.message }</code> }
47+
isDismissable={ false }
48+
format="small"
49+
type="win-error"
50+
>
51+
<pre>{ info.componentStack }</pre>
52+
</Notification>
53+
);
54+
}
55+
}
56+
57+
ErrorHandler.defaultProps = {};
58+
59+
ErrorHandler.propTypes = {
60+
/** @ignore */
61+
children: PropTypes.node.isRequired,
62+
};
63+
64+
export default ErrorHandler;

‎assets/js/components/activation/activation-app.js‎

Lines changed: 7 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -19,56 +19,20 @@
1919
/**
2020
* WordPress dependencies
2121
*/
22-
import { Component, Fragment } from '@wordpress/element';
23-
24-
/**
25-
* External dependencies
26-
*/
27-
import { trackEvent } from 'GoogleUtil';
22+
import { Component } from '@wordpress/element';
23+
import { __ } from '@wordpress/i18n';
2824

2925
/**
3026
* Internal dependencies
3127
*/
28+
// eslint-disable-next-line @wordpress/dependency-group
29+
import ErrorHandler from 'GoogleComponents/ErrorHandler';
30+
import { trackEvent } from 'GoogleUtil';
3231
import { ActivationMain } from './activation-main';
33-
import Notification from '../notifications/notification';
3432
import NotificationCounter from '../notifications/notification-counter';
35-
import { __ } from '@wordpress/i18n';
3633

3734
export class ActivationApp extends Component {
38-
constructor( props ) {
39-
super( props );
40-
this.state = {
41-
hasError: false,
42-
};
43-
}
44-
45-
componentDidCatch( error, info ) {
46-
this.setState( {
47-
hasError: true,
48-
error,
49-
info,
50-
} );
51-
}
52-
5335
render() {
54-
const {
55-
hasError,
56-
error,
57-
info,
58-
} = this.state;
59-
60-
if ( hasError ) {
61-
return <Notification
62-
id="googlesitekit-error"
63-
key="googlesitekit-error"
64-
title={ error.message }
65-
description={ info.componentStack }
66-
dismiss={ '' }
67-
isDismissable={ false }
68-
format="small"
69-
type="win-error"
70-
/>;
71-
}
7236
const { proxySetupURL, splashURL } = global._googlesitekitBase;
7337
const { canViewDashboard } = global.googlesitekit.permissions;
7438
const { dashboardPermalink } = global.googlesitekit;
@@ -82,7 +46,7 @@ export class ActivationApp extends Component {
8246
}
8347

8448
return (
85-
<Fragment>
49+
<ErrorHandler>
8650
<NotificationCounter />
8751
<ActivationMain
8852
buttonURL={ buttonURL }
@@ -91,7 +55,7 @@ export class ActivationApp extends Component {
9155
trackEvent( 'plugin_setup', proxySetupURL ? 'proxy_start_setup_banner' : 'goto_sitekit' );
9256
} }
9357
/>
94-
</Fragment>
58+
</ErrorHandler>
9559
);
9660
}
9761
}

‎assets/js/components/dashboard/dashboard-app.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,19 +27,20 @@ import 'GoogleComponents/publisher-wins';
2727
/**
2828
* WordPress dependencies
2929
*/
30-
import { Component, Fragment } from '@wordpress/element';
30+
import { Component } from '@wordpress/element';
3131
import { __ } from '@wordpress/i18n';
3232

3333
/**
3434
* Internal dependencies
3535
*/
3636
import DashboardMain from './dashboard-main';
3737
import DashboardNotifications from './dashboard-notifications';
38+
import ErrorHandler from 'GoogleComponents/ErrorHandler';
3839

3940
class DashboardApp extends Component {
4041
render() {
4142
return (
42-
<Fragment>
43+
<ErrorHandler>
4344
<Header />
4445
<DashboardNotifications />
4546
<div className="googlesitekit-module-page">
@@ -75,7 +76,7 @@ class DashboardApp extends Component {
7576
</div>
7677
</div>
7778
</div>
78-
</Fragment>
79+
</ErrorHandler>
7980
);
8081
}
8182
}

‎assets/js/googlesitekit-adminbar.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,14 @@ import 'GoogleModules';
3434
* WordPress dependencies
3535
*/
3636
import { doAction } from '@wordpress/hooks';
37-
import { Component, Fragment, render } from '@wordpress/element';
37+
import { Component, render } from '@wordpress/element';
3838
import { __ } from '@wordpress/i18n';
3939

4040
/**
4141
* Internal dependencies.
4242
*/
4343
import AdminbarModules from 'GoogleComponents/adminbar/adminbar-modules';
44+
import ErrorHandler from 'GoogleComponents/ErrorHandler';
4445

4546
export class GoogleSitekitAdminbar extends Component {
4647
constructor( props ) {
@@ -77,7 +78,7 @@ export class GoogleSitekitAdminbar extends Component {
7778
} = global.googlesitekit;
7879

7980
return (
80-
<Fragment>
81+
<ErrorHandler>
8182
<div className="mdc-layout-grid">
8283
<div className="mdc-layout-grid__inner">
8384
<div className="
@@ -125,7 +126,7 @@ export class GoogleSitekitAdminbar extends Component {
125126
>
126127
{ __( 'More details', 'google-site-kit' ) }
127128
</Link>
128-
</Fragment>
129+
</ErrorHandler>
129130
);
130131
}
131132
}

‎assets/js/googlesitekit-dashboard-details.js‎

Lines changed: 7 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
/**
2121
* External dependencies
2222
*/
23-
import Notification from 'GoogleComponents/notifications/notification';
2423
import 'GoogleComponents/notifications';
2524
import { loadTranslations } from 'GoogleUtil';
2625
import 'GoogleModules';
@@ -35,46 +34,17 @@ import { Component, render } from '@wordpress/element';
3534
/**
3635
* Internal dependencies.
3736
*/
37+
// eslint-disable-next-line @wordpress/dependency-group
3838
import DashboardDetailsApp from 'GoogleComponents/dashboard-details/dashboard-details-app';
39+
import ErrorHandler from 'GoogleComponents/ErrorHandler';
3940

4041
class GoogleSitekitDashboardDetails extends Component {
41-
constructor( props ) {
42-
super( props );
43-
44-
this.state = {
45-
hasError: false,
46-
};
47-
}
48-
49-
componentDidCatch( error, info ) {
50-
this.setState( {
51-
hasError: true,
52-
error,
53-
info,
54-
} );
55-
}
56-
5742
render() {
58-
const {
59-
hasError,
60-
error,
61-
info,
62-
} = this.state;
63-
64-
if ( hasError ) {
65-
return <Notification
66-
id={ 'googlesitekit-error' }
67-
key={ 'googlesitekit-error' }
68-
title={ error.message }
69-
description={ info.componentStack }
70-
dismiss={ '' }
71-
isDismissable={ false }
72-
format="small"
73-
type="win-error"
74-
/>;
75-
}
76-
77-
return <DashboardDetailsApp />;
43+
return (
44+
<ErrorHandler>
45+
<DashboardDetailsApp />
46+
</ErrorHandler>
47+
);
7848
}
7949
}
8050

‎assets/js/googlesitekit-dashboard-splash.js‎

Lines changed: 5 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -20,64 +20,30 @@
2020
* External dependencies
2121
*/
2222
import { clearWebStorage, loadTranslations } from 'GoogleUtil';
23-
import Notification from 'GoogleComponents/notifications/notification';
2423
import 'GoogleComponents/notifications';
2524

2625
/**
2726
* WordPress dependencies
2827
*/
2928
import domReady from '@wordpress/dom-ready';
30-
import { Component, render, Fragment } from '@wordpress/element';
29+
import { Component, render } from '@wordpress/element';
3130
import { doAction } from '@wordpress/hooks';
3231

3332
/**
3433
* Internal dependencies
3534
*/
35+
// eslint-disable-next-line @wordpress/dependency-group
36+
import ErrorHandler from 'GoogleComponents/ErrorHandler';
3637
import DashboardSplashApp from './components/dashboard-splash/dashboard-splash-app';
3738
import NotificationCounter from './components/notifications/notification-counter';
3839

3940
class GoogleSitekitDashboardSplash extends Component {
40-
constructor( props ) {
41-
super( props );
42-
43-
this.state = {
44-
hasError: false,
45-
};
46-
}
47-
48-
componentDidCatch( error, info ) {
49-
this.setState( {
50-
hasError: true,
51-
error,
52-
info,
53-
} );
54-
}
55-
5641
render() {
57-
const {
58-
hasError,
59-
error,
60-
info,
61-
} = this.state;
62-
63-
if ( hasError ) {
64-
return <Notification
65-
id={ 'googlesitekit-error' }
66-
key={ 'googlesitekit-error' }
67-
title={ error.message }
68-
description={ info.componentStack }
69-
dismiss={ '' }
70-
isDismissable={ false }
71-
format="small"
72-
type="win-error"
73-
/>;
74-
}
75-
7642
return (
77-
<Fragment>
43+
<ErrorHandler>
7844
<NotificationCounter />
7945
<DashboardSplashApp />
80-
</Fragment>
46+
</ErrorHandler>
8147
);
8248
}
8349
}

0 commit comments

Comments
 (0)