Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 8 additions & 30 deletions docs/platforms/javascript/guides/nuxt/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,45 +14,23 @@ categories:

## Install

<SplitLayout>
<SplitSection>
<SplitSectionText>
<PlatformContent includePath="sentry-init/experimental-warning" />

To install Sentry using the installation wizard, run the following command within your project:
<PlatformContent includePath="sentry-init/install-command" />

The wizard then guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring.
<PlatformContent includePath="sentry-init/how-it-works" />

</SplitSectionText>
<SplitSectionCode>

```bash
npx @sentry/wizard@latest -i nuxt
```

</SplitSectionCode>
</SplitSection>
</SplitLayout>

<Include name="quick-start-features-expandable" />

This guide assumes that you enable all features and allow the wizard to create an example page or component. You can add or remove features at any time, but setting them up now will save you the effort of configuring them manually later.

<Expandable title="What does the installation wizard change inside your application?">
- Creates `sentry.(client|server).config.ts` to initialize the SDK
- Creates or updates your `nuxt.config.ts` to add build options to add source maps upload and auto-instrumentation via Vite plugins
- Creates `.env.sentry-build-plugin` with an auth token to upload source maps (this file is automatically added to `.gitignore`)
- Adds an example page and route to your application to help verify your Sentry setup
- If it couldn't create a page, the wizard adds an example component instead

</Expandable>
<PlatformContent includePath="sentry-init/framework-wizard" />

## Avoid Ad Blockers With Tunneling (Optional)

<PlatformContent includePath="getting-started-tunneling" />

## Verify Your Setup

If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that Sentry is working properly and sending data to your Sentry project by using the example page created by the installation wizard.
The `sentry init` command checks the integration files it creates or modifies before it finishes. To confirm runtime events are reaching Sentry, start your Nuxt app, exercise the parts of your app that should send events, and then check your Sentry project.

If you used the Nuxt installation wizard instead, you can also verify your setup with the example page or component it creates.

<Expandable level="warning" title="The wizard created an example component instead of a page.">
The wizard creates a `SentryErrorButton` component when it fails to add an example page to your project. This usually happens if you don't have a `app.vue` file or if that file does not contain the `NuxtPage` component. To verify your setup, follow these steps before continuing with the next section, "View Captured Data in Sentry":
Expand Down Expand Up @@ -116,7 +94,7 @@ NODE_OPTIONS='--import ./.nuxt/dev/sentry.server.config.mjs' nuxt dev
</SplitSection>
</SplitLayout>

After building and running your project:
If you used the Nuxt installation wizard, after building and running your project:

1. Open the example page `/sentry-example-page` in your browser. For most Nuxt applications, this will be at localhost.
2. Click the "Throw sample error" button. This triggers two errors:
Expand Down
5 changes: 1 addition & 4 deletions docs/platforms/javascript/guides/nuxt/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@ sidebar_order: 1
description: "Learn how to manually set up Sentry in your Nuxt app and capture your first errors."
---

<Alert level="info">
For the fastest setup, we recommend using the [wizard
installer](/platforms/javascript/guides/nuxt).
</Alert>
<PlatformContent includePath="sentry-init/manual-setup-callout" />

<PlatformContent includePath="getting-started-complete" />
53 changes: 4 additions & 49 deletions docs/platforms/javascript/guides/react-router/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -33,58 +33,13 @@ If you're using React Router in data or declarative mode, follow the instruction

## Install

<Alert level="warning">
<PlatformContent includePath="sentry-init/experimental-warning" />

The AI-powered `sentry init` flow is currently experimental. To use the existing framework-specific setup instead, see the option below, or check out the [Manual Setup](/platforms/javascript/guides/react-router/manual-setup/) guide.
<PlatformContent includePath="sentry-init/install-command" />

</Alert>

<SplitLayout>
<SplitSection>
<SplitSectionText>

Run the Sentry init command in your project directory to automatically configure Sentry in your React Router v7 Framework Mode application.
<PlatformContent includePath="sentry-init/how-it-works" />

The command guides you through setup and asks which optional Sentry features you want to enable beyond error monitoring.

</SplitSectionText>
<SplitSectionCode>

```bash
npx sentry@latest init
```

</SplitSectionCode>

</SplitSection>
</SplitLayout>

<Expandable title="How does sentry init work?">

The `sentry init` command is AI-powered. It analyzes your project and generates a tailored integration, rather than applying a fixed template. Here's what it does:

- **Analyzes your project** — reads project files and manifests to understand your React Router Framework app structure, including monorepos. It also respects AI instruction files such as `CLAUDE.md`, `AGENTS.md`, and `.cursorrules`.
- **Detects your framework** — identifies React Router v7 Framework Mode and selects the `@sentry/react-router` SDK.
- **Fetches official Sentry docs** — uses the current Sentry documentation as the source of truth when generating integration code.
- **Installs dependencies** — adds `@sentry/react-router` using your project's package manager.
- **Creates and modifies files** — sets up client-side and server-side initialization, error capture, tracing, and other selected features based on your existing project structure.
- **Verifies the integration** — re-reads modified files after writing to confirm Sentry was integrated.

For full details on what each file does, see the [Manual Setup](/platforms/javascript/guides/react-router/manual-setup/) guide.

</Expandable>

<Expandable title="Prefer the existing React Router wizard?">

If you don't want to use the experimental AI-powered flow, run the framework-specific installation wizard instead:

```bash
npx @sentry/wizard@latest -i reactRouter
```

To configure Sentry manually, follow the [Manual Setup](/platforms/javascript/guides/react-router/manual-setup/) guide.

</Expandable>
<PlatformContent includePath="sentry-init/framework-wizard" />

## Configure

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,7 @@ description: "Learn how to manually set up Sentry in your React Router v7 app an
you have any feedback or concerns.
</Alert>

<Alert level="info">
Looking for automatic setup with `sentry init` or the React Router Framework
Mode wizard? Follow the [React Router quickstart](/platforms/javascript/guides/react-router/)
instead.
Continue with this guide to set up Sentry manually.
</Alert>
<PlatformContent includePath="sentry-init/manual-setup-callout" />

<PlatformContent includePath="getting-started-prerequisites" />

Expand Down
53 changes: 4 additions & 49 deletions docs/platforms/javascript/guides/sveltekit/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,58 +16,13 @@ categories:
<StepComponent>
## Install

<Alert level="warning">
<PlatformContent includePath="sentry-init/experimental-warning" />

The AI-powered `sentry init` flow is currently experimental. To use the existing framework-specific setup instead, see the option below, or check out the [Manual Setup](/platforms/javascript/guides/sveltekit/manual-setup/) guide.
<PlatformContent includePath="sentry-init/install-command" />

</Alert>

<SplitLayout>
<SplitSection>
<SplitSectionText>

Run the Sentry init command in your project directory to automatically configure Sentry in your SvelteKit application.

The command guides you through setup and asks which optional Sentry features you want to enable beyond error monitoring.

</SplitSectionText>

<SplitSectionCode>

```bash
npx sentry@latest init
```

</SplitSectionCode>
</SplitSection>
</SplitLayout>

<Expandable title="How does sentry init work?">

The `sentry init` command is AI-powered. It analyzes your project and generates a tailored integration, rather than applying a fixed template. Here's what it does:
<PlatformContent includePath="sentry-init/how-it-works" />

- **Analyzes your project** — reads project files and manifests to understand your SvelteKit app structure, including monorepos. It also respects AI instruction files such as `CLAUDE.md`, `AGENTS.md`, and `.cursorrules`.
- **Detects your framework** — identifies SvelteKit and selects the `@sentry/sveltekit` SDK.
- **Fetches official Sentry docs** — uses the current Sentry documentation as the source of truth when generating integration code.
- **Installs dependencies** — adds `@sentry/sveltekit` using your project's package manager.
- **Creates and modifies files** — sets up client-side and server-side initialization, SvelteKit hooks or instrumentation, and other selected features based on your SvelteKit version and project structure.
- **Verifies the integration** — re-reads modified files after writing to confirm Sentry was integrated.

For full details on what each file does, see the [Manual Setup](/platforms/javascript/guides/sveltekit/manual-setup/) guide.

</Expandable>

<Expandable title="Prefer the existing SvelteKit wizard?">

If you don't want to use the experimental AI-powered flow, run the framework-specific installation wizard instead:

```bash
npx @sentry/wizard@latest -i sveltekit
```

To configure Sentry manually, follow the [Manual Setup](/platforms/javascript/guides/sveltekit/manual-setup/) guide.

</Expandable>
<PlatformContent includePath="sentry-init/framework-wizard" />

## Avoid Ad Blockers With Tunneling (Optional)

Expand Down
6 changes: 1 addition & 5 deletions docs/platforms/javascript/guides/sveltekit/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,6 @@ sidebar_order: 1
description: "Learn how to manually set up Sentry in your SvelteKit app and capture your first errors."
---

<Alert level="info">
Looking for automatic setup with `sentry init` or the SvelteKit wizard? Follow
the [SvelteKit quickstart](/platforms/javascript/guides/sveltekit/) instead.
Continue with this guide to set up Sentry manually.
</Alert>
<PlatformContent includePath="sentry-init/manual-setup-callout" />

<PlatformContent includePath="getting-started-complete" />
27 changes: 4 additions & 23 deletions docs/platforms/javascript/guides/tanstackstart-react/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,32 +24,13 @@ Please reach out on [GitHub](https://github.com/getsentry/sentry-javascript/issu

## Install

<Alert level="warning">
<PlatformContent includePath="sentry-init/experimental-warning" />

The wizard is currently experimental. If you run into any issues, check out the [Manual Setup](/platforms/javascript/guides/tanstackstart-react/manual-setup/) guide.
<PlatformContent includePath="sentry-init/install-command" />

</Alert>

Run the Sentry init command to automatically configure Sentry in your TanStack Start React application:

```bash
npx sentry@latest init
```

<Expandable title="How does the wizard work?">
<PlatformContent includePath="sentry-init/how-it-works" />

The Sentry init wizard is AI-powered — it analyzes your project and generates a tailored integration, rather than applying a fixed template. Here's what it does:

- **Analyzes your project** — reads your project's files and manifests to understand its structure, including monorepos. It also respects any AI instruction files you have (`CLAUDE.md`, `AGENTS.md`, `.cursorrules`, etc.).
- **Detects your framework** — identifies TanStack Start and selects the right SDK (`@sentry/tanstackstart-react`)
- **Fetches official Sentry docs** — uses the current Sentry documentation as the source of truth when generating your integration code, so you always get up-to-date setup
- **Installs dependencies** — adds `@sentry/tanstackstart-react` using your project's package manager
- **Creates and modifies files** — sets up client-side and server-side initialization, the Vite plugin for source maps, the server entry point, and middleware — all adapted to your project's structure
- **Verifies the integration** — re-reads the modified files after writing to confirm Sentry was correctly integrated

For full details on what each file does, see the [Manual Setup](/platforms/javascript/guides/tanstackstart-react/manual-setup/) guide.

</Expandable>
<PlatformContent includePath="sentry-init/framework-wizard" />

## Verify Your Setup

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,7 @@ categories:
- browser
---

<Alert>

For the fastest setup, we recommend using the [installation wizard](/platforms/javascript/guides/tanstackstart-react/).

</Alert>
<PlatformContent includePath="sentry-init/manual-setup-callout" />

<Alert level="warning" title="Beta">

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<Alert level="warning">

The AI-powered `sentry init` flow is currently experimental. To use the existing framework-specific setup instead, see the option below, or check out the <PlatformLink to="/manual-setup/">Manual Setup</PlatformLink> guide.

</Alert>
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<Alert level="warning">

The AI-powered `sentry init` flow is currently experimental. If you run into any issues, check out the <PlatformLink to="/manual-setup/">Manual Setup</PlatformLink> guide.

</Alert>
11 changes: 11 additions & 0 deletions platform-includes/sentry-init/framework-wizard/javascript.nuxt.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<Expandable title="Prefer the existing Nuxt wizard?">

If you don't want to use the experimental AI-powered flow, run the framework-specific installation wizard instead:

```bash
npx @sentry/wizard@latest -i nuxt
```

To configure Sentry manually, follow the <PlatformLink to="/manual-setup/">Manual Setup</PlatformLink> guide.

</Expandable>
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<Expandable title="Prefer the existing React Router wizard?">

If you don't want to use the experimental AI-powered flow, run the framework-specific installation wizard instead:

```bash
npx @sentry/wizard@latest -i reactRouter
```

To configure Sentry manually, follow the <PlatformLink to="/manual-setup/">Manual Setup</PlatformLink> guide.

</Expandable>
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<Expandable title="Prefer the existing SvelteKit wizard?">

If you don't want to use the experimental AI-powered flow, run the framework-specific installation wizard instead:

```bash
npx @sentry/wizard@latest -i sveltekit
```

To configure Sentry manually, follow the <PlatformLink to="/manual-setup/">Manual Setup</PlatformLink> guide.

</Expandable>
14 changes: 14 additions & 0 deletions platform-includes/sentry-init/how-it-works/javascript.nuxt.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<Expandable title="How does sentry init work?">

The `sentry init` command is AI-powered. It analyzes your project and generates a tailored integration, rather than applying a fixed template. Here's what it does:

- **Analyzes your project** — reads project files and manifests to understand your Nuxt app structure, including monorepos. It also respects AI instruction files such as `CLAUDE.md`, `AGENTS.md`, and `.cursorrules`.
- **Detects your framework** — identifies Nuxt and selects the `@sentry/nuxt` SDK.
- **Fetches official Sentry docs** — uses the current Sentry documentation as the source of truth when generating integration code.
- **Installs dependencies** — adds `@sentry/nuxt` using your project's package manager.
- **Creates and modifies files** — sets up client-side and server-side initialization, Nuxt module configuration, and other selected features based on your project structure.
- **Verifies the integration** — re-reads modified files after writing to confirm Sentry was integrated.

For full details on what each file does, see the <PlatformLink to="/manual-setup/">Manual Setup</PlatformLink> guide.

</Expandable>
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<Expandable title="How does sentry init work?">

The `sentry init` command is AI-powered. It analyzes your project and generates a tailored integration, rather than applying a fixed template. Here's what it does:

- **Analyzes your project** — reads project files and manifests to understand your React Router Framework app structure, including monorepos. It also respects AI instruction files such as `CLAUDE.md`, `AGENTS.md`, and `.cursorrules`.
- **Detects your framework** — identifies React Router v7 Framework Mode and selects the `@sentry/react-router` SDK.
- **Fetches official Sentry docs** — uses the current Sentry documentation as the source of truth when generating integration code.
- **Installs dependencies** — adds `@sentry/react-router` using your project's package manager.
- **Creates and modifies files** — sets up client-side and server-side initialization, error capture, tracing, and other selected features based on your existing project structure.
- **Verifies the integration** — re-reads modified files after writing to confirm Sentry was integrated.

For full details on what each file does, see the <PlatformLink to="/manual-setup/">Manual Setup</PlatformLink> guide.

</Expandable>
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<Expandable title="How does sentry init work?">

The `sentry init` command is AI-powered. It analyzes your project and generates a tailored integration, rather than applying a fixed template. Here's what it does:

- **Analyzes your project** — reads project files and manifests to understand your SvelteKit app structure, including monorepos. It also respects AI instruction files such as `CLAUDE.md`, `AGENTS.md`, and `.cursorrules`.
- **Detects your framework** — identifies SvelteKit and selects the `@sentry/sveltekit` SDK.
- **Fetches official Sentry docs** — uses the current Sentry documentation as the source of truth when generating integration code.
- **Installs dependencies** — adds `@sentry/sveltekit` using your project's package manager.
- **Creates and modifies files** — sets up client-side and server-side initialization, SvelteKit hooks or instrumentation, and other selected features based on your SvelteKit version and project structure.
- **Verifies the integration** — re-reads modified files after writing to confirm Sentry was integrated.

For full details on what each file does, see the <PlatformLink to="/manual-setup/">Manual Setup</PlatformLink> guide.

</Expandable>
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<Expandable title="How does sentry init work?">

The `sentry init` command is AI-powered. It analyzes your project and generates a tailored integration, rather than applying a fixed template. Here's what it does:

- **Analyzes your project** — reads project files and manifests to understand your TanStack Start React app structure, including monorepos. It also respects AI instruction files such as `CLAUDE.md`, `AGENTS.md`, and `.cursorrules`.
- **Detects your framework** — identifies TanStack Start and selects the `@sentry/tanstackstart-react` SDK.
- **Fetches official Sentry docs** — uses the current Sentry documentation as the source of truth when generating integration code.
- **Installs dependencies** — adds `@sentry/tanstackstart-react` using your project's package manager.
- **Creates and modifies files** — sets up client-side and server-side initialization, the Vite plugin for source maps, the server entry point, and middleware based on your project structure.
- **Verifies the integration** — re-reads modified files after writing to confirm Sentry was integrated.

For full details on what each file does, see the <PlatformLink to="/manual-setup/">Manual Setup</PlatformLink> guide.

</Expandable>
Loading
Loading