Repository navigation
docs(sentry-basics): Consolidate tutorials into one getting-started tutorial - #18709
Conversation
Merge the distributed-tracing, integrate-frontend, and integrate-backend tutorials into a single JS-only getting-started tutorial. The three overlapping tutorials were outdated and duplicated setup steps; this replaces them with one cohesive flow (React frontend + Express backend) covering project creation, SDK setup, distributed tracing, source maps, and suspect commits. - Add 7 pages under docs/product/sentry-basics/getting-started-tutorial/, with the source maps step updated for Vite and the backend for ESM - Delete the old integrate-frontend/ and integrate-backend/ tutorials - Add redirects from all old URLs to their new homes - Repoint inbound links across docs and featureInfo.tsx - Mark source maps and suspect commits as optional; add a ~60 min time estimate and a Seer entry in What's Next - Refresh Arcade IDs; hide outdated Arcades pending recapture Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
Make the "Enable Readable Stack Traces" page work for a new developer and fix the auth-token setup that didn't actually work with Vite. - Store the auth token in .env.sentry-build-plugin (the file the Sentry Vite plugin auto-loads) instead of a plain .env, which Vite does not load into process.env; drop the non-working authToken config line - Spell out how to find the org and project slugs in the Sentry UI - Warn that the source-map project must match the DSN's project - Add a screenshot of the readable frontend stack trace Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace the stale Create React App screenshot with the modernized storefront, and give the image descriptive alt text. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The suspect commits + stack trace linking step required installing the GitHub integration (which can need org-owner approval) plus a multi-part setup — too involved for a getting-started tutorial. Remove it as a hands-on step and surface the feature (and Seer) as "go further" links in the wrap-up instead. - Delete configure-suspect-commits.mdx (former step 6) - Move the What's Next wrap-up onto the source-maps page; add a suspect commits / GitHub integration link and reword the Seer entry - Update the step list, drop the suspect-commits capability bullet, and lower the time estimate to ~45 min - Repoint the integrate-frontend/configure-scms redirect to the GitHub integration docs Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add a "Step 2 of 5" orientation line and wrap the sub-steps in <StepConnector checkable> so readers can track completion. Applied to the frontend SDK page first to preview the look before rolling out. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Apply the "Step X of 5" indicator and <StepConnector checkable> rail to the remaining step pages (create-new-project, initialize-sentry-sdk-backend, generate-first-error, enable-readable-stack-traces) so all five steps have consistent progress affordances. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Switch the step pages from <StepConnector checkable> to the numbered, non-checkable form used by the platform onboarding pages. Drops the checkbox/Reset control that rendered without the accompanying rail. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The StepConnector rail didn't render its numbered circles on the tutorial pages (only the checkbox/reset control showed). Remove it from all step pages and keep the simple "Step X of 5" counter for orientation; restore the manual sub-step numbering on the section headings. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Add a TutorialProgress component: a slim track that fills with Sentry purple in proportion to step/total, with a minimal purple bug icon riding the tip of the fill. Place it under the "Step X of 5" counter on each of the five step pages. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Cap the bar at ~1/3 of the content width and give the bug a bold dark outline (plus slightly thicker legs/antennae) so it stands out. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Render a flattened, legs-splayed "squashed" bug variant when step === total, so the bug that's been riding the progress bar gets squashed at the finish. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Replace the squashed-bug variant with a small purple headstone reading "RIP / BUGS" (two lines) shown when step === total. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Revert the final-step tombstone/squashed variant; the progress bar shows the upright bug at every step for now. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want reviews to match your repository better? Bugbot Learning can learn team-specific rules from PR activity. A team admin can enable Learning in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit af74c7b. Configure here.
Show an HTTPS git clone command alongside the SSH one, matching the backend page, so readers without SSH keys set up can still clone the sample frontend. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
The second tracePropagationTargets entry (a regex for yourserver.io) read as unexplained shorthand. Expand the code comment to label it as an example placeholder and note that "localhost" is what covers this tutorial. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Several middleware redirects still pointed at deleted paths (/product/sentry-basics/integrate-frontend/ and integrate-backend/ plus its subpages). The redirects.js :path* wildcards don't match the bare index, so those legacy URLs 404'd; the subpage ones became two-hop chains. Point all of them directly at /product/sentry-basics/getting-started-tutorial/, matching the redirects.js catch-all destination. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Code blocks and a troubleshooting note sat at column 0, breaking the ordered lists so numbering restarted (1-2-3-1). Indent each step's sub-content under its list marker so the steps number continuously: - generate-first-error "Trigger an Error": indent step 1's diff + backend route explanation, and step 4's log output - initialize-sentry-sdk-backend "Build and Run": indent the troubleshooting blockquote under the "Start the application" step Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
| To go deeper, explore: | ||
|
|
||
| - [Suspect commits & stack trace linking](/product/issues/suspect-commits/) — connect the [GitHub integration](/integrations/source-code-mgmt/github/) so Sentry can point to the commit that likely caused an error and link each stack frame straight to your source on GitHub. | ||
| - [Seer](/product/ai-in-sentry/seer/) — Sentry's AI debugging agent. Connect your GitHub or GitLab repo and Seer can analyze issues, find the root cause, and even open a pull request with a fix. (Seer is a paid add-on; see [Seer pricing](/pricing/#seer-pricing).) | ||
| - [Session Replay](/product/explore/session-replay/) — see a video-like reproduction of what the user did before the error | ||
| - [Alerts](/product/monitors-and-alerts/alerts/) — get notified in Slack or Discord about the issues you care about | ||
| - [Dashboards](/product/dashboards/sentry-dashboards/) — track error and performance trends across your services | ||
| - [Releases](/product/releases/) — monitor release health over time | ||
|
|
||
| To set up Sentry on a project that isn't the sample app, head to the [Platforms](/platforms/) page and pick your stack. |
There was a problem hiding this comment.
It seems like this should be one the /product/sentry-basics/getting-started-tutorial/generate-first-error/ page instead, considering the source maps page is listed as optional.
sfanahata
left a comment
There was a problem hiding this comment.
Nothing blocking, but added a couple more comments about description and where to put the "go deeper" suggestions that I think would make this tutorial end really well.
…irst-error.mdx Co-authored-by: Shannon Anahata <shannon.anahata@gmail.com>
The "To go deeper" resource list (Seer, Session Replay, alerts, etc.) lived only on the optional source-maps step, so readers who finished the core tutorial at "Capture Your First Distributed Tracing Error" and skipped the optional step never saw it. Move the wrap-up to the end of that step and leave the source-maps page with a short closing that links back to it. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

DESCRIBE YOUR PR
Consolidates the three overlapping, outdated Sentry Basics tutorials (
distributed-tracing,integrate-frontend,integrate-backend) into a single, cohesive, JS-only getting-started tutorial: create projects → add the SDK to a React frontend and Express backend → capture a distributed-tracing error → (optionally) enable readable stack traces.The two sample apps this tutorial uses were also refreshed in separate repos (Vite + React 19 frontend, ESM Express 5 backend, modernized storefront UI) and are already merged, so all in-doc repo links point at working code.
See https://sentry-docs-git-coolguyzone-feattutorial-update.sentry.dev/product/sentry-basics/getting-started-tutorial/
IS YOUR CHANGE URGENT?
Help us prioritize incoming PRs by letting us know when the change needs to go live.
SLA
Thanks in advance for your help!
PRE-MERGE CHECKLIST
Make sure you've checked the following before merging your changes:
🤖 Generated with Claude Code