Skip to content

index.mdx

Latest commit

 

History

History
110 lines (70 loc) · 4.25 KB

index.mdx

File metadata and controls

110 lines (70 loc) · 4.25 KB
title Angular
description Learn how to set up Sentry in your Angular application and capture your first errors.
sdk sentry.javascript.angular
categories
javascript
browser

Prerequisites

You need:

  • A Sentry account and project
  • Your application up and running
  • Angular version 17.0.0 or above

If you're using Angular 16 or older, install and Set Up the SDK Manually. The Sentry Angular SDK still works for Angular versions 14 and newer but the installation wizards requires at least Angular 17.

## Install

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.

npx @sentry/wizard@latest -i angular

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 guide.

  • Adds a Sentry.init() call into your main.ts file
  • Registers the Sentry ErrorHandler and TraceService in your app.config.ts file
  • Creates .sentryclirc with an auth token to upload source maps (this file is automatically added to .gitignore)
  • Walks you through enabling source maps upload when making a production build, locally as well as in CI
  • Adds an example component to your application to help verify your Sentry setup

Avoid Ad Blockers With Tunneling (Optional)

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:

  1. Open the page you added the example component to in your browser.
  2. Click the "Throw error" button. This triggers an error.

Sentry captures this error for you. Additionally, the button click starts a trace to measure the time it takes for the error to be thrown.

Don't forget to explore the example component's code in your project to understand what's happening after your button click.

View Captured Data in Sentry

Now, head over to your project on Sentry.io to view the collected data (it takes a couple of moments for the data to appear).

Next Steps

At this point, you should have integrated Sentry into Angular application and should already be sending error and tracing data to your Sentry project.

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 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
  • Learn how to manually capture errors
  • If you encountered issues with our installation wizard, try setting up Sentry manually
  • Find various topics in Troubleshooting
  • Get support