This repository has been archived by the owner on May 3, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 86
docs(error-reporting): add reporting client errors recipe #360
Merged
Merged
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
855c0ae
docs(error-reporting): add reporting client errors recipe
JAdshead 2d9eaf4
Merge branch 'main' into docs/report-client-errors
JAdshead d427b97
Merge branch 'main' into docs/report-client-errors
Francois-Esquire 6146953
docs(reporting): update
JAdshead a6aea8c
Merge branch 'main' into docs/report-client-errors
Francois-Esquire 08ea1b6
Merge branch 'main' into docs/report-client-errors
1fc5030
Merge branch 'main' into docs/report-client-errors
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
<!--ONE-DOCS-HIDE start--> | ||
[👈 Return to Overview](../README.md) | ||
<!--ONE-DOCS-HIDE end--> | ||
|
||
# Server Routes | ||
|
||
Useful `one-app` specific server routes: | ||
|
||
* **GET** `/_/status`: Basic health check for the `one-app` server, always returns `200`. | ||
|
||
* **POST** `/_/report/security/csp-violation`: Can be provided to the `report-uri` directive to have [CSP violations](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP#Enabling_reporting) reported back to the `one-app` server. Do not hard code this,instead use the [ONE_CLIENT_CSP_REPORTING_URL](https://github.com/americanexpress/one-app/blob/main/docs/api/server/Environment-Variables.md#one_client_reporting_url) environment variable. While this is helpful during development we recommended that you report to another server to reduce load on the `one-app` server when running in production. | ||
|
||
* **POST** `/_/report/errors`: Can be used to [report client errors](../../recipes/Reporting-Client-Errors.md) to the `one-app` server. Do not hard code this, instead use the [`ONE_CLIENT_REPORTING_URL`](https://github.com/americanexpress/one-app/blob/main/docs/api/server/Environment-Variables.md#one_client_reporting_url) environment variable. While this is helpful during development we recommended that you report to another server to reduce load on the `one-app` server when running in production. | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,92 @@ | ||
<!--ONE-DOCS-HIDE start--> | ||
[👈 Return to Overview](../README.md) | ||
<!--ONE-DOCS-HIDE end--> | ||
|
||
# Reporting Client Errors | ||
|
||
## `errorReporting` Duck | ||
|
||
`one-app` includes the [`errorReporting`](https://github.com/americanexpress/one-app-ducks#errorreporting-duck) | ||
duck from `one-app-ducks` which will log any errors reported by dispatching the [`addErrorToReport`](https://github.com/americanexpress/one-app-ducks#adderrortoreport) action. This provides your modules with a simple and efficient way to report errors from the client. | ||
|
||
When `addErrorToReport` is dispatched during SSR the `errorReporting` duck will log the reported error | ||
JAdshead marked this conversation as resolved.
Show resolved
Hide resolved
|
||
to `console.error`. If dispatched on the client `addErrorToReport` will result in the error being `POST`ed | ||
to the `reportingUrl` configured by the [`ONE_CLIENT_REPORTING_URL`](https://github.com/americanexpress/one-app/blob/main/docs/api/server/Environment-Variables.md#one_client_reporting_url). | ||
JAdshead marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
> `ONE_CLIENT_REPORTING_URL` defaults to `/_/report/errors` in development but it will need to be set in production. | ||
|
||
When errors are reported to `/_/report/errors`, `one-app` will format and log them through `console.error`. Every error will be named `ClientReportedError` and will include any additional data under `metaData`. | ||
|
||
> Please note that when running in development `one-app` does not log the `ClientReportedError`. | ||
|
||
### Example using React Error Boundary | ||
|
||
`addErrorToReport` accepts two arguments: | ||
|
||
| Argument | Type | Description | | ||
|---|---|---| | ||
| `error` | `Object` | (required) This is the error stack | | ||
| `otherData` | `Object` | This is any other data that you'd like to send alongside the error message| | ||
|
||
Below is an example of how you could `dispatch` the `addErrorToReport` action in an error boundary component: | ||
|
||
```jsx | ||
import React from 'react'; | ||
import { connect } from 'react-redux'; | ||
import PropTypes from 'prop-types'; | ||
import { addErrorToReport } from '@americanexpress/one-app-ducks'; | ||
|
||
class ErrorBoundary extends React.Component { | ||
constructor(props) { | ||
super(props); | ||
this.state = { error: null }; | ||
} | ||
|
||
static getDerivedStateFromError(error) { | ||
// Update state so the next render will show the fallback UI. | ||
return { error }; | ||
} | ||
|
||
componentDidCatch(error) { | ||
const { dispatch } = this.props; | ||
dispatch( | ||
addErrorToReport(error, { | ||
// example otherData | ||
errorReportedBy: 'ErrorBoundary', | ||
}) | ||
); | ||
} | ||
|
||
render() { | ||
const { | ||
state: { error }, | ||
props: { children }, | ||
} = this; | ||
|
||
if (error) { | ||
// You can render any custom fallback UI | ||
return <h1>Something went wrong.</h1>; | ||
} | ||
|
||
return ( | ||
<div> | ||
<h1>Error Boundary</h1> | ||
{children} | ||
</div> | ||
); | ||
} | ||
} | ||
|
||
ErrorBoundary.propTypes = { | ||
children: PropTypes.node, | ||
dispatch: PropTypes.func.isRequired, | ||
}; | ||
|
||
export default connect()(ErrorBoundary); | ||
``` | ||
|
||
Read more about [error boundaries](https://reactjs.org/docs/error-boundaries.html) the React website. | ||
JAdshead marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
<!--ONE-DOCS-HIDE start--> | ||
[☝️ Return To Top](#reporting-client-errors) | ||
<!--ONE-DOCS-HIDE end--> |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
having the additional click was very irritating