From be114dbef998dff7a205576aabdbeaf798fdb557 Mon Sep 17 00:00:00 2001 From: David Cramer Date: Tue, 21 May 2019 17:43:55 -0700 Subject: [PATCH 1/3] feat: Improve React docs --- .../javascript/getting-started-dsn/react.md | 39 ++----------------- .../getting-started-install/browsernpm.md | 10 +---- .../getting-started-install/react.md | 8 ++-- .../platforms/javascript/react.md | 16 ++++++-- 4 files changed, 22 insertions(+), 51 deletions(-) diff --git a/src/collections/_documentation/platforms/javascript/getting-started-dsn/react.md b/src/collections/_documentation/platforms/javascript/getting-started-dsn/react.md index 3a86ab84dffe78..a1581f2b2fd55a 100644 --- a/src/collections/_documentation/platforms/javascript/getting-started-dsn/react.md +++ b/src/collections/_documentation/platforms/javascript/getting-started-dsn/react.md @@ -1,42 +1,9 @@ - -If you’re using React 16 or above, Error Boundaries are an important tool for defining the behavior of your application in the face of errors. Be sure to send errors they catch to Sentry using `Sentry.captureException`, and optionally this is also a great opportunity to surface User Feedback. +You should `init` the Sentry browser SDK as soon as possible during your application load up, before initializing React: ```jsx import * as Sentry from '@sentry/browser'; -// Sentry.init({ -// dsn: "___PUBLIC_DSN___" -// }); -// should have been called before using it here -// ideally before even rendering your react app +Sentry.init({ dsn: '___PUBLIC_DSN___' }); -class ExampleBoundary extends Component { - constructor(props) { - super(props); - this.state = { error: null }; - } - - componentDidCatch(error, errorInfo) { - this.setState({ error }); - Sentry.withScope(scope => { - Object.keys(errorInfo).forEach(key => { - scope.setExtra(key, errorInfo[key]); - }); - Sentry.captureException(error); - }); - } - - render() { - if (this.state.error) { - //render fallback UI - return ( - Sentry.showReportDialog()}>Report feedback - ); - } else { - //when there's not an error, render children untouched - return this.props.children; - } - } -} +ReactDOM.render(, document.querySelector('#app')); ``` - \ No newline at end of file diff --git a/src/collections/_documentation/platforms/javascript/getting-started-install/browsernpm.md b/src/collections/_documentation/platforms/javascript/getting-started-install/browsernpm.md index 2f48baa6ae2bc8..7ee8c319fe242e 100644 --- a/src/collections/_documentation/platforms/javascript/getting-started-install/browsernpm.md +++ b/src/collections/_documentation/platforms/javascript/getting-started-install/browsernpm.md @@ -1,13 +1,7 @@ -If you are using `yarn` you can add our package as a dependency: +Add the `@sentry/browser` to your project: ```bash -$ yarn add @sentry/browser@{% sdk_version sentry.javascript.browser %} -``` - -Or alternatively, you can npm install it: - -```bash -$ npm install @sentry/browser@{% sdk_version sentry.javascript.browser %} +$ npm install --save @sentry/browser ``` You can also [use our more convenient CDN version](?platform=browser). diff --git a/src/collections/_documentation/platforms/javascript/getting-started-install/react.md b/src/collections/_documentation/platforms/javascript/getting-started-install/react.md index c0ba4e41796eba..141b4cc566df9b 100644 --- a/src/collections/_documentation/platforms/javascript/getting-started-install/react.md +++ b/src/collections/_documentation/platforms/javascript/getting-started-install/react.md @@ -1,9 +1,9 @@ -The quickest way to get started is to use the CDN hosted version of the JavaScript browser SDK: +Add the `@sentry/browser` to your project: -```html - +```bash +$ npm install --save @sentry/browser ``` {% wizard hide %} -You can also [NPM install our browser library](?platform=browsernpm). +You can also [use our more convenient CDN version](?platform=browser). {% endwizard %} diff --git a/src/collections/_documentation/platforms/javascript/react.md b/src/collections/_documentation/platforms/javascript/react.md index dbf4d925792224..601ad3b06a7ef5 100644 --- a/src/collections/_documentation/platforms/javascript/react.md +++ b/src/collections/_documentation/platforms/javascript/react.md @@ -3,18 +3,28 @@ title: React sidebar_order: 30 --- -To use Sentry with your React application, you will need to use `@sentry/browser` (Sentry’s browser JavaScript SDK). +To use Sentry with your React application, you will need to use `@sentry/browser` (Sentry’s browser JavaScript SDK). + +{% include_relative getting-started-install/react.md %} + +### Connecting the SDK to Sentry + +After you've completed setting up a project in Sentry, Sentry will give you a value which we call a _DSN_ or _Data Source Name_. It looks a lot like a standard URL, but it’s just a representation of the configuration required by the Sentry SDKs. It consists of a few pieces, including the protocol, public key, the server address, and the project identifier. + +{% include_relative getting-started-dsn/react.md %} + On its own, `@sentry/browser` will report any uncaught exceptions triggered from your application. +## Error Boundaries + If you’re using React 16 or above, Error Boundaries are an important tool for defining the behavior of your application in the face of errors. Be sure to send errors they catch to Sentry using `Sentry.captureException`. This is also a great opportunity to collect user feedback by using `Sentry.showReportDialog`. {% capture __alert_content -%} -One important thing to note about the behavior of error boundaries in development mode is that React will rethrow errors they catch. This will result in errors being reported twice to Sentry with the above setup, but this won’t occur in your production build. +In development mode React will rethrow errors caught within an error boundary. This will result in errors being reported twice to Sentry with the above setup, but this won’t occur in your production build. {%- endcapture -%} {%- include components/alert.html title="Note" content=__alert_content - level="info" %} ```jsx From 4bd5d50784515be9be93082d9ae7f5b73860e764 Mon Sep 17 00:00:00 2001 From: David Cramer Date: Wed, 22 May 2019 11:07:30 -0700 Subject: [PATCH 2/3] fix: Correct React syntax --- .../platforms/javascript/getting-started-dsn/react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/collections/_documentation/platforms/javascript/getting-started-dsn/react.md b/src/collections/_documentation/platforms/javascript/getting-started-dsn/react.md index a1581f2b2fd55a..5981d7acfd2b13 100644 --- a/src/collections/_documentation/platforms/javascript/getting-started-dsn/react.md +++ b/src/collections/_documentation/platforms/javascript/getting-started-dsn/react.md @@ -5,5 +5,5 @@ import * as Sentry from '@sentry/browser'; Sentry.init({ dsn: '___PUBLIC_DSN___' }); -ReactDOM.render(, document.querySelector('#app')); +ReactDOM.render(, document.querySelector('#app')); ``` From 910f9124aafa107e0171ad450c908693a8455c4c Mon Sep 17 00:00:00 2001 From: David Cramer Date: Wed, 22 May 2019 11:27:50 -0700 Subject: [PATCH 3/3] ref: Dont duplicate browsernpm content in react --- .../javascript/getting-started-install/browsernpm.md | 2 ++ .../javascript/getting-started-install/react.md | 10 +--------- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/collections/_documentation/platforms/javascript/getting-started-install/browsernpm.md b/src/collections/_documentation/platforms/javascript/getting-started-install/browsernpm.md index 7ee8c319fe242e..141b4cc566df9b 100644 --- a/src/collections/_documentation/platforms/javascript/getting-started-install/browsernpm.md +++ b/src/collections/_documentation/platforms/javascript/getting-started-install/browsernpm.md @@ -4,4 +4,6 @@ Add the `@sentry/browser` to your project: $ npm install --save @sentry/browser ``` +{% wizard hide %} You can also [use our more convenient CDN version](?platform=browser). +{% endwizard %} diff --git a/src/collections/_documentation/platforms/javascript/getting-started-install/react.md b/src/collections/_documentation/platforms/javascript/getting-started-install/react.md index 141b4cc566df9b..327cb5beca83cb 100644 --- a/src/collections/_documentation/platforms/javascript/getting-started-install/react.md +++ b/src/collections/_documentation/platforms/javascript/getting-started-install/react.md @@ -1,9 +1 @@ -Add the `@sentry/browser` to your project: - -```bash -$ npm install --save @sentry/browser -``` - -{% wizard hide %} -You can also [use our more convenient CDN version](?platform=browser). -{% endwizard %} +{% include_relative getting-started-install/browsernpm.md %}