diff --git a/docs/platforms/javascript/guides/angular/index.mdx b/docs/platforms/javascript/guides/angular/index.mdx index 1c326463a5be89..b75ca585cbcb00 100644 --- a/docs/platforms/javascript/guides/angular/index.mdx +++ b/docs/platforms/javascript/guides/angular/index.mdx @@ -22,20 +22,33 @@ at least Angular 17. -## Step 1: Install + +## Install -To install Sentry, run the following command within your project: + + + + +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. + + + + ```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. + + + 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. + - Adds a `Sentry.init()` call into your `main.ts` file @@ -46,11 +59,11 @@ This guide assumes that you enable all features and allow the wizard to add an e -## Step 2: Avoid Ad Blockers With Tunneling (Optional) +## Avoid Ad Blockers With Tunneling (Optional) - + -## 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: @@ -89,6 +102,9 @@ Our next recommended steps for you are: - If you encountered issues with our installation wizard, try setting up Sentry manually +- Find various topics in Troubleshooting - [Get support](https://sentry.zendesk.com/hc/en-us/) + + diff --git a/docs/platforms/javascript/guides/angular/manual-setup.mdx b/docs/platforms/javascript/guides/angular/manual-setup.mdx index 16ac0887997cc8..ede1d75b22d887 100644 --- a/docs/platforms/javascript/guides/angular/manual-setup.mdx +++ b/docs/platforms/javascript/guides/angular/manual-setup.mdx @@ -19,9 +19,23 @@ You need: - Your application up and running - Angular version `14.0.0` or above -## Step 1: Install + -### Install the Sentry SDK +## Install + + + + + + + +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. + + + + ```bash {tabTitle:npm} npm install @sentry/angular --save @@ -35,6 +49,10 @@ yarn add @sentry/angular pnpm add @sentry/angular ``` + + + + In its current major version, the Sentry Angular SDK supports Angular 14 and newer. @@ -59,9 +77,7 @@ Since version 8, `@sentry/angular-ivy` was +### Initialize the SDK + + + + + + + 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 + + + ```typescript {tabTitle: App Config} {filename: main.ts} {5-48} import { bootstrapApplication } from "@angular/platform-browser"; @@ -213,10 +238,30 @@ platformBrowserDynamic() .catch((err) => console.error(err)); ``` + + + + ### Register Sentry Providers + + + + + + 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`: + + +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. + + + + + + + ```typescript {tabTitle: App Config (Angular 19+)} {filename: app.config.ts} {9, 14-25} import { ApplicationConfig, @@ -312,11 +357,9 @@ import * as Sentry from "@sentry/angular"; export class AppModule {} ``` - - -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. - - + + + @@ -337,23 +380,35 @@ export class AppModule { -## Step 3: Add Readable Stack Traces With Source Maps (Optional) - - +### Add Readable Stack Traces With Source Maps (Optional) -Alternatively, take a look at our Uploading Source Maps docs + -## Step 4: Avoid Ad Blockers With Tunneling (Optional) +### Avoid Ad Blockers With Tunneling (Optional) - + -## 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: + + + + +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. + + + Open the page in a browser and click the button to trigger a frontend error. + + + + + + + ```javascript {filename: app.component.ts} {5, 9-11} @Component({ @@ -370,16 +425,24 @@ class AppComponent { } ``` - - Open the page in a browser and click the button to trigger a frontend error. - - - + + + ### 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: + + + + +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. + + + + ```javascript {filename: app.component.ts} {10-11, 13-14} @Component({ @@ -400,13 +463,15 @@ class AppComponent { } ``` -Open the page in a browser and click the button to trigger a frontend error and performance trace. + + + - + @@ -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 customize your configuration - Make use of Angular-specific features @@ -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/) + + diff --git a/docs/platforms/javascript/guides/sveltekit/index.mdx b/docs/platforms/javascript/guides/sveltekit/index.mdx index 84f33a11652a5b..985635c2d1f2a1 100644 --- a/docs/platforms/javascript/guides/sveltekit/index.mdx +++ b/docs/platforms/javascript/guides/sveltekit/index.mdx @@ -13,15 +13,26 @@ categories: -## Step 1: Install + +## Install -To install Sentry using the installation wizard, run the following command within your project: + + + + +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. + + + + ```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. + + + @@ -39,11 +50,11 @@ This guide assumes that you enable all features and allow the wizard to create a -## Step 2: Avoid Ad Blockers With Tunneling (Optional) +## Avoid Ad Blockers With Tunneling (Optional) -## 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: @@ -89,3 +100,5 @@ Our next recommended steps for you are: - [Get support](https://sentry.zendesk.com/hc/en-us/) + + diff --git a/includes/logs/javascript-quick-start-verify-logs-splitlayout.mdx b/includes/logs/javascript-quick-start-verify-logs-splitlayout.mdx new file mode 100644 index 00000000000000..5c3879e1fa3dda --- /dev/null +++ b/includes/logs/javascript-quick-start-verify-logs-splitlayout.mdx @@ -0,0 +1,28 @@ +### Logs + + + + +To verify that Sentry catches your logs, add some log statements to your application: + + + + + +```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", +}); +``` + + + + diff --git a/platform-includes/getting-started-complete/javascript.mdx b/platform-includes/getting-started-complete/javascript.mdx index 7ddf515703df2f..567399d5c00175 100644 --- a/platform-includes/getting-started-complete/javascript.mdx +++ b/platform-includes/getting-started-complete/javascript.mdx @@ -26,54 +26,11 @@ Choose the features you want to configure, and this guide will show you how: ### Add Readable Stack Traces With Source Maps (Optional) - - - - - - The stack traces in your Sentry errors probably won't look like your actual - code without unminifying them. To fix this, upload your{" "} - source maps to Sentry. The - easiest way to do this is by using the Sentry Wizard. - - - - -```bash -npx @sentry/wizard@latest -i sourcemaps -``` - - - - - - + ### Avoid Ad Blockers With Tunneling (Optional) - - - - - -You can prevent ad blockers from blocking Sentry events using tunneling. Use the `tunnel` option in `Sentry.init` to add an API endpoint in your application that forwards Sentry events to Sentry servers. - -This will send all events to the `tunnel` endpoint. However, the events need to be parsed and redirected to Sentry, so you'll need to do additional configuration on the server. You can find a detailed explanation on how to do this on our Troubleshooting page. - - - - -```javascript {3} -Sentry.init({ - dsn: "___PUBLIC_DSN___", - tunnel: "/tunnel", -}); -``` - - - - - + ## Verify Your Setup diff --git a/platform-includes/getting-started-complete/javascript.sveltekit.mdx b/platform-includes/getting-started-complete/javascript.sveltekit.mdx index 7d1ff1237d436d..3e50ac43dde9f1 100644 --- a/platform-includes/getting-started-complete/javascript.sveltekit.mdx +++ b/platform-includes/getting-started-complete/javascript.sveltekit.mdx @@ -51,7 +51,9 @@ Here's an overview of the current support: -## Step 1: Install + + +## Install Choose the features you want to configure, and this guide will show you how: @@ -78,8 +80,18 @@ Choose the features you want to configure, and this guide will show you how: ### Install the Sentry SDK + + + + 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. + + + + + ```bash {tabTitle:npm} npm install @sentry/sveltekit --save ``` @@ -92,16 +104,26 @@ yarn add @sentry/sveltekit pnpm add @sentry/sveltekit ``` -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 You need to initialize and configure the Sentry SDK in three places: the client side, the server side, and your Vite config. ### Configure Client-Side Sentry + + + + Create a client hooks file `src/hooks.client.(js|ts)` in your project if you don't have one already. In this file, import and initialize the Sentry SDK and add the `handleErrorWithSentry` function to the [`handleError` hook](https://svelte.dev/docs/kit/hooks#Shared-hooks-handleError). + + + + ```javascript {filename:src/hooks.client.(js|ts)} {1, 3-43, 49} import * as Sentry from "@sentry/sveltekit"; @@ -157,21 +179,34 @@ export const handleError = Sentry.handleErrorWithSentry(myErrorHandler); // export const handleError = handleErrorWithSentry(); ``` + + + + ### Configure Server-Side Sentry - _Requires SvelteKit `2.31.0` or higher and `@sentry/sveltekit` `10.8.0` or - higher._ If you're using older versions, check out [this - guide](../manual-setup__v10.7.0#configure-server-side-sentry) instead. + +_Requires SvelteKit `2.31.0` or higher and `@sentry/sveltekit` `10.8.0` or higher._ If you're using older versions, check out [this guide](../manual-setup__v10.7.0#configure-server-side-sentry) instead. + - _Requires SvelteKit `2.31.0` or higher and `@sentry/sveltekit` `10.8.0` or - higher._ + +_Requires SvelteKit `2.31.0` or higher and `@sentry/sveltekit` `10.8.0` or higher._ + + + + + Configure server-side instrumentation and tracing in your `svelte.config.js` file: + + + + ```js {filename:svelte.config.js} {3-12} const config = { kit: { @@ -191,10 +226,20 @@ const config = { export default config; ``` + + + + + + Create a `src/instrumentation.server.(js|ts)` file (if you don't have one already) to initialize the server-side SDK: + + + + ```js {filename:src/instrumentation.server.(js|ts)} {1, 3-23} import * as Sentry from "@sentry/sveltekit"; @@ -221,8 +266,18 @@ Sentry.init({ }); ``` + + + + + + Create a server hooks file `src/hooks.server.(js|ts)` in your project if you don't have one already. In this file, add the `handleErrorWithSentry` function to the [`handleError` hook](https://svelte.dev/docs/kit/hooks#Shared-hooks-handleError) and the Sentry request handler to the [`handle` hook](https://kit.svelte.dev/docs/hooks#server-hooks-handle). + + + + ```javascript {filename:src/hooks.server.(js|ts)} {1,7,11} import * as Sentry from "@sentry/sveltekit"; @@ -239,6 +294,9 @@ export const handle = Sentry.sentryHandle(); // export const handle = sequence(Sentry.sentryHandle(), yourHandler()); ``` + + + If you're using SvelteKit versions older than `2.16.0` and encounter Content Security Policy (CSP) errors related to Sentry's `fetch` instrumentation, you can find support in our [Troubleshooting guide](/platforms/javascript/guides/sveltekit/troubleshooting/#configure-csp-for-client-side-fetch-instrumentation). @@ -249,8 +307,15 @@ If you're using SvelteKit versions older than `2.16.0` and encounter Content Sec + + + Create a server hooks file `src/hooks.server.(js|ts)` in your project if you don't have one already. In this file, import and initialize the Sentry SDK and add the `handleErrorWithSentry` function to the [`handleError` hook](https://svelte.dev/docs/kit/hooks#Shared-hooks-handleError) and Sentry's Cloudflare request handler to the [`handle` hook](https://kit.svelte.dev/docs/hooks#server-hooks-handle). + + + + ```javascript {filename:src/hooks.server.(js|ts)} import { handleErrorWithSentry, @@ -294,12 +359,24 @@ export const handleError = Sentry.handleErrorWithSentry(myErrorHandler); // export const handleError = handleErrorWithSentry(); ``` + + + + ### Configure Vite + + + + Add the `sentrySvelteKit` plugin **before** `sveltekit` in your `vite.config.(js|ts)` file to automatically upload source maps to Sentry and instrument `load` functions for tracing if it's configured. + + + + ```javascript {filename:vite.config.(js|ts)} {2,6} import { sveltekit } from "@sveltejs/kit/vite"; import { sentrySvelteKit } from "@sentry/sveltekit"; @@ -311,18 +388,33 @@ export default defineConfig({ }); ``` + + + + ### Configure Cloudflare for Sentry - + -## Step 3: Add Readable Stack Traces With Source Maps (Optional) +### Add Readable Stack Traces With Source Maps (Optional) + + + + To upload source maps for clear error stack traces, add your Sentry auth token, organization, and project slug in your `vite.config.(js|ts)` file: + + + + ```javascript {filename:vite.config.(js|ts)} {6-13} import { sveltekit } from "@sveltejs/kit/vite"; import { sentrySvelteKit } from "@sentry/sveltekit"; @@ -341,21 +433,43 @@ export default { }; ``` + + + + + + To keep your auth token secure, always store it in an environment variable instead of directly in your files: + + + + + + ```bash {filename:.env} SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___ ``` - + + + ### Override Adapter Detection + + + + `sentrySvelteKit` tries to auto-detect your SvelteKit adapter to configure source maps upload correctly. If you're using an unsupported adapter or the wrong one is detected, set it using the `adapter` option: + + + + ```javascript {filename:vite.config.(js|ts)} {7} import { sveltekit } from "@sveltejs/kit/vite"; import { sentrySvelteKit } from "@sentry/sveltekit"; @@ -371,28 +485,40 @@ export default { }; ``` + + + -## Step 4: Avoid Ad Blockers With Tunneling (Optional) +### Avoid Ad Blockers With Tunneling (Optional) - - ## Step 5: Verify Your Setup - - - - ## Step 4: Verify Your Setup - +## Verify Your Setup 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, create a test page, for example, at `src/routes/sentry-example/+page.svelte` with a button that throws an error when clicked: + + + + +To verify that Sentry captures errors and creates issues in your Sentry project, create a test page, for example, at `src/routes/sentry-example/+page.svelte` with a button that throws an error when clicked. + + + Open the page `sentry-example` in a browser and click the button to trigger a + frontend error. + + + + + + + ```html {filename:+page.svelte}