How to generate sourcemaps using Angular CLI and upload them to Sentry?

Question

There are two ways to set up sourcemaps: having them hosted on the site and referenced in the bundled files or uploading them directly to a service like sentry. I'm trying to accomplish the latter. The problem is that there seems to be no way to generate sourcemaps using angular cli without having the filepath written to the bundled files.

My first thought was to have two builds - one with sourcemaps generate and one without. I would then just deploy the build without sourcemaps and upload the build with them to sentry. That doesn't work because the bundle filenames are different (angular cli uses the file hash as the filename for cache busting and when you generate sourcemaps it adds the path to the .map file as a comment at the end causing a change in hash and filename).

My other option would be to build with sourcemaps, upload them to sentry, and then delete the map files before deploying the site. The problem there though is that the bundle files still contain a reference to a now non-existent map file. That shouldn't be an issue in and of itself but it might raise an issue with extensions or browsers down the line and just seems like a hackish solution.

How would you implementing something like this into the build process?

Answer 1

As mentioned in the comments, you can enable sourceMaps in the angular.json file like this:

 "configurations": {
  "production": {
    "sourceMap": {
      "scripts": true,
      "styles": true,
      "hidden": true
    },

Also, I recommend you remove the .map files after uploading to sentry and before deploying. So in your ci add this line:

rm -rf dist/YOUR_PROJECT/*.map

Answer 2

Here is the article which explains how to upload and monitor angular sourcemaps to sentry.

Answer 3

If you want to run it with docker, I suggest to use docker-compose to do so.

Here is a working docker-compose.yaml which is using your project in parallel to selenium and takes care of the networking between the containers:

---
version: '3.4'

services:
  php:
    build: .
    depends_on:
      - selenium
    volumes:
      - ./:/usr/src/app:rw,cached

  selenium:
    image: selenium/standalone-chrome:4
    shm_size: 2gb
    container_name: selenium
    ports:
      - "4444:4444"
      - "7900:7900"
    environment:
      - VNC_NO_PASSWORD=1
      - SCREEN_WIDTH=1920
      - SCREEN_HEIGHT=1080

after you created this file, you can simply run docker-compose up -d to start the containers and type this to start your webdriver tests:

docker-compose exec php vendor/bin/codecept run

And one nice feature is, that you can connect the selenium container via VNC and see, what the test is actually doing: http://localhost:7900/