/ng-conf-2020-sentry-workshop

Primary LanguageTypeScript

Getting Started with Error Monitoring for Angular

Pre-Installation Directions: Setup and deploy angular app

  1. Be sure to have node, NVM, and git installed.

  2. Fork this repository and clone. Set node version as specified:

git clone https://github.com/<your_fork>/ng-conf-sample-app
nvm use
  1. Then install with
npm install
  1. Then build and run server with
npm run deploy

  1. Verify web server is running properly and app can be loaded (go to http://localhost:5000 in the browser and trigger errors)

  2. You should be set for the workshop, where you will add Sentry into this angular application to monitor errors.

Setup Sentry + install SDK

  1. Go to https://sentry.io/signup + 'create your account'.

  2. Follow onboarding steps (select angular project) and instrument code as specified.

  3. Then build and run server with

npm run deploy
  1. Go to http://localhost:5000 and trigger errors. The Sentry onboarding (part-3) should note that event was successfully. Follow link to event in Sentry.io.

Upload source maps (so we can see actual names and stacktraces)

  1. Specify release in Sentry SDK
Sentry.init({
    ...,
    release: environment.release
})
  1. Install sentry-cli to upload sourcemaps
npm install --save-dev @sentry/cli
  1. Create production bundles and sourcemaps
# In angular.json, this is already done. Checkout source maps at dist/
"sourceMap": true

  1. In Makefile, remove placeholder setup_release and uncomment actual one (which is calling upload_sourcemaps).

  2. Create 'New Internal Integration' to obtain AUTH_TOKEN.

Organization Settings -> Developer Settings -> 'New Internal Integration'

NOTE: Release: Admin + Organization: Read & Write permissions are needed

  1. Specify SENTRY_AUTH_TOKEN as environment variable
export SENTRY_AUTH_TOKEN=<YOUR_AUTH_TOKEN>

  1. Specify SENTRY_ORG and SENTRY_PROJECT accordingly in Makefile

  2. Run build/deploy:

npm run deploy

Verify Source Maps are uploaded

Project Settings -> Source Maps

  1. Trigger new errors (http://localhost:5000) and verify filename/stacktrace

Sentry Performance

  1. Head over to Performance on left hand side

  2. Drill down on transaction to view distributed trace

Integrations

Slack (alerting/nofication)

  1. Enable Business Trial (to enable integrations + full feature set)

Organization Settings -> Subscription -> 'Activate Your Trial'

  1. Add Slack integration

Organization Settings -> Integrations -> Slack

  1. Specify in alert rule

  2. Trigger error and verify alert

GitHub

  1. Add GitHub integration

Organization Settings -> Integrations -> GitHub

  1. Add associate_commits to setup_release in Makefile

  2. Run build/deploy + trigger errors

npm run deploy

Go to http://localhost:5000 + click on errors

  1. Pull up error/issue on Sentry. You should see 'Suspect Commit' and 'Suggested Assignee'

Notes

In case you get lost, the working code can be found in the final-state branch (https://github.com/ndmanvar/ng-conf-2020-sentry-workshop/tree/final-code)