Connect your Angular project to GlitchTip

GlitchTip recommends using @micro-sentry/angular. Alternatively, users who need performance data need to use @sentry/angular-ivy.

@micro-sentry

@micro-sentry features a very small bundle size and is easy to configure.

Install @micro-sentry/angular:

$ npm install --save @micro-sentry/angular

In app.module.ts add MicroSentryModule with your GlitchTip DSN.

import { MicroSentryModule } from '@micro-sentry/angular';

@NgModule({
  imports: [
    MicroSentryModule.forRoot({
      dsn: "YOUR-GLITCHTIP-DSN-HERE",
    }),
  ],
})

Configuration

• dsn - Where to send event data too, found in GlitchTip in project settings.
• environment - Set the running environment name, such as "production". When running in Node, such as Angular Universal, this defaults to environment variable SENTRY_ENVIRONMENT. No default is used in browser.
• release - Set release name such as "1.0". Required to make use of uploaded sourcemaps.
• ignoreErrors
• blacklistUrls

    MicroSentryModule.forRoot({
      dsn: "YOUR-GLITCHTIP-DSN-HERE",
      environment: "production",
      release: "1.0.0"
    }),

@sentry/angular-ivy

@sentry/angular-ivy has more features including performance tracking. The package adds up to 277 KB to your JS bundle size.

Install @sentry/angular-ivy:

$ npm install --save @sentry/angular-ivy

For best results, add this snippet to your main.ts. If you need to set the DSN dynamically, you may set this elsewhere as well.

import { init } from "@sentry/angular-ivy";

init({
  dsn: "YOUR-GLITCHTIP-DSN-HERE",
  autoSessionTracking: false,
});

Configuration

A more robust configuration example:

import { init } from '@sentry/angular-ivy';

.init({
  dsn: "YOUR-GLITCHTIP-DSN-HERE",
  environment: "production",
  release: "1.0.0",
  autoSessionTracking: false,
  tracesSampleRate: 0.01,
});

• dsn - Where to send event data too, found in GlitchTip in project settings.
• release - Set release name such as "1.0". Defaults to environment variable SENTRY_RELEASE.
• environment - Set the running environment name, such as "production". When running in Node, such as Angular Universal, this defaults to environment variable SENTRY_ENVIRONMENT. No default is used in browser.
• sampleRate - Percent of error events to send to GlitchTip. 0.5 would be 50%. Defaults to 1.0.
• tracesSampleRate - Percent of performance transactions to send to GlitchTip. 0.01 would be 1%. We recommend a lower value to save costs/hard drive space.

Performance Monitoring

It's possible to send performance transactions to GlitchTip.

Install @sentry/tracing

Add integration to SDK configuration:

Sentry.init({
  dsn: "GlitchTip DSN",
  integrations: [
    new Integrations.BrowserTracing({
      tracingOrigins: ["localhost", "https://example.com"],
      routingInstrumentation: Sentry.routingInstrumentation,
    }),
  ],
  // Capture 1% of transactions
  tracesSampleRate: 0.01,
});

Show user feedback dialog

Provide a custom Angular ErrorHandler. In your root modules file, adjust providers:

providers: [
  {
    provide: ErrorHandler,
    useValue: Sentry.createErrorHandler({
      showDialog: true,
    }),
  },
],