Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/stefanwalther/circleci-angular-sentry

Test a build for Angular with uploads of sourcemaps to sentry.io
https://github.com/stefanwalther/circleci-angular-sentry

angular circleci sentry

Last synced: about 5 hours ago
JSON representation

Test a build for Angular with uploads of sourcemaps to sentry.io

Host: GitHub
URL: https://github.com/stefanwalther/circleci-angular-sentry
Owner: stefanwalther
Created: 2019-09-07T23:42:30.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2023-01-07T09:28:50.000Z (almost 2 years ago)
Last Synced: 2023-03-30T12:01:44.468Z (over 1 year ago)
Topics: angular, circleci, sentry
Language: TypeScript
Homepage:
Size: 1.84 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 25
Metadata Files:
- Readme: README.md
- Contributing: docs/contributing.md

Awesome Lists containing this project

README

        # circleci-angular-sentry

> Test a build for Angular with uploads of sourcemaps to sentry.io

---

## Purpose

This is a sample repository how to build a docker image for a Angular project and after successful build create a new release for sentry.io plus upload the necessary sourcemap files.

## Implementation Instructions

Install necessary dependencies

```js

npm install cross-env --save-dev

npm install replace --save-dev

```

Changes in ./.circleci/config.yml

**Add sentry-release task in `./.circleci/config.yml`**

```yaml

  - run:

      name: sentry.io release

      command: make sentry-release

```

Changes in makefile

**Ensure the following header:**

```bash

ifeq ($(CIRCLE_SHA1),)

RELEASE_VERSION := $(shell git describe --always --long)

else

RELEASE_VERSION := $(CIRCLE_SHA1)

endif

DOCKER_ORG=stefanwalther

DOCKER_REPO=circleci-angular-sentry

```

**Change build task:**

````bash

build:								## Build the docker image (prod)

	NODE_VER=$(NODE_VER)

	@echo 'RELEASE_VERSION: $(RELEASE_VERSION)'

	@echo 'OS: $(OS_NAME)'

	@echo '---'

	docker build --build-arg release_version=$(RELEASE_VERSION) -t $(DOCKER_ORG)/$(DOCKER_REPO) -f Dockerfile.prod .

.PHONY: build

````

**Add `sentry-release` task:**

```bash

sentry-release:						## Do the sentry release

	export DEBUG=1; \

	export SENTRY_AUTH_TOKEN=$(CIRCLECI_ANGULAR_SENTRY_API_TOKEN); \

	export SENTRY_ORG=stefanwalther; \

	export SENTRY_PROJECT=circleci-angular-sentry; \

	export GITHUB_PROJECT=stefanwalther/circleci-angular-sentry; \

	export SENTRY_PROJECT_VERSION=$(shell node -e "console.log(require('./package.json').name)")@$(shell node -e "console.log(require('./package.json').version)"); \

	export SENTRY_LOG_LEVEL=debug; \

	export RELEASE_VERSION=$(RELEASE_VERSION); \

	docker-compose --f=./docker-compose.sentry.yaml run sentry-cli

	#&& docker-compose --f=./docker-compose.sentry.yaml down -t 0;

.PHONY: sentry-release

```

Changes in ./Dockerfile.prod

Handle the build-argument after the first `FROM` statement in `Dockerfile.prod`:

```bash

ARG release_version=not_set

ENV RELEASE_VERSION=$release_version

```

Use the `build:prod` instead of the `build` task

```bash

RUN npm run build:prod

```

Changes on CircleCI

Add the environment variable `CIRCLECI_ANGULAR_SENTRY_API_TOKEN` to CircleCI.

Create the docker-compose.sentry.yml file

```yaml

version: '2'

services:

  app:

    image: stefanwalther/circleci-angular-sentry

    container_name: app

    ports:

      - "8080:80"

    volumes:

      - app-volume:/usr/share/nginx/html

  sentry-cli:

    image: getsentry/sentry-cli

    container_name: sentry-cli

    tty: true

    depends_on:

      - app

    environment:

      - DEBUG=true

      - SENTRY_AUTH_TOKEN=${SENTRY_AUTH_TOKEN}

      - SENTRY_PROJECT_VERSION=${SENTRY_PROJECT_VERSION}

      - SENTRY_ORG=${SENTRY_ORG}

      - SENTRY_PROJECT=${SENTRY_PROJECT}

      - SENTRY_LOG_LEVEL=${SENTRY_LOG_LEVEL}

      - RELEASE_VERSION=${RELEASE_VERSION}

      - GITHUB_PROJECT=${GITHUB_PROJECT}

      - PROJECT_DIR=/work

    volumes:

      - app-volume/:/work

      - ./config/sentry-cli/:/work/sentry-cli/

    command: >

      sh -c "sh ./sentry-cli/sentry-cli-init.sh"

volumes:

  app-volume:

```

Add the ./config/sentry-cli/sentry-cli-init.sh file

See [here](./config/sentry-cli/sentry-cli-init.sh)

Changes in angular.json

**Check that in `angular.json` the following section looks as follows**

```json

"configurations": {

    "production": {

      "fileReplacements": [

        {

          "replace": "src/environments/environment.ts",

          "with": "src/environments/environment.prod.ts"

        }

      ],

      "optimization": true,

      "outputHashing": "all",

      // See here: https://medium.com/angular-athens/make-angulars-source-code-available-to-sentry-with-gitlab-ci-b3020bd60ae6

      "sourceMap": {

        "hidden": true,

        "scripts": true,

        "styles": true

      },

      "extractCss": true,

      "namedChunks": false,

      "aot": true,

      "extractLicenses": false,

    }

  }

```

Angular: Environment settings

**environment.ts settings**

_environment.ts:_

```typescript

export const environment = {

  production: true,

  version: '%RELEASE_VERSION%'

};

```

_environment.prod.ts:_

```typescript

export const environment = {

  production: true,

  version: '%RELEASE_VERSION%'

};

```

Changes in package.json

**Adapt scripts in [package.json](./package.json)**

```js

    "prebuild": "replace '%RELEASE_VERSION%' $RELEASE_VERSION src/environments/environment.prod.ts",

    "postbuild": "replace $RELEASE_VERSION '%RELEASE_VERSION%' src/environments/environment.prod.ts",

    "build:prod": "cross-env RELEASE_VERSION=${RELEASE_VERSION:=unknown} ng build --prod --output-path=dist --source-map",

    "prebuild:prod": "cross-env RELEASE_VERSION=${RELEASE_VERSION:=unknown} echo \"src/environments/environment.prod.ts: Replacing %RELEASE_VERSION% with '$RELEASE_VERSION'\" && replace '%RELEASE_VERSION%' $RELEASE_VERSION src/environments/environment.prod.ts",

    "postbuild:prod": "cross-env RELEASE_VERSION=${RELEASE_VERSION:=unknown} echo \"src/environments/environment.prod.ts: Resetting RELEASE_VERSION\" && replace $RELEASE_VERSION '%RELEASE_VERSION%' src/environments/environment.prod.ts",

  

```

Changes in [sentry-error-handler.ts](./src/_lib/sentry-error-handler.ts)

```typescript

import {environment} from 'src/environments/environment';

```

```typescript

Sentry.init({

    dsn: this.settingsService.settings.sentryDsn,

    environment: this.settingsService.settings.environment,

    release: `${environment.version}`

    });

```

## About

### Author

**Stefan Walther**

* [twitter.com/waltherstefan](http://twitter.com/waltherstefan)  

* [github.com/stefanwalther](http://github.com/stefanwalther) 

* [linkedin.com/in/stefanwalther](https://www.linkedin.com/in/stefanwalther/)  

* [stefanwalther.io](http://stefanwalther.io) - Private blog

### Contributing

Pull requests and stars are always welcome. For bugs and feature requests, [please create an issue](https://github.com/stefanwalther/circleci-angular-sentry/issues). The process for contributing is outlined below:

1. Create a fork of the project

2. Work on whatever bug or feature you wish

3. Create a pull request (PR)

I cannot guarantee that I will merge all PRs but I will evaluate them all.

### License

MIT

***

_This file was generated by [verb-generate-readme](https://github.com/verbose/verb-generate-readme), v0.6.0, on September 26, 2019._