Skip to content

docs(js): Use split layout in Angular & SvelteKit quick start guide #17227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
inventarSarah wants to merge 4 commits into
base: master
Choose a base branch
from
Open

docs(js): Use split layout in Angular & SvelteKit quick start guide #17227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
98e40bb
update split layout Angular
inventarSarah Mar 31, 2026
37b070b
sveltekit split layout and includes
inventarSarah Mar 31, 2026
22b76c2
Merge branch 'master' of github.com:getsentry/sentry-docs into smi/qu…
inventarSarah Apr 2, 2026
ef3d77a
create temporary include files for split layout
inventarSarah Apr 2, 2026
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
28 changes: 22 additions & 6 deletions docs/platforms/javascript/guides/angular/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,33 @@ at least Angular 17.

</Expandable>

## Step 1: Install
<StepComponent>
## Install

To install Sentry, run the following command within your project:
<SplitLayout>
<SplitSection>
<SplitSectionText>

Run the Sentry wizard to automatically configure Sentry in your Angular application. It will then guide you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring.

</SplitSectionText>

<SplitSectionCode>

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

The wizard then guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring.
</SplitSectionCode>
</SplitSection>
</SplitLayout>

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

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

Prefer to set things up yourself? Check out the [Manual Setup](/platforms/javascript/guides/angular/manual-setup/) guide.

<Expandable title="What does the installation wizard change inside your application?">

- Adds a `Sentry.init()` call into your `main.ts` file
Expand All @@ -46,11 +59,11 @@ This guide assumes that you enable all features and allow the wizard to add an e

</Expandable>

## Step 2: Avoid Ad Blockers With Tunneling (Optional)
## Avoid Ad Blockers With Tunneling (Optional)

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

## Step 3: Verify
## Verify

If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that the Sentry SDK is sending data to your Sentry project by using the example component created by the installation wizard:

Expand Down Expand Up @@ -89,6 +102,9 @@ Our next recommended steps for you are:
<Expandable permalink={false} title="Are you having problems setting up the SDK?">

- If you encountered issues with our installation wizard, try <PlatformLink to="/manual-setup">setting up Sentry manually</PlatformLink>
- Find various topics in <PlatformLink to="/troubleshooting">Troubleshooting</PlatformLink>
- [Get support](https://sentry.zendesk.com/hc/en-us/)

</Expandable>

</StepComponent>
124 changes: 96 additions & 28 deletions docs/platforms/javascript/guides/angular/manual-setup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,23 @@ You need:
- Your application up and running
- Angular version `14.0.0` or above

## Step 1: Install
<StepComponent>

### Install the Sentry SDK
## Install

<SplitLayout>

<SplitSection>

<SplitSectionText>

Run the command for your preferred package manager to add the Sentry SDK to your application.

If you're updating your Sentry SDK to the latest version, check out our [migration guide](https://github.com/getsentry/sentry-javascript/blob/master/MIGRATION.md) to learn more about breaking changes.

</SplitSectionText>

<SplitSectionCode>

```bash {tabTitle:npm}
npm install @sentry/angular --save
Expand All @@ -35,6 +49,10 @@ yarn add @sentry/angular
pnpm add @sentry/angular
```

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

<Expandable title="Which SDK version should you use with your Angular version?" permalink="true" level="warning">

In its current major version, the Sentry Angular SDK supports Angular 14 and newer.
Expand All @@ -59,9 +77,7 @@ Since version 8, `@sentry/angular-ivy` was <PlatformLink to="/migration/v7-to-v8

</Expandable>

If you're updating your Sentry SDK to the latest version, check out our [migration guide](https://github.com/getsentry/sentry-javascript/blob/master/MIGRATION.md) to learn more about breaking changes.

## Step 2: Configure
## Configure

Choose the features you want to configure, and this guide will show you how:

Expand All @@ -77,10 +93,19 @@ Choose the features you want to configure, and this guide will show you how:

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

### Initialize the SDK

<SplitLayout>

<SplitSection>

<SplitSectionText>

The main configuration should happen as early as possible in your app's lifecycle. Typically that means in your `main.ts` file.
In addition, you'll need to register some providers to fully instrument your application.

### Initialize the SDK
</SplitSectionText>

<SplitSectionCode>

```typescript {tabTitle: App Config} {filename: main.ts} {5-48}
import { bootstrapApplication } from "@angular/platform-browser";
Expand Down Expand Up @@ -213,10 +238,30 @@ platformBrowserDynamic()
.catch((err) => console.error(err));
```

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

### Register Sentry Providers

<SplitLayout>

<SplitSection>

<SplitSectionText>

The Sentry Angular SDK exports a couple of Angular providers that are necessary to fully instrument your application. We recommend registering them in your `app.config.ts` or main `app.module.ts`:

<Alert level="warning">

If your Angular app is configured for SSR, make sure that the Sentry providers are not accidentally passed to the SSR config (`app.config.server.ts`). The Sentry Angular SDK can only be used in the browser.

</Alert>

</SplitSectionText>

<SplitSectionCode>

```typescript {tabTitle: App Config (Angular 19+)} {filename: app.config.ts} {9, 14-25}
import {
ApplicationConfig,
Expand Down Expand Up @@ -312,11 +357,9 @@ import * as Sentry from "@sentry/angular";
export class AppModule {}
```

<Alert>

If your Angular app is configured for SSR, make sure that the Sentry providers are not accidentally passed to the SSR config (`app.config.server.ts`). The Sentry Angular SDK can only be used in the browser.

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

<OnboardingOption optionId="performance">

Expand All @@ -337,23 +380,35 @@ export class AppModule {

</OnboardingOption>

## Step 3: Add Readable Stack Traces With Source Maps (Optional)

<PlatformContent includePath="getting-started-sourcemaps-short-version" />
### Add Readable Stack Traces With Source Maps (Optional)

Alternatively, take a look at our <PlatformLink to="/sourcemaps">Uploading Source Maps</PlatformLink> docs
<PlatformContent includePath="getting-started-sourcemaps-short-version-splitlayout" />

## Step 4: Avoid Ad Blockers With Tunneling (Optional)
### Avoid Ad Blockers With Tunneling (Optional)

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

## Step 5: Verify
## Verify

Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.

### Issues

To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your components (e.g. `app.component.ts`), which will trigger an error that Sentry will capture when you click it:
<SplitLayout>
<SplitSection>
<SplitSectionText>

To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your components (e.g. `app.component.ts`), which will trigger an error that Sentry will capture when you click it.

<OnboardingOption optionId="performance" hideForThisOption>
Open the page in a browser and click the button to trigger a frontend error.
</OnboardingOption>

<PlatformContent includePath="getting-started-browser-sandbox-warning" />

</SplitSectionText>

<SplitSectionCode>

```javascript {filename: app.component.ts} {5, 9-11}
@Component({
Expand All @@ -370,16 +425,24 @@ class AppComponent {
}
```

<OnboardingOption optionId="performance" hideForThisOption>
Open the page in a browser and click the button to trigger a frontend error.
</OnboardingOption>

<PlatformContent includePath="getting-started-browser-sandbox-warning" />
</SplitSectionCode>
</SplitSection>
</SplitLayout>

<OnboardingOption optionId="performance">
### Tracing

To test your tracing configuration, update the previous code snippet to start a trace to measure the time it takes to execute your code:
<SplitLayout>
<SplitSection>
<SplitSectionText>

To test your tracing configuration, update the previous code snippet to start a trace to measure the time it takes to execute your code.

Open the page in a browser and click the button to trigger a frontend error and performance trace.

</SplitSectionText>

<SplitSectionCode>

```javascript {filename: app.component.ts} {10-11, 13-14}
@Component({
Expand All @@ -400,13 +463,15 @@ class AppComponent {
}
```

Open the page in a browser and click the button to trigger a frontend error and performance trace.
</SplitSectionCode>
</SplitSection>
</SplitLayout>

</OnboardingOption>

<OnboardingOption optionId="logs">

<Include name="logs/javascript-quick-start-verify-logs" />
<Include name="logs/javascript-quick-start-verify-logs-splitlayout" />

</OnboardingOption>

Expand All @@ -422,6 +487,7 @@ At this point, you should have integrated Sentry into your Angular application a

Now's a good time to customize your setup and look into more advanced topics. Our next recommended steps for you are:

- Explore [practical guides](/guides/) on what to monitor, log, track, and investigate after setup
- Extend Sentry to your backend using one of our [SDKs](/)
- Continue to <PlatformLink to="/configuration">customize your configuration</PlatformLink>
- Make use of <PlatformLink to="/features">Angular-specific features</PlatformLink>
Expand All @@ -434,3 +500,5 @@ Now's a good time to customize your setup and look into more advanced topics. Ou
- [Get support](https://sentry.zendesk.com/hc/en-us/)

</Expandable>

</StepComponent>
23 changes: 18 additions & 5 deletions docs/platforms/javascript/guides/sveltekit/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,26 @@ categories:

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

## Step 1: Install
<StepComponent>
## Install

To install Sentry using the installation wizard, run the following command within your project:
<SplitLayout>
<SplitSection>
<SplitSectionText>

Run the Sentry wizard to automatically configure Sentry in your Angular application. It will then guide you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring.

</SplitSectionText>

<SplitSectionCode>

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

The wizard then guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring.
</SplitSectionCode>
</SplitSection>
</SplitLayout>

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

Expand All @@ -39,11 +50,11 @@ This guide assumes that you enable all features and allow the wizard to create a

</Expandable>

## Step 2: Avoid Ad Blockers With Tunneling (Optional)
## Avoid Ad Blockers With Tunneling (Optional)

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

## Step 3: Verify Your Setup
## 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 and route created by the installation wizard:

Expand Down Expand Up @@ -89,3 +100,5 @@ Our next recommended steps for you are:
- [Get support](https://sentry.zendesk.com/hc/en-us/)

</Expandable>

</StepComponent>
28 changes: 28 additions & 0 deletions includes/logs/javascript-quick-start-verify-logs-splitlayout.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
### Logs <FeatureBadge type="new" size="small" />

<SplitLayout>
<SplitSection>
<SplitSectionText>
To verify that Sentry catches your logs, add some log statements to your application:

</SplitSectionText>

<SplitSectionCode>

```javascript
Sentry.logger.info("User example action completed");

Sentry.logger.warn("Slow operation detected", {
operation: "data_fetch",
duration: 3500,
});

Sentry.logger.error("Validation failed", {
field: "email",
reason: "Invalid email",
});
```

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