Skip to content

Commit

Permalink
Streamline getting started JS docs (#11034)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
lizokm committed Aug 14, 2024
1 parent 49dd246 commit 79ced61
Show file tree
Hide file tree
Showing 7 changed files with 37 additions and 27 deletions.
24 changes: 17 additions & 7 deletions docs/platforms/javascript/common/index.mdx
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
<PlatformContent includePath="getting-started-primer" />

<PlatformSection notSupported={["javascript.capacitor", "javascript.cordova"]}>

<Note>
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.
</Note>

</PlatformSection>
Expand All @@ -19,9 +17,21 @@ Check out the other SDKs we support in the left-hand dropdown.

</Alert>

<PlatformContent includePath="getting-started-primer" />

</PlatformSection>

<PlatformSection supported={["javascript", "javascript.angular", "javascript.nextjs", "javascript.remix", "javascript.sveltekit", "javascript.bun", "javascript.ember", "javascript.angular", "javascript.deno","javascript.nuxt", "javascript.react", "javascript.solid", "javascript.svelte", "javascript.vue"]}>

## Prerequisites


- A [Sentry account](https://sentry.io/signup/) and [Project](/product/projects/).
- **Recommended:** Latest version of our [JavaScript SDK](./migration/v7-to-v8/).

</PlatformSection>

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.

<PlatformSection noGuides>

Expand Down Expand Up @@ -95,15 +105,15 @@ Sentry captures data by using an SDK within your application’s runtime.

## Configure

<PlatformSection notSupported={["javascript.nextjs", "javascript.astro"]}>
<PlatformSection notSupported={["javascript.nextjs", "javascript.astro", "javascript.react"]}>

Configuration should happen as early as possible in your application's lifecycle.

</PlatformSection>

<PlatformSection supported={["javascript.react"]}>

Sentry supports multiple versions of React Router. See the <PlatformLink to="/configuration/integrations/react-router/">React Router Integration</PlatformLink> 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 <PlatformLink to="/configuration/integrations/react-router/">React Router Integration</PlatformLink> docs.

</PlatformSection>

Expand Down
4 changes: 2 additions & 2 deletions platform-includes/getting-started-config/javascript.mdx
Original file line number Diff line number Diff line change
@@ -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.

<SignInNote />

Expand Down
10 changes: 5 additions & 5 deletions platform-includes/getting-started-config/javascript.react.mdx
Original file line number Diff line number Diff line change
@@ -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:

<SignInNote />

Expand Down Expand Up @@ -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!
Expand All @@ -54,11 +54,11 @@ const root = createRoot(container);
root.render(<App />);
```

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";
Expand All @@ -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

Expand Down
18 changes: 9 additions & 9 deletions platform-includes/getting-started-node/javascript.mdx
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -16,40 +16,40 @@ 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 applicationotherwise, 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`:

<PlatformContent includePath="getting-started-config" />

<OnboardingOption optionId="performance">

Once you set a `tracesSampleRate`, performance instrumentation is automatically enabled for you. See <PlatformLink to="/tracing/instrumentation/automatic-instrumentation">Automatic Instrumentation</PlatformLink> 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 <PlatformLink to="/tracing/instrumentation/automatic-instrumentation">Automatic Instrumentation</PlatformLink> to learn more about what the SDK can automatically instrument for you.

You can also manually capture performance data - see <PlatformLink to="/tracing/instrumentation/custom-instrumentation">Custom Instrumentation</PlatformLink> for details.

</OnboardingOption>

## Use

You need to require or import the `instrument.js` file before requiring any other modules in your application. This is necessary to ensure that Sentry can automatically instrument all modules in your application:
To ensure that Sentry can automatically instrument all modules in your application, you'll need to require or import the `instrument.js` file before requiring any other modules in your application:

<PlatformContent includePath="getting-started-use" />

<Alert level="warning" title="Running with ESM">

If you run your application with ESM, you need to import the Sentry Initialization file before importing any other modules. See <PlatformLink to="/install/esm">running Sentry with ESM</PlatformLink>.
If you are unsure how you are running your application, see <PlatformLink to="/install">Installation Methods</PlatformLink> 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 <PlatformLink to="/install/esm">running Sentry with ESM</PlatformLink>.
If you're not sure about how you're running your application, see <PlatformLink to="/install">Installation Methods</PlatformLink> for more information.

</Alert>

<PlatformContent includePath="getting-started-sourcemaps" />

## Verify

This snippet includes an intentional error, so you can test that everything is working as soon as you set it up.
This snippet includes an intentional error, so you can test to make sure that everything is working as soon as you set it up.

<PlatformContent includePath="getting-started-verify" />

Expand Down
2 changes: 1 addition & 1 deletion platform-includes/getting-started-run/javascript.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@ node --import ./instrument.mjs app.mjs

<Alert level="warning" title="Alternative">

If you cannot run node with `--require` or `--import`, <PlatformLink to="/initialize-sentry#importing-the-sentry-initialization-file-directly">import the Sentry Initialization file directly</PlatformLink>.
If you can't run node with `--require` or `--import`, <PlatformLink to="/initialize-sentry#importing-the-sentry-initialization-file-directly">import the Sentry Initialization file directly</PlatformLink>.

</Alert>
4 changes: 2 additions & 2 deletions platform-includes/getting-started-sourcemaps/javascript.mdx
Original file line number Diff line number Diff line change
@@ -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:

<Include name="sourcemaps-wizard-instructions.mdx" />

Expand Down
2 changes: 1 addition & 1 deletion platform-includes/getting-started-verify/javascript.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@ setTimeout(() => {

<Note>

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.

</Note>

0 comments on commit 79ced61

Please sign in to comment.