Skip to content

docs(js): Update React Router Framework quick start guide to use split layout #17616

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

Open
inventarSarah wants to merge 1 commit into
base: master
Choose a base branch
from
+196 −57
Open

docs(js): Update React Router Framework quick start guide to use split layout #17616

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
31 changes: 16 additions & 15 deletions docs/platforms/javascript/guides/react-router/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ If you're using React Router in data or declarative mode, follow the instruction

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

<StepComponent>
<StepConnector selector="h2" showNumbers={true}>

## Install

Expand All @@ -36,6 +36,18 @@ To install Sentry using the installation wizard, run the command on the right wi

The wizard guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring.

</SplitSectionText>
<SplitSectionCode>

```bash
npx @sentry/wizard@latest -i reactRouter
```

</SplitSectionCode>

</SplitSection>
</SplitLayout>

This guide assumes that you enable all features and allow the wizard to create an example page and route. You can add or remove features at any time, but setting them up now will save you the effort of configuring them manually later.

<Expandable title="What does the installation wizard change inside your application?">
Expand All @@ -51,17 +63,6 @@ This guide assumes that you enable all features and allow the wizard to create a

</Expandable>

</SplitSectionText>
<SplitSectionCode>

```bash
npx @sentry/wizard@latest -i reactRouter
```

</SplitSectionCode>
</SplitSection>
</SplitLayout>

## Configure

If you prefer to configure Sentry manually, here are the configuration files the wizard would create:
Expand Down Expand Up @@ -234,6 +235,8 @@ If you haven't tested your Sentry configuration yet, let's do it now. You can co
1. Open the example page `/sentry-example-page` in your browser. For most React Router applications, this will be at localhost.
2. Observe the example page with a button that triggers test errors.

<PlatformContent includePath="getting-started-browser-sandbox-warning" />

Clicking the button triggers an error that Sentry captures for you. The example also demonstrates how to test performance tracing.

<Alert level="success" title="Tip">
Expand All @@ -246,8 +249,6 @@ Don't forget to explore the example files' code in your project to understand wh

Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear).

<PlatformContent includePath="getting-started-browser-sandbox-warning" />

<Include name="quick-start-locate-data-expandable" />

## Next Steps
Expand All @@ -270,4 +271,4 @@ Our next recommended steps for you are:

</Expandable>

</StepComponent>
</StepConnector>
Loading
Loading