From 79ced6183a5ea88785704c8070406feb1ac2d87b Mon Sep 17 00:00:00 2001 From: Liza Mock Date: Wed, 14 Aug 2024 09:01:27 -0700 Subject: [PATCH] Streamline getting started JS docs (#11034) * Streamline getting started JS docs * update getting started * Update docs/platforms/javascript/common/index.mdx * Update docs/platforms/javascript/common/index.mdx * Update docs/platforms/javascript/common/index.mdx * Update platform-includes/getting-started-config/javascript.react.mdx * update react * add prereqs section * add to js * update note --- docs/platforms/javascript/common/index.mdx | 24 +++++++++++++------ .../getting-started-config/javascript.mdx | 4 ++-- .../javascript.react.mdx | 10 ++++---- .../getting-started-node/javascript.mdx | 18 +++++++------- .../getting-started-run/javascript.mdx | 2 +- .../getting-started-sourcemaps/javascript.mdx | 4 ++-- .../getting-started-verify/javascript.mdx | 2 +- 7 files changed, 37 insertions(+), 27 deletions(-) diff --git a/docs/platforms/javascript/common/index.mdx b/docs/platforms/javascript/common/index.mdx index 067c5d7745b13..9eaa565fb79dd 100644 --- a/docs/platforms/javascript/common/index.mdx +++ b/docs/platforms/javascript/common/index.mdx @@ -1,12 +1,10 @@ - - - We have recently released v8 of the JavaScript SDKs. If you're using version + We've released v8 of the JavaScript SDKs. If you're using version 7.x, we recommend upgrading to the latest version. Check out the [Migration docs](./migration/v7-to-v8/) - to learn how to update your code to be compatible with v8. + to learn how to make the switch. @@ -19,9 +17,21 @@ Check out the other SDKs we support in the left-hand dropdown. + + + + + + +## Prerequisites + + +- A [Sentry account](https://sentry.io/signup/) and [Project](/product/projects/). +- **Recommended:** Latest version of our [JavaScript SDK](./migration/v7-to-v8/). + -Don't already have an account and Sentry project established? Head over to [sentry.io](https://sentry.io/signup/), then return to this page. +Don't have a Sentry account? Sign up for [Sentry for free](https://sentry.io/signup/), then return to this page. @@ -95,7 +105,7 @@ Sentry captures data by using an SDK within your application’s runtime. ## Configure - + Configuration should happen as early as possible in your application's lifecycle. @@ -103,7 +113,7 @@ Configuration should happen as early as possible in your application's lifecycle -Sentry supports multiple versions of React Router. See the React Router Integration docs for information on how to configure Sentry with React Router. +Sentry supports multiple versions of React Router. To learn how to configure them, read the React Router Integration docs. diff --git a/platform-includes/getting-started-config/javascript.mdx b/platform-includes/getting-started-config/javascript.mdx index 964665e6c5c8a..98c0bf4cfbc65 100644 --- a/platform-includes/getting-started-config/javascript.mdx +++ b/platform-includes/getting-started-config/javascript.mdx @@ -1,6 +1,6 @@ -Once this is done, Sentry's JavaScript SDK captures all unhandled exceptions, transactions, and Session Replays, based on the sample rates set. +Once this is done, Sentry's JavaScript SDK will capture all unhandled exceptions, transactions, and Session Replays, based on the sample rates set. -Note that configuration differs slightly depending on how you installed the Sentry SDK. Make sure to follow the instructions in the correct tab, depending on if you installed the Sentry SDK via NPM, using the Loader Script, or via CDN. +Note, that configuration differs slightly depending on how you installed the Sentry SDK. Make sure to follow the instructions in the correct tab, depending on if you installed the Sentry SDK via NPM, using the Loader Script, or via CDN. diff --git a/platform-includes/getting-started-config/javascript.react.mdx b/platform-includes/getting-started-config/javascript.react.mdx index 86d2bc8315f40..32b6458c301d6 100644 --- a/platform-includes/getting-started-config/javascript.react.mdx +++ b/platform-includes/getting-started-config/javascript.react.mdx @@ -1,4 +1,4 @@ -It is important to initialize Sentry as early as possible in your application. We recommend putting the Sentry initialization code into its own file and including that file as the first import in your application entry point: +Sentry should be initialized as early as possible in your application. We recommend putting the Sentry initialization code into its own file and including that file as the first import in your application entry point as shown in the example below: @@ -41,7 +41,7 @@ Sentry.init({ }); ``` -Include the Sentry initialization file as first import statement: +Include the Sentry initialization file as the first import statement: ```javascript // Sentry initialization should be imported first! @@ -54,11 +54,11 @@ const root = createRoot(container); root.render(); ``` -Once this is done, all unhandled exceptions are automatically captured by Sentry. +Once this is done, all unhandled exceptions will be automatically captured by Sentry. ### React 19 Error Reporting -Starting with React 19, the `createRoot` and `hydrateRoot` methods from `react-dom` expose error hooks that are used to capture errors automatically. If you want to customize how errors are handled in specific error hooks, you can use the `Sentry.reactErrorHandler` function. +Starting with React 19, the `createRoot` and `hydrateRoot` methods from `react-dom` will expose error hooks that are used to capture errors automatically. To customize how errors are handled in specific error hooks, use the `Sentry.reactErrorHandler` function. ```javascript import { createRoot } from "react-dom/client"; @@ -77,7 +77,7 @@ const root = createRoot(container, { root.render(); ``` -These hooks apply to all React components mounted to the container passed onto `createRoot`/`hydrateRoot`. If you want more finely grained control over error handling, we recommend adding an `ErrorBoundary` component to your application. +These hooks apply to all React components that are mounted to the container which is passed onto `createRoot`/`hydrateRoot`. For more precise control over error handling, we recommend adding an `ErrorBoundary` component to your application. ### Add Error Boundary diff --git a/platform-includes/getting-started-node/javascript.mdx b/platform-includes/getting-started-node/javascript.mdx index 503f9d2899b3c..f67435e0447b0 100644 --- a/platform-includes/getting-started-node/javascript.mdx +++ b/platform-includes/getting-started-node/javascript.mdx @@ -1,4 +1,4 @@ -Don't already have an account and Sentry project established? Head over to [sentry.io](https://sentry.io/signup/), then return to this page. +If you don't already have an account and a Sentry project established, sign up for [Sentry](https://sentry.io/signup/) for free, then return to this page. ## Install @@ -16,17 +16,17 @@ Sentry captures data by using an SDK within your application’s runtime. ## Configure -Sentry should be initialized as early in your app as possible. It is essential that you call `Sentry.init` before you require any other modules in your application—otherwise, auto-instrumentation of these modules will _not_ work. +Sentry should be initialized in your app as early as possible. It's essential that you call `Sentry.init` before you require any other modules in your application, otherwise, auto-instrumentation won't work for these modules. -Once this is done, Sentry's Node SDK captures unhandled exceptions as well as tracing data for your application. +Once this is done, Sentry's Node SDK will capture unhandled exceptions as well as tracing data for your application. -You need to create a file named `instrument.js` that imports and initializes Sentry: +To import and initialize Sentry, you'll need to create a file named `instrument.js`: -Once you set a `tracesSampleRate`, performance instrumentation is automatically enabled for you. See Automatic Instrumentation to learn about all the things that the SDK automatically instruments for you. +Once you set a `tracesSampleRate`, performance instrumentation will be automatically enabled. Read about Automatic Instrumentation to learn more about what the SDK can automatically instrument for you. You can also manually capture performance data - see Custom Instrumentation for details. @@ -34,14 +34,14 @@ You can also manually capture performance data - see -If you run your application with ESM, you need to import the Sentry Initialization file before importing any other modules. See running Sentry with ESM. -If you are unsure how you are running your application, see Installation Methods for more information. +If you run your application with ESM, you'll need to import the Sentry Initialization file before importing any other modules. Read about running Sentry with ESM. +If you're not sure about how you're running your application, see Installation Methods for more information. @@ -49,7 +49,7 @@ If you are unsure how you are running your application, see diff --git a/platform-includes/getting-started-run/javascript.mdx b/platform-includes/getting-started-run/javascript.mdx index cfcf232464935..3b891ce87d7a1 100644 --- a/platform-includes/getting-started-run/javascript.mdx +++ b/platform-includes/getting-started-run/javascript.mdx @@ -9,6 +9,6 @@ node --import ./instrument.mjs app.mjs -If you cannot run node with `--require` or `--import`, import the Sentry Initialization file directly. +If you can't run node with `--require` or `--import`, import the Sentry Initialization file directly. diff --git a/platform-includes/getting-started-sourcemaps/javascript.mdx b/platform-includes/getting-started-sourcemaps/javascript.mdx index 231f8031fcf2c..56e179fac72de 100644 --- a/platform-includes/getting-started-sourcemaps/javascript.mdx +++ b/platform-includes/getting-started-sourcemaps/javascript.mdx @@ -1,8 +1,8 @@ ## Add Readable Stack Traces to Errors -Depending on how you've set up your project, the stack traces in your Sentry errors probably don't look like your actual code. +Depending on how you've set up your project, the stack traces in your Sentry errors probably won't look like your actual code. -To fix this, upload your source maps to Sentry. The easiest way to do this is to use the Sentry Wizard: +To fix this, upload your source maps to Sentry. The easiest way to do this is by using the Sentry Wizard: diff --git a/platform-includes/getting-started-verify/javascript.mdx b/platform-includes/getting-started-verify/javascript.mdx index 087d38879d7a5..5c46f93e33ff3 100644 --- a/platform-includes/getting-started-verify/javascript.mdx +++ b/platform-includes/getting-started-verify/javascript.mdx @@ -6,6 +6,6 @@ setTimeout(() => { -Errors triggered from within Browser DevTools are sandboxed, so will not trigger an error handler. Place the snippet directly in your code instead. +Errors triggered from within Browser DevTools are sandboxed and won't trigger an error handler. Place the snippet directly in your code instead.