feat(react): add getting-started guide #15011
Conversation
- Add step-by-step React getting-started guide with StepConnector - Include error monitoring, logging, tracing, and replay configuration - Add React 19+ error handling with onCaughtError/onUncaughtError - Include optional customizations for replays and traces - Add verification steps and additional resources
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
codyde
changed the title
Bundle ReportChanges will increase total bundle size by 204 bytes (0.0%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: sentry-docs-client-array-pushAssets Changed:
view changes for bundle: sentry-docs-server-cjsAssets Changed:
|
|
|
||
| <PlatformContent includePath="llm-rules-platform" /> | ||
|
|
||
| This guide covers the full getting started pocess for the React SDK and assumes you want to utilize Error Monitoring, Logs, Tracing and Spans, and Replays. For the basic quickstart, the [React Quickstart](/platforms/javascript/guides/react/) guide is a better starting point. |
There was a problem hiding this comment.
Should we rename the other "manual" guide to a quickstart guide? Calling it that is a little confusing then going to the page and there being no reference to getting started quickly.
There was a problem hiding this comment.
Looking at the React "quickstart" page, it seems like it would make sense to reference this page, too. Something like "For a comprehensive guide to installing all the things!, use this getting started guide."
|
|
||
| <PlatformContent includePath="llm-rules-platform" /> | ||
|
|
||
| This guide covers the full getting started pocess for the React SDK and assumes you want to utilize Error Monitoring, Logs, Tracing and Spans, and Replays. For the basic quickstart, the [React Quickstart](/platforms/javascript/guides/react/) guide is a better starting point. |
There was a problem hiding this comment.
| This guide covers the full getting started pocess for the React SDK and assumes you want to utilize Error Monitoring, Logs, Tracing and Spans, and Replays. For the basic quickstart, the [React Quickstart](/platforms/javascript/guides/react/) guide is a better starting point. | |
| This guide covers the full getting started process for the React SDK and assumes you want to utilize Error Monitoring, Logs, Tracing and Spans, and Replays. For the basic quickstart, the [React Quickstart](/platforms/javascript/guides/react/) guide is a better starting point. |
| ```bash {tabTitle:npm} | ||
| npm install @sentry/react --save | ||
| ``` |
There was a problem hiding this comment.
We should also add other package manager options here.
There was a problem hiding this comment.
In general: I really like the design with the continuing line on the right 👍
It creates a nice visual hierarchy that's easy to follow.
|
|
||
| This guide covers the full getting started pocess for the React SDK and assumes you want to utilize Error Monitoring, Logs, Tracing and Spans, and Replays. For the basic quickstart, the [React Quickstart](/platforms/javascript/guides/react/) guide is a better starting point. | ||
|
|
||
| <PlatformContent includePath="getting-started-prerequisites" /> |
There was a problem hiding this comment.
Should the prerequisites maybe be step 1? Because for the wizard, you already need the Sentry Account.
|
|
||
| Starting with React 19, use the `onCaughtError` and `onUncaughtError` root options to capture React errors: | ||
|
|
||
| ```javascript {9-15} {filename:index.jsx} |
There was a problem hiding this comment.
| ```javascript {9-15} {filename:index.jsx} | |
| ```javascript {8-13} {filename:index.jsx} |
|
|
||
| </Expandable> | ||
|
|
||
| ## Sending Logs |
There was a problem hiding this comment.
Should we add an (optional) here?
|
|
||
| ## Custom Traces with Attributes (Optional) | ||
|
|
||
| [Tracing](/platforms/javascript/guides/react/tracing/) allows you to monitor interactions between multiple services or applications. Create custom spans to measure specific operations and add meaningful attributes. This helps you understand performance bottlenecks and debug issues with detailed context. |
There was a problem hiding this comment.
Maybe you can add a short info here that we already create a bunch of spans. No need to go into detail here, as it's documented on the Tracing page.
3 participants
Overview
This PR adds a comprehensive React getting-started guide that provides step-by-step instructions for setting up the full Sentry React SDK with all features enabled.
Changes
New Files
docs/platforms/javascript/guides/react/getting-started.mdx- Complete getting-started guide with:onCaughtError/onUncaughtErrorFeatures
The new guide includes:
Testing
Related
This complements the existing React quickstart guide by providing a more comprehensive setup flow for users who want all Sentry features enabled from the start.
Note: The StepConnector component was already merged in PR #15003, so this PR only adds the new getting-started guide.