Use sentry-cli to make a release and upload sourcemaps

Background

• We are expect monitoring errors in the application on Production environment, in order to have a full history log of enough info for developers debug, without self implementing an tool, Sentry can help.

Integrate Sentry to the application.

• Use Vue App as an example: Example

Use sentry-cli

• Once sentry is integrated into the App, we may need to make another release for the App to the Production enviornment, and we can send an event to Sentry include a new release version with new artifacts. The sentry-cli can help to complete this process
• A new release version can be customized whatever it makes sense to help recogonizing the version of the Application, or you can use Sentry integration to connect a Github repo and link commits to the release.(Doc)
• Normally if sourcemap is included in the built artifacts of a vue application, in the browser environment we can get the full errors stack trace, and the source code will also be viewed on the broswer dev tools. But on the other hand, we do not want people to see the source code but we need the error stack trace, we can:
  1. Build the application
  2. Uploading sourcemaps to Sentry and only view stack trace on Sentry issue detail page
  3. Deleting sourcemaps after uploading sourcemaps to Sentry and before App deployment.

Examlpe of Application deployment process include sentry upload sourcemaps (Github action).

name: Deployment

on:
  push:
    # the branch triggers a new deployment on Production
    branches: ["main"]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      # some steps for initialize environment
      - name: Install Sentry CLI
        run: |
          curl -sL https://sentry.io/get-cli/ | bash

      # Use sentry-cli helper `propose-versio` to create a new version
      - name: Create new release and save to .env
        run: |
          export VERSION=$(echo `sentry-cli releases propose-version`)
	  # Any other steps you want to store your new relase version

      - name: Build
        run: |
          npm install
          npm run build

      # NOTE: you may consider to setup your own --url-prefix, which is important to let Sentry recognize the source path for .map files when 
      - name: Sentry release and upload sourcemap
        run: |
          sentry-cli releases new "$VERSION"
          sentry-cli releases set-commits --auto "$VERSION"
          sentry-cli releases files "$VERSION" upload-sourcemaps ./dist --url-prefix='your-prefix'
          sentry-cli releases finalize "$VERSION"

      - name: Remove sourcemaps
        run: rm -rf ./dist/**/*.map

      - name: Deployment
	run: |
          # your own script to deploy the application

NOTE

• In the github action Sentry release and upload sourcemap step, in different application build config the built folder maybe different, it will affect the output of the path for the sourcemap file. Should double check the build config and correctly set the --url-prefix option when uploading your sourcemaps to sentry, reference: Sentry Release Management