sentry-browser-sdk

Name: sentry-browser-sdk
Author: getsentry

242stars30forks

How to install sentry-browser-sdk?

getsentry/sentry-for-ai/sentry-browser-sdk

$npx -y skills add getsentry/sentry-for-ai --skill sentry-browser-sdk

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	> [All Skills](../../SKILL_TREE.md) > [SDK Setup](../sentry-sdk-setup/SKILL.md) > Browser SDK
2
3	# Sentry Browser SDK
4
5	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.
6
7	## Invoke This Skill When
8
9	- User asks to "add Sentry to a website" or set up Sentry for plain JavaScript
10	- User wants to install `@sentry/browser` or configure the Loader Script
11	- User has a WordPress, Shopify, Squarespace, or static HTML site
12	- User wants error monitoring, tracing, session replay, or logging without a framework
13	- No framework-specific SDK applies
14
15	> Note: SDK versions and APIs below reflect `@sentry/browser` ≥10.0.0.
16	> Always verify against [docs.sentry.io/platforms/javascript/](https://docs.sentry.io/platforms/javascript/) before implementing.
17
18	---
19
20	## Phase 1: Detect
21
22	CRITICAL — Check for frameworks first. Framework-specific SDKs provide significantly better coverage and must be recommended before proceeding with `@sentry/browser`.
23
24	### Step 1A: Framework Detection (Redirect If Found)
25
26	```bash
27	# Check for React
28	cat package.json 2>/dev/null \| grep -E '"react"'
29
30	# Check for Next.js
31	cat package.json 2>/dev/null \| grep '"next"'
32
33	# Check for Vue
34	cat package.json 2>/dev/null \| grep '"vue"'
35
36	# Check for Angular
37	cat package.json 2>/dev/null \| grep '"@angular/core"'
38
39	# Check for Svelte / SvelteKit
40	cat package.json 2>/dev/null \| grep -E '"svelte"\|"@sveltejs/kit"'
41
42	# Check for Remix
43	cat package.json 2>/dev/null \| grep -E '"@remix-run/react"\|"@remix-run/node"'
44
45	# Check for Nuxt
46	cat package.json 2>/dev/null \| grep '"nuxt"'
47
48	# Check for Astro
49	cat package.json 2>/dev/null \| grep '"astro"'
50
51	# Check for Ember
52	cat package.json 2>/dev/null \| grep '"ember-source"'
53
54	# Check for Node.js server frameworks (wrong SDK entirely)
55	cat package.json 2>/dev/null \| grep -E '"express"\|"fastify"\|"@nestjs/core"\|"koa"'
56	```
57
58	If a framework is detected, stop and redirect:
59
60	\| Framework detected \| Redirect to \|
61	\|-------------------\|-------------\|
62	\| `next` \| Load `sentry-nextjs-sdk` skill — do not proceed here \|
63	\| `react` (without Next.js) \| Load `sentry-react-sdk` skill — do not proceed here \|
64	\| `vue` \| Suggest `@sentry/vue` — see [docs.sentry.io/platforms/javascript/guides/vue/](https://docs.sentry.io/platforms/javascript/guides/vue/) \|
65	\| `@angular/core` \| Suggest `@sentry/angular` — see [docs.sentry.io/platforms/javascript/guides/angular/](https://docs.sentry.io/platforms/javascript/guides/angular/) \|
66	\| `@sveltejs/kit` \| Load `sentry-svelte-sdk` skill — do not proceed here \|
67	\| `svelte` (SPA, no kit) \| Suggest `@sentry/svelte` — see [docs.sentry.io/platforms/javascript/guides/svelte/](https://docs.sentry.io/platforms/javascript/guides/svelte/) \|
68	\| `@remix-run` \| Suggest `@sentry/remix` — see [docs.sentry.io/platforms/javascript/guides/remix/](https://docs.sentry.io/platforms/javascript/guides/remix/) \|
69	\| `nuxt` \| Suggest `@sentry/nuxt` — see [docs.sentry.io/platforms/javascript/guides/nuxt/](https://docs.sentry.io/platforms/javascript/guides/nuxt/) \|
70	\| `astro` \| Suggest `@sentry/astro` — see [docs.sentry.io/platforms/javascript/guides/astro/](https://docs.sentry.io/platforms/javascript/guides/astro/) \|
71	\| `ember-source` \| Suggest `@sentry/ember` — see [docs.sentry.io/platforms/javascript/guides/ember/](https://docs.sentry.io/platforms/javascript/guides/ember/) \|
72	\| `express` / `fastify` / `@nestjs/core` \| This is a Node.js server — load `sentry-node-sdk` or `sentry-nestjs-sdk` skill \|
73
74	> 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.
75
76	Only continue with `@sentry/browser` if no framework is detected.
77
78	### Step 1B: Installation Method Detection
79
80	```bash
81	# Check if there's a package.json at all (bundler environment)
82	ls package.json 2>/dev/null
83
84	# Check package manager
85	ls package-lock.json yarn.lock pnpm-lock.yaml bun.lockb 2>/dev/null
86
87	# Check build tool
88	ls vite.config.ts vite.config.js webpack.config.js rollup.config.js esbuild.config.js 2>/dev/null
89	cat package.json 2>/dev/null \| grep -E '"vite"\|"webpack"\|"rollup"\|"esbuild"'
90
91	# Check for CMS or static site indicators
92	ls wp-config.php wp-content/ 2>/dev/null # WordPress
93	ls _config.yml _config.yaml 2>/dev/null # Jekyll
94	ls config.toml 2>/dev/null # Hugo
95	ls .eleventy.js 2>/dev/null # Eleventy
96
97	# Check for existing Sentry
98	cat package.json 2>/dev/null \| gre

People who liked this also viewed

6 picks

Type

sentry-browser-sdk

242stars30forks

View on GitHub

How to install sentry-browser-sdk?

getsentry/sentry-for-ai/sentry-browser-sdk

$npx -y skills add getsentry/sentry-for-ai --skill sentry-browser-sdk

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	> [All Skills](../../SKILL_TREE.md) > [SDK Setup](../sentry-sdk-setup/SKILL.md) > Browser SDK
2
3	# Sentry Browser SDK
4
5	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.
6
7	## Invoke This Skill When
8
9	- User asks to "add Sentry to a website" or set up Sentry for plain JavaScript
10	- User wants to install `@sentry/browser` or configure the Loader Script
11	- User has a WordPress, Shopify, Squarespace, or static HTML site
12	- User wants error monitoring, tracing, session replay, or logging without a framework
13	- No framework-specific SDK applies
14
15	> Note: SDK versions and APIs below reflect `@sentry/browser` ≥10.0.0.
16	> Always verify against [docs.sentry.io/platforms/javascript/](https://docs.sentry.io/platforms/javascript/) before implementing.
17
18	---
19
20	## Phase 1: Detect
21
22	CRITICAL — Check for frameworks first. Framework-specific SDKs provide significantly better coverage and must be recommended before proceeding with `@sentry/browser`.
23
24	### Step 1A: Framework Detection (Redirect If Found)
25
26	```bash
27	# Check for React
28	cat package.json 2>/dev/null \| grep -E '"react"'
29
30	# Check for Next.js
31	cat package.json 2>/dev/null \| grep '"next"'
32
33	# Check for Vue
34	cat package.json 2>/dev/null \| grep '"vue"'
35
36	# Check for Angular
37	cat package.json 2>/dev/null \| grep '"@angular/core"'
38
39	# Check for Svelte / SvelteKit
40	cat package.json 2>/dev/null \| grep -E '"svelte"\|"@sveltejs/kit"'
41
42	# Check for Remix
43	cat package.json 2>/dev/null \| grep -E '"@remix-run/react"\|"@remix-run/node"'
44
45	# Check for Nuxt
46	cat package.json 2>/dev/null \| grep '"nuxt"'
47
48	# Check for Astro
49	cat package.json 2>/dev/null \| grep '"astro"'
50
51	# Check for Ember
52	cat package.json 2>/dev/null \| grep '"ember-source"'
53
54	# Check for Node.js server frameworks (wrong SDK entirely)
55	cat package.json 2>/dev/null \| grep -E '"express"\|"fastify"\|"@nestjs/core"\|"koa"'
56	```
57
58	If a framework is detected, stop and redirect:
59
60	\| Framework detected \| Redirect to \|
61	\|-------------------\|-------------\|
62	\| `next` \| Load `sentry-nextjs-sdk` skill — do not proceed here \|
63	\| `react` (without Next.js) \| Load `sentry-react-sdk` skill — do not proceed here \|
64	\| `vue` \| Suggest `@sentry/vue` — see [docs.sentry.io/platforms/javascript/guides/vue/](https://docs.sentry.io/platforms/javascript/guides/vue/) \|
65	\| `@angular/core` \| Suggest `@sentry/angular` — see [docs.sentry.io/platforms/javascript/guides/angular/](https://docs.sentry.io/platforms/javascript/guides/angular/) \|
66	\| `@sveltejs/kit` \| Load `sentry-svelte-sdk` skill — do not proceed here \|
67	\| `svelte` (SPA, no kit) \| Suggest `@sentry/svelte` — see [docs.sentry.io/platforms/javascript/guides/svelte/](https://docs.sentry.io/platforms/javascript/guides/svelte/) \|
68	\| `@remix-run` \| Suggest `@sentry/remix` — see [docs.sentry.io/platforms/javascript/guides/remix/](https://docs.sentry.io/platforms/javascript/guides/remix/) \|
69	\| `nuxt` \| Suggest `@sentry/nuxt` — see [docs.sentry.io/platforms/javascript/guides/nuxt/](https://docs.sentry.io/platforms/javascript/guides/nuxt/) \|
70	\| `astro` \| Suggest `@sentry/astro` — see [docs.sentry.io/platforms/javascript/guides/astro/](https://docs.sentry.io/platforms/javascript/guides/astro/) \|
71	\| `ember-source` \| Suggest `@sentry/ember` — see [docs.sentry.io/platforms/javascript/guides/ember/](https://docs.sentry.io/platforms/javascript/guides/ember/) \|
72	\| `express` / `fastify` / `@nestjs/core` \| This is a Node.js server — load `sentry-node-sdk` or `sentry-nestjs-sdk` skill \|
73
74	> 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.
75
76	Only continue with `@sentry/browser` if no framework is detected.
77
78	### Step 1B: Installation Method Detection
79
80	```bash
81	# Check if there's a package.json at all (bundler environment)
82	ls package.json 2>/dev/null
83
84	# Check package manager
85	ls package-lock.json yarn.lock pnpm-lock.yaml bun.lockb 2>/dev/null
86
87	# Check build tool
88	ls vite.config.ts vite.config.js webpack.config.js rollup.config.js esbuild.config.js 2>/dev/null
89	cat package.json 2>/dev/null \| grep -E '"vite"\|"webpack"\|"rollup"\|"esbuild"'
90
91	# Check for CMS or static site indicators
92	ls wp-config.php wp-content/ 2>/dev/null # WordPress
93	ls _config.yml _config.yaml 2>/dev/null # Jekyll
94	ls config.toml 2>/dev/null # Hugo
95	ls .eleventy.js 2>/dev/null # Eleventy
96
97	# Check for existing Sentry
98	cat package.json 2>/dev/null \| gre

People who liked this also viewed

6 picks

Type