Angular
Learn how to set up Sentry in your Angular application and capture your first errors.
You need:
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
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.
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.
Sentry.init({
dsn: "___PUBLIC_DSN___",
tunnel: "/tunnel",
});
Sentry.init({
dsn: "___PUBLIC_DSN___",
tunnel: "/tunnel",
});
By default, the SDK sends user identity data (IP address, ID, and similar) and other data like HTTP bodies and URL query parameters. This will give you rich debugging context.
The SDK always filters sensitive values whose keys match a built-in denylist, such as auth or password, and sends [Filtered] instead.
To send less data, turn off the categories you don't need in the dataCollection option. For the full list of categories and their defaults, see the dataCollection options.
Sentry.init({
dsn: "___PUBLIC_DSN___",
dataCollection: {
userInfo: false,
// other categories
},
});
Sentry.init({
dsn: "___PUBLIC_DSN___",
dataCollection: {
userInfo: false,
// other categories
},
});
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:
- Open the page you added the example component to in your browser.
- 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.
Tip
Don't forget to explore the example component's code in your project to understand what's happening after your button click.
Logs (enabled by default)
See structured log entries from your application. You can send logs from anywhere:
Sentry.logger.info("User action", { userId: "123" });
Sentry.logger.warn("Slow response", { duration: 5000 });
Sentry.logger.error("Operation failed", { reason: "timeout" });
Sentry.logger.info("User action", { userId: "123" });
Sentry.logger.warn("Slow response", { duration: 5000 });
Sentry.logger.error("Operation failed", { reason: "timeout" });
Learn more about Logs configuration.
Application Metrics (enabled by default) NEW
Track and analyze custom application metrics to understand trends and patterns in your app's performance and behavior over time:
Sentry.metrics.count("checkout.failed", 1);
Sentry.metrics.gauge("queue.depth", 42);
Sentry.metrics.distribution("api_latency", 187, {
unit: "millisecond",
});
Sentry.metrics.count("checkout.failed", 1);
Sentry.metrics.gauge("queue.depth", 42);
Sentry.metrics.distribution("api_latency", 187, {
unit: "millisecond",
});
Learn more about Application Metrics.
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).
Important
Errors triggered from within your browser's developer tools (like the browser console) are sandboxed, so they will not trigger Sentry's error monitoring.
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
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").
