feat(react): add comprehensive getting-started guide with StepConnector #14745
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Bundle ReportChanges will increase total bundle size by 434.23kB (1.9%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: sentry-docs-edge-server-array-pushAssets Changed:
view changes for bundle: sentry-docs-client-array-pushAssets Changed:
view changes for bundle: sentry-docs-server-cjsAssets Changed:
App Routes Affected:
|
codyde
changed the title
codyde
changed the title
s1gr1d
reviewed
Aug 28, 2025
| <OnboardingOption optionId="session-replay"> | ||
|
|
||
| <PlatformContent includePath="getting-started-tunneling" /> | ||
| ## Step 5: Customizing Replays |
There was a problem hiding this comment.
The step numbering might be confusing when not all features are selected.
Maybe we should even skip the numbering for optional features. When first looking at the page it might look overwhelming when seeing 7 steps. The header for the optional features could just be something like this:
## Session Replay: Customize
There was a problem hiding this comment.
I love that suggestion - going to use it. Thank you! I'm also going to investigate some ways to create a separator between the "core" steps, and extended config - but i love the idea of making the mandatory steps numbered.
|
|
||
| Add the following to your application's entry point (typically `index.js`, `main.js`, or `App.js`) or to the file before you use any other Sentry method: | ||
|
|
||
| ```javascript {filename:instrument.js} |
There was a problem hiding this comment.
You could update the filename here to match the above mentioned filenames.
Also make sure that this step matches with the step below. In a step below you mention, that people should import the instrument.js file, but we don't mention creating that anymore: https://github.com/getsentry/sentry-docs/pull/14745/files#diff-93dbd46244eede6a25dba5637466575690eb8b83691c8ba891f9ebf171198e3aR107
| // Sentry initialization should be imported first! | ||
| import "./instrument"; | ||
| import App from "./App"; | ||
| Import the `instrument.js` file in your application's entry point _before all other imports_ to initialize the SDK: |
There was a problem hiding this comment.
As already mentioned above, the instrument.js file does not exist when following the steps.
codeowner-assignment
bot
requested review from
a team
and removed request for
a team
- Add comprehensive React getting-started guide with step-by-step flow - Fix StepConnector component quote style consistency (single -> double quotes) - Include error monitoring, logging, tracing, and replay configuration - Add React 19+ error handling with onCaughtError/onUncaughtError - Include optional customizations for replays and traces
- Revert to single quotes to match project's singleQuote: true setting - Ensures consistency with automated formatting
codyde
force-pushed
the
feat/react-docs-restructure-clean
branch
from
c2ab1a5 to
582fb6e
Compare
codyde
changed the title
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| }); | ||
|
|
||
| // Using template literals for dynamic data | ||
| logger.warn(logger.fmt`Rate limit exceeded for user: ${userId}`); |
There was a problem hiding this comment.
Bug: Undefined Variable in Template Literal
The logger.warn example references userId within a template literal, but userId isn't defined in that scope. This causes a ReferenceError when the code executes.
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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/onUncaughtErrorUpdated Files
src/components/stepConnector/index.tsx- Fixed quote style consistency to match project Prettier configFeatures
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.