Skip to content

docs(sentry-basics): Consolidate tutorials into one getting-started tutorial - #18709

Open
coolguyzone wants to merge 29 commits into
masterfrom
Coolguyzone/feat/tutorial-update
Open

docs(sentry-basics): Consolidate tutorials into one getting-started tutorial#18709
coolguyzone wants to merge 29 commits into
masterfrom
Coolguyzone/feat/tutorial-update

Conversation

@coolguyzone

@coolguyzone coolguyzone commented Jul 13, 2026

Copy link
Copy Markdown
Contributor

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.

  • Urgent deadline (GA date, etc.):
  • Other deadline:
  • None: Not urgent, can wait up to 1 week+

SLA

  • Teamwork makes the dream work, so please add a reviewer to your PRs.
  • Please give the docs team up to 1 week to review your PR unless you've added an urgent due date to it.
    Thanks in advance for your help!

PRE-MERGE CHECKLIST

Make sure you've checked the following before merging your changes:

  • Checked Vercel preview for correctness, including links
  • PR was reviewed and approved by any necessary SMEs (subject matter experts)
  • PR was reviewed and approved by a member of the Sentry docs team

🤖 Generated with Claude Code

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>
@vercel

vercel Bot commented Jul 13, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
sentry-docs Ready Ready Preview Jul 28, 2026 10:59pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
develop-docs Ignored Ignored Preview Jul 28, 2026 10:59pm

Request Review

coolguyzone and others added 2 commits July 14, 2026 12:41
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>
coolguyzone and others added 2 commits July 14, 2026 15:28
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>
coolguyzone and others added 4 commits July 14, 2026 15:54
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>
Comment thread docs/product/sentry-basics/getting-started-tutorial/index.mdx Outdated
Comment thread docs/product/sentry-basics/getting-started-tutorial/create-new-project.mdx Outdated
Comment thread docs/product/sentry-basics/getting-started-tutorial/create-new-project.mdx Outdated
The consolidation left both the Issues and Tracing feature cards linking
to the same trace walkthrough. Point the Issues card at the Issue Details
documentation (viewing an error's full details) instead, so it no longer
sends users to a distributed-trace demo.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
…-project.mdx

Co-authored-by: Shannon Anahata <shannon.anahata@gmail.com>
…torial-update

# Conflicts:
#	docs/product/index.mdx
#	docs/product/sentry-basics/distributed-tracing/index.mdx
#	docs/product/sentry-basics/getting-started-tutorial/create-new-project.mdx
#	docs/product/sentry-basics/index.mdx
#	docs/product/sentry-basics/integrate-backend/capturing-errors.mdx
#	docs/product/sentry-basics/integrate-backend/configuration-options.mdx
#	docs/product/sentry-basics/integrate-backend/getting-started.mdx
#	docs/product/sentry-basics/integrate-backend/index.mdx
#	docs/product/sentry-basics/integrate-frontend/configure-scms.mdx
#	docs/product/sentry-basics/integrate-frontend/index.mdx
#	docs/product/sentry-basics/integrate-frontend/initialize-sentry-sdk.mdx
#	docs/product/sentry-basics/performance-monitoring.mdx
@codeowner-assignment
codeowner-assignment Bot requested a review from a team July 27, 2026 18:07
@github-actions

Copy link
Copy Markdown
Contributor

⚠️ Redirect Chain Issues Detected

This PR introduces or contains redirect chains that degrade SEO and add latency.

Redirect-to-Redirect Chains

These redirect destinations point to another redirect, creating multi-hop chains. Update the destination to point directly to the final URL:

Source Current Destination Should Be File
/guides/integrate-frontend/upload-source-maps/ /product/sentry-basics/integrate-frontend/upload-source-maps/ /product/sentry-basics/getting-started-tutorial/enable-readable-stack-traces/ middleware.ts
/product/sentry-basics/guides/integrate-frontend/upload-source-maps/ /product/sentry-basics/integrate-frontend/upload-source-maps/ /product/sentry-basics/getting-started-tutorial/enable-readable-stack-traces/ middleware.ts
/guides/integrate-frontend/configure-scms/ /product/sentry-basics/integrate-frontend/configure-scms/ /integrations/source-code-mgmt/github/ middleware.ts
/product/sentry-basics/guides/integrate-frontend/configure-scms/ /product/sentry-basics/integrate-frontend/configure-scms/ /integrations/source-code-mgmt/github/ middleware.ts
/guides/integrate-frontend/create-new-project/ /product/sentry-basics/integrate-frontend/create-new-project/ /product/sentry-basics/getting-started-tutorial/create-new-project/ middleware.ts
/product/sentry-basics/guides/integrate-frontend/create-new-project/ /product/sentry-basics/integrate-frontend/create-new-project/ /product/sentry-basics/getting-started-tutorial/create-new-project/ middleware.ts
/guides/integrate-frontend/initialize-sentry-sdk/ /product/sentry-basics/integrate-frontend/initialize-sentry-sdk/ /product/sentry-basics/getting-started-tutorial/initialize-sentry-sdk-frontend/ middleware.ts
/product/sentry-basics/guides/integrate-frontend/initialize-sentry-sdk/ /product/sentry-basics/integrate-frontend/initialize-sentry-sdk/ /product/sentry-basics/getting-started-tutorial/initialize-sentry-sdk-frontend/ middleware.ts
/guides/integrate-frontend/generate-first-error/ /product/sentry-basics/integrate-frontend/generate-first-error/ /product/sentry-basics/getting-started-tutorial/generate-first-error/ middleware.ts
/product/sentry-basics/guides/integrate-frontend/generate-first-error/ /product/sentry-basics/integrate-frontend/generate-first-error/ /product/sentry-basics/getting-started-tutorial/generate-first-error/ middleware.ts

Each redirect hop loses ~15% of SEO link equity and adds latency for users.


> **Troubleshooting tip**: If the application fails to start due to syntax errors or errors for missing dependencies/modules, make sure you're using Node 18+ and install dependencies again.

1. Open the sample application in your browser.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is rendering as list order 1 instead of what I think you mean to do, 3? I think it's breaking because of the quoted text.

Image

@@ -41,7 +49,7 @@ app.get("/products/debug-sentry", (req, res) => {

1. Save the file.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this list going down supposed to stay in numerical order? Looks like it starts over at 1 here, but an ordered list starts at the instruction above "1. In the tracing-tutorial-frontend repo,'"

// Capture 100% of transactions for tracing.
tracesSampleRate: 1.0,
// Enable distributed tracing for requests to these targets.
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this: /^https:\/\/yourserver\.io\/api/], the standard way we represent an example server target? It caught me a little off guard. Maybe we note as an example/placeholder? Or could be shorthand I don't know.

…dable-stack-traces.mdx

Co-authored-by: Shannon Anahata <shannon.anahata@gmail.com>
…ware

The tutorial consolidation added integrate-frontend/* -> getting-started-tutorial/*
redirects in redirects.js, which turned the legacy /guides/integrate-frontend/*
middleware redirects into two-hop chains. Point those middleware entries
directly at their final destinations so each is a single hop.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ 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.

Comment thread middleware.ts
Comment thread middleware.ts
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>
Comment thread middleware.ts
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>
Comment thread middleware.ts
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants