Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JS Error Tracking: Allow custom error reporting logic to be called in Error Boundaries via a WP action hook #42024

Merged
merged 6 commits into from
Jul 12, 2022
Merged

JS Error Tracking: Allow custom error reporting logic to be called in Error Boundaries via a WP action hook #42024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0add211
Call WP action hook that allow other consuming code to set a custom a…
fullofcaffeine Jun 28, 2022
f8e14dc
Remove doAction from edit navigation error boundary
fullofcaffeine Jul 1, 2022
ee5398a
Rename action
fullofcaffeine Jul 8, 2022
32671b5
Add unit tests
fullofcaffeine Jul 8, 2022
6159e86
Document the new action
fullofcaffeine Jul 8, 2022
8f2a522
Update editor-actions.md
fullofcaffeine Jul 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions docs/reference-guides/actions/editor-actions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Editor Actions

To help you hook into the editor lifecycle and extend it, the following Actions are exposed:

### Error Boundaries

#### `editor.ErrorBoundary.errorLogged`

Allows you to hook into the editor Error Boundaries' `componentDidCatch` and gives you access to the error object.

You can use if you want to get hold of the error object that's handled by the boundaries, i.e to send them to an external error tracking tool.

_Example_:

```js
addAction(
'editor.ErrorBoundary.errorLogged',
'mu-plugin/error-capture-setup',
( error ) => {
// error is the exception's error object
ErrorCaptureTool.captureError( error );
}
);
```
3 changes: 3 additions & 0 deletions packages/customize-widgets/src/components/error-boundary/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { Warning } from '@wordpress/block-editor';
import { useCopyToClipboard } from '@wordpress/compose';
import { doAction } from '@wordpress/hooks';

function CopyButton( { text, children } ) {
const ref = useCopyToClipboard( text );
Expand All @@ -26,6 +27,8 @@ export default class ErrorBoundary extends Component {

componentDidCatch( error ) {
this.setState( { error } );

doAction( 'editor.ErrorBoundary.errorLogged', error );
}

render() {
Expand Down
38 changes: 38 additions & 0 deletions packages/customize-widgets/src/components/test/error-boundary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/**
Copy link
Member Author

@fullofcaffeine fullofcaffeine Jul 8, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The unit-tests are identical but simple enough, but there's one for each error boundary, which is a symptom of the existing unDRYness for Error Boundaries. We can turn them into a single test once we work on #42024 (comment).

Copy link
Member Author

@fullofcaffeine fullofcaffeine Jul 8, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since we plan to work on #42024 (comment) soon, I'll abstain from trying to DRY the unit-tests (by extracting the common logic into a shared function or something along those lines, for example).

* WordPress dependencies
*/
import * as wpHooks from '@wordpress/hooks';
/**
* Internal dependencies
*/
import ErrorBoundary from '../error-boundary';
/**
* External dependencies
*/
import { render } from '@testing-library/react';

const theError = new Error( 'Kaboom' );

const ChildComponent = () => {
throw theError;
};

describe( 'Error Boundary', () => {
describe( 'when error is thrown from a Child component', () => {
it( 'calls the `editor.ErrorBoundary.errorLogged` hook action with the error object', () => {
const doAction = jest.spyOn( wpHooks, 'doAction' );

render(
<ErrorBoundary>
<ChildComponent />
</ErrorBoundary>
);

expect( doAction ).toHaveBeenCalledWith(
'editor.ErrorBoundary.errorLogged',
theError
);
expect( console ).toHaveErrored();
} );
} );
} );
5 changes: 5 additions & 0 deletions packages/edit-site/src/components/error-boundary/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
*/
import { Component } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { doAction } from '@wordpress/hooks';

/**
* Internal dependencies
Expand All @@ -20,6 +21,10 @@ export default class ErrorBoundary extends Component {
};
}

componentDidCatch( error ) {
gziolo marked this conversation as resolved.
Show resolved Hide resolved
doAction( 'editor.ErrorBoundary.errorLogged', error );
}

static getDerivedStateFromError( error ) {
return { error };
}
Expand Down
38 changes: 38 additions & 0 deletions packages/edit-site/src/components/test/error-boundary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/**
* WordPress dependencies
*/
import * as wpHooks from '@wordpress/hooks';
/**
* Internal dependencies
*/
import ErrorBoundary from '../error-boundary';
/**
* External dependencies
*/
import { render } from '@testing-library/react';

const theError = new Error( 'Kaboom' );

const ChildComponent = () => {
throw theError;
};

describe( 'Error Boundary', () => {
describe( 'when error is thrown from a Child component', () => {
it( 'calls the `editor.ErrorBoundary.errorLogged` hook action with the error object', () => {
const doAction = jest.spyOn( wpHooks, 'doAction' );

render(
<ErrorBoundary>
<ChildComponent />
</ErrorBoundary>
);

expect( doAction ).toHaveBeenCalledWith(
'editor.ErrorBoundary.errorLogged',
theError
);
expect( console ).toHaveErrored();
} );
} );
} );
3 changes: 3 additions & 0 deletions packages/edit-widgets/src/components/error-boundary/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { Warning } from '@wordpress/block-editor';
import { useCopyToClipboard } from '@wordpress/compose';
import { doAction } from '@wordpress/hooks';

function CopyButton( { text, children } ) {
const ref = useCopyToClipboard( text );
Expand All @@ -29,6 +30,8 @@ export default class ErrorBoundary extends Component {

componentDidCatch( error ) {
this.setState( { error } );

doAction( 'editor.ErrorBoundary.errorLogged', error );
}

reboot() {
Expand Down
38 changes: 38 additions & 0 deletions packages/edit-widgets/src/components/test/error-boundary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/**
* WordPress dependencies
*/
import * as wpHooks from '@wordpress/hooks';
/**
* Internal dependencies
*/
import ErrorBoundary from '../error-boundary';
/**
* External dependencies
*/
import { render } from '@testing-library/react';

const theError = new Error( 'Kaboom' );

const ChildComponent = () => {
throw theError;
};

describe( 'Error Boundary', () => {
describe( 'when error is thrown from a Child component', () => {
it( 'calls the `editor.ErrorBoundary.errorLogged` hook action with the error object', () => {
const doAction = jest.spyOn( wpHooks, 'doAction' );

render(
<ErrorBoundary>
<ChildComponent />
</ErrorBoundary>
);

expect( doAction ).toHaveBeenCalledWith(
'editor.ErrorBoundary.errorLogged',
theError
);
expect( console ).toHaveErrored();
} );
} );
} );
3 changes: 3 additions & 0 deletions packages/editor/src/components/error-boundary/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { Button } from '@wordpress/components';
import { select } from '@wordpress/data';
import { Warning } from '@wordpress/block-editor';
import { useCopyToClipboard } from '@wordpress/compose';
import { doAction } from '@wordpress/hooks';

/**
* Internal dependencies
Expand Down Expand Up @@ -36,6 +37,8 @@ class ErrorBoundary extends Component {

componentDidCatch( error ) {
this.setState( { error } );

doAction( 'editor.ErrorBoundary.errorLogged', error );
}

reboot() {
Expand Down