sentry-browser-sdk

A guided setup skill for installing and configuring the `@sentry/browser` SDK (version 10.0.0 or later) in browser JavaScript projects that have no framework-specific SDK—vanilla JS, jQuery, static sites, and CMS platforms such as WordPress, Shopify, and Squarespace. It acts as an opinionated wizard that scans the project and walks through complete setup of error monitoring, tracing, session replay, and logging. It is invoked when a user asks to add Sentry to a website, install `@sentry/browser`, or configure monitoring without a framework.

Setup proceeds in phases. Phase 1 (Detect) checks first for frameworks—React, Next.js, Vue, Angular, Svelte/SvelteKit, Remix, Nuxt, Astro, Ember, and Node server frameworks like Express, Fastify, and NestJS—because framework SDKs add router-aware transactions, error boundaries, component tracking, and SSR coverage that plain `@sentry/browser` would lose. If a framework is found it stops and redirects to the appropriate skill or package. It then detects the installation method: a bundler project with package.json (npm path), a CMS or static site without npm (Loader Script path), or static HTML without Loader Script access (CDN bundle path), and checks for an existing Sentry installation.

Phase 2 (Recommend) leads with a concrete proposal rather than open questions, treating error monitoring as a non-negotiable baseline and tracing as high-value for interactive pages, with session replay for user-facing and checkout flows. Optional features include user feedback, logging (npm or CDN logs bundle only—not available via the Loader Script), and profiling (beta, Chromium-only, requiring the `Document-Policy: js-profiling` response header). Phase 3 (Guide) provides install commands for npm, yarn, and pnpm, and instructs creating a dedicated `src/instrument.ts` sidecar so `Sentry.init()` runs before any other code. Throughout, it advises verifying APIs against the official Sentry JavaScript docs before implementing.