Full Sentry SDK setup for browser JavaScript. Use when asked to \"add Sentry to a website\", \"install @sentry/browser\", or configure error monitoring, tracing, session replay, or logging for vanilla JavaScript, jQuery, static sites, or WordPress.
Full Sentry SDK setup for browser JavaScript. Use when asked to \"add Sentry to a website\", \"install @sentry/browser\", or configure error monitoring, tracing, session replay, or logging for vanilla JavaScript, jQuery, static sites, or WordPress.
Opinionated wizard that scans your project and guides you through complete Sentry setup for browser JavaScript — vanilla JS, jQuery, static sites, WordPress, and any JS project without a framework-specific SDK.
Invoke This Skill When
User asks to "add Sentry to a website" or set up Sentry for plain JavaScript
User wants to install @sentry/browser or configure the Loader Script
User has a WordPress, Shopify, Squarespace, or static HTML site
User wants error monitoring, tracing, session replay, or logging without a framework
No framework-specific SDK applies
Note: SDK versions and APIs below reflect @sentry/browser ≥10.0.0.
Always verify against docs.sentry.io/platforms/javascript/ before implementing.
Phase 1: Detect
CRITICAL — Check for frameworks first. Framework-specific SDKs provide significantly better coverage and must be recommended before proceeding with @sentry/browser.
Step 1A: Framework Detection (Redirect If Found)
# Check for Reactcat package.json 2>/dev/null | grep -E '"react"'# Check for Next.jscat package.json 2>/dev/null | grep '"next"'# Check for Vuecat package.json 2>/dev/null | grep '"vue"'# Check for Angularcat package.json 2>/dev/null | grep '"@angular/core"'# Check for Svelte / SvelteKitcat package.json 2>/dev/null | grep -E '"svelte"|"@sveltejs/kit"'# Check for Remixcat package.json 2>/dev/null | grep -E '"@remix-run/react"|"@remix-run/node"'# Check for Nuxtcat package.json 2>/dev/null | grep '"nuxt"'# Check for Astrocat package.json 2>/dev/null | grep '"astro"'# Check for Embercat package.json 2>/dev/null | grep '"ember-source"'# Check for Node.js server frameworks (wrong SDK entirely)cat package.json 2>/dev/null | grep -E '"express"|"fastify"|"@nestjs/core"|"koa"'
If a framework is detected, stop and redirect:
Framework detected
Redirect to
next
Load sentry-nextjs-sdk skill — do not proceed here
This is a Node.js server — load sentry-node-sdk or sentry-nestjs-sdk skill
Why redirect matters: Framework SDKs add router-aware transactions, error boundaries, component tracking, and often SSR coverage. Using @sentry/browser directly in a React or Next.js app loses all of that.
Only continue with @sentry/browser if no framework is detected.
Step 1B: Installation Method Detection
# Check if there's a package.json at all (bundler environment)ls package.json 2>/dev/null
# Check package managerls package-lock.json yarn.lock pnpm-lock.yaml bun.lockb 2>/dev/null
# Check build toolls vite.config.ts vite.config.js webpack.config.js rollup.config.js esbuild.config.js 2>/dev/null
cat package.json 2>/dev/null | grep -E '"vite"|"webpack"|"rollup"|"esbuild"'# Check for CMS or static site indicatorsls wp-config.php wp-content/ 2>/dev/null # WordPressls _config.yml _config.yaml 2>/dev/null # Jekyllls config.toml 2>/dev/null # Hugols .eleventy.js 2>/dev/null # Eleventy# Check for existing Sentrycat package.json 2>/dev/null | grep '"@sentry/'
grep -r "sentry-cdn.com\|js.sentry-cdn.com" . --include="*.html" -l 2>/dev/null | head -3
What to determine:
Question
Impact
package.json exists + bundler?
→ Path A: npm install
WordPress, Shopify, static HTML, no npm?
→ Path B: Loader Script
Script tags only, no Loader Script access?
→ Path C: CDN bundle
Already has @sentry/browser?
Skip install, go straight to feature config
Build tool is Vite / webpack / Rollup / esbuild?
Source maps plugin to configure
Phase 2: Recommend
Present a recommendation based on what you found. Lead with a concrete proposal, don't ask open-ended questions.
npm install @sentry/browser --save
# or
yarn add @sentry/browser
# or
pnpm add @sentry/browser
Create src/instrument.ts
Sentry must initialize before any other code runs. Put Sentry.init() in a dedicated sidecar file:
import * asSentryfrom"@sentry/browser";
Sentry.init({
dsn: import.meta.env.VITE_SENTRY_DSN, // Adjust per build tool (see table below)environment: import.meta.env.MODE,
release: import.meta.env.VITE_APP_VERSION, // inject at build time// Data collection (v10.54+) — replaces sendDefaultPiidataCollection: {
userInfo: true,
cookies: true,
httpHeaders: { request: true, response: true },
},
// Or use legacy option (will be deprecated in v11):// sendDefaultPii: true,integrations: [
Sentry.browserTracingIntegration(),
Sentry.replayIntegration({
maskAllText: true,
blockAllMedia: true,
}),
],
// TracingtracesSampleRate: 1.0, // lower to 0.1–0.2 in productiontracePropagationTargets: ["localhost", /^https:\/\/yourapi\.io/],
// Session ReplayreplaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
enableLogs: true,
});
DSN environment variable by build tool:
Build Tool
Variable Name
Access in code
Vite
VITE_SENTRY_DSN
import.meta.env.VITE_SENTRY_DSN
Custom webpack
SENTRY_DSN
process.env.SENTRY_DSN
esbuild
SENTRY_DSN
process.env.SENTRY_DSN
Rollup
SENTRY_DSN
process.env.SENTRY_DSN
Entry Point Setup
Import instrument.ts as the very first import in your entry file:
// src/main.ts or src/index.tsimport"./instrument"; // ← MUST be first// ... rest of your app
Source Maps Setup (Strongly Recommended)
Without source maps, stack traces show minified code. Set up the build plugin to upload source maps automatically:
No dedicated browser wizard: There is no npx @sentry/wizard -i browser flag. The closest is npx @sentry/wizard@latest -i sourcemaps which configures source map upload only for an already-initialized SDK.
Best for: Sites without a build system. The Loader Script is a single <script> tag that lazily loads the full SDK, always stays up to date via Sentry's CDN, and buffers errors before the SDK loads.
Get the Loader Script:
Sentry UI → Settings → Projects → (your project) → SDK Setup → Loader Script
Copy the generated tag and place it as the first script on every page:
<!DOCTYPE html><html><head><!-- Configure BEFORE the loader tag --><script>window.sentryOnLoad = function () {
Sentry.init({
// DSN is already configured in the loader URLtracesSampleRate: 1.0,
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
});
};
</script><!-- Loader Script FIRST — before all other scripts --><scriptsrc="https://js.sentry-cdn.com/YOUR_PUBLIC_KEY.min.js"crossorigin="anonymous"
></script></head>
...
</html>
For each feature: Read ${SKILL_ROOT}/references/<feature>.md, follow steps exactly, verify it works.
Configuration Reference
Key Sentry.init() Options
Option
Type
Default
Notes
dsn
string
—
Required. SDK disabled when empty
environment
string
"production"
e.g., "staging", "development"
release
string
—
e.g., "my-app@1.0.0" or git SHA — links errors to releases
sendDefaultPii
boolean
false
Includes IP addresses and request headers. Will be deprecated in v11 — use dataCollection instead
dataCollection
object
—
Fine-grained control over collected data (v10.54+). See table below
tracesSampleRate
number
—
0–1; 1.0 in dev, 0.1–0.2 in prod
tracesSampler
function
—
Per-transaction sampling; overrides rate
tracePropagationTargets
(string|RegExp)[]
same-origin
Outgoing URLs that receive distributed tracing headers
replaysSessionSampleRate
number
—
Fraction of all sessions recorded
replaysOnErrorSampleRate
number
—
Fraction of error sessions recorded
enableLogs
boolean
false
Enable Sentry.logger.* API (npm or CDN logs bundle; not Loader Script)
attachStackTrace
boolean
false
Stack traces on captureMessage() calls
maxBreadcrumbs
number
100
Breadcrumbs stored per event
debug
boolean
false
Verbose SDK output to console
tunnel
string
—
Proxy URL to bypass ad blockers
ignoreErrors
(string|RegExp)[]
[]
Drop errors matching these patterns
denyUrls
(string|RegExp)[]
[]
Drop errors from scripts at these URLs
allowUrls
(string|RegExp)[]
[]
Only capture errors from these script URLs
spotlight
boolean|string
false
Forward events to Spotlight local dev overlay
Browser-Specific Options
Option
Type
Default
Notes
cdnBaseUrl
string
—
Base URL for lazy-loading integrations
skipBrowserExtensionCheck
boolean
false
Skip check for browser extension context
dataCollection Option (v10.54+)
Fine-grained control over what data the SDK collects. Replaces the simple sendDefaultPii boolean with granular settings. When omitted, falls back to sendDefaultPii for backwards compatibility.
