Building/Uploading Source Maps and Triggering a Deploy in Angular 11 to Rollbar

.env

ROLLBAR_WRITE_ACCESS_TOKEN=
MAIN_APP_URL='https://...'
ROLLBAR_USERNAME=

README.md

Building/Uploading Source Maps and Triggering a Deploy in Angular 11 to Rollbar

Overview

This an enhancement of the approach in https://github.com/lucasklaassen/angular-rollbar-source-maps

During the build the file src/environments/version.ts is automatically generated containing the definition of the current Git revision:

// this file is automatically generated by git-version.js script
export const version = {revision: '12f54f9'};

Import that version.ts file into the file where you create your Rollbar.Configuration and use it to set your code_version Rollbar parameter.

The same version is used when uploading the source maps and informing Rollbar of the deploy.

The entire process is initiated by a single command:

npm run prod

Installation

1. Edit package.json and add this line to the scripts section:

    "prod": "node git-version.js && ng build --prod --source-map && node rollbar-deploy.js"

2. Create a .env file with values populated for (you probably want to add .env to your .gitignore file also):

ROLLBAR_WRITE_ACCESS_TOKEN=
MAIN_APP_URL='https://...'
ROLLBAR_USERNAME=

3. npm install dotenv
4. Copy git-version.js and rollbar-deploy.js (below) into the same directory as your package.json
5. Edit rollbar.ts to import the environment/version.ts file and set the version in the Rollbar configuration.

git-version.js

const fs = require('fs');

const commitHash = require('child_process')
  .execSync('git rev-parse --short HEAD')
  .toString()
  .trim();

const content =
  '// this file is automatically generated by git-version.js script\n' +
  `export const version = {revision: '${commitHash}'};`;
fs.writeFileSync('./src/environments/version.ts', content, {
  encoding: 'utf8',
});

package.json

{
  ... 
  "scripts": {
    "start": "ng serve",
    "build": "ng build",
    ... ADD:
    "prod": "node git-version.js && ng build --prod --source-map && node rollbar-deploy.js"
  },
...
}

rollbar-deploy.js

require('dotenv').config();

const childProcess = require('child_process');
const fs = require('fs');
const process = require('process');
const request = require('request');

const sendFile = function (file) {
  request(
    {
      url: 'https://api.rollbar.com/api/1/sourcemap',
      headers: {
        'content-type': 'multipart/form-data',
      },
      method: 'POST',
      multipart: [
        {
          'Content-Disposition': 'form-data; name="access_token"',
          body: process.env.ROLLBAR_WRITE_ACCESS_TOKEN,
        },
        {
          'Content-Disposition': 'form-data; name="version"',
          // The version number cannot contain any whitespace or it will break
          body: commitHash,
        },
        {
          'Content-Disposition': 'form-data; name="minified_url"',
          body: `${process.env.MAIN_APP_URL}/${file}`,
        },
        {
          'Content-Disposition': `form-data; name="source_map"; filename="${file}.map"`,
          body: fs.readFileSync(`./www/${file}.map`),
        },
      ],
    },
    function (err, response, body) {
      if (err) {
        console.log('Could not send file', err);
      } else {
        console.log(body);
      }
    }
  );
};

const cleanUpMapFile = function (file) {
  fs.unlink(`./www/${file}.map`, function (err) {
    if (err && err.code == 'ENOENT') {
      console.info("File doesn't exist, won't remove it.");
    } else if (err) {
      console.error('Error occurred while trying to remove file');
    } else {
      console.info(`Removed ./www/${file}.map`);
    }
  });
};

const commitHash = childProcess
  .execSync('git rev-parse --short HEAD')
  .toString()
  .trim();

fs.readdir('./www/', function (err, files) {
  if (err) {
    console.error('Could not list the directory.', err);
    process.exit(1);
  }
  files.forEach(function (file, index) {
    if (file.endsWith('.js') && fs.existsSync(`./www/${file}.map`)) {
      sendFile(file);
      cleanUpMapFile(file);
    }
  });
});

request(
  {
    url: 'https://api.rollbar.com/api/1/deploy',
    headers: {
      'X-Rollbar-Access-Token': process.env.ROLLBAR_WRITE_ACCESS_TOKEN,
    },
    method: 'POST',
    json: {
      environment: 'prod',
      revision: commitHash,
      rollbar_username: process.env.ROLLBAR_USERNAME,
    },
  },
  function (err, response, body) {
    if (err) {
      console.log('Could not deploy new version ', err);
    } else {
      console.log(body);
    }
  }
);

rollbar.ts

import * as Rollbar from 'rollbar';
import {
  Injectable,
  Inject,
  InjectionToken,
  ErrorHandler,
} from '@angular/core';
import { environment } from '../environments/environment';
import { version } from '../environments/version';  // <== ADD

const rollbarConfig: Rollbar.Configuration = {
  accessToken: environment.rollbarAccessToken,
  captureUncaught: true,
  captureUnhandledRejections: true,
  nodeSourceMaps: false,
  inspectAnonymousErrors: true,
  ignoreDuplicateErrors: true,
  wrapGlobalEventHandlers: false,
  scrubRequestBody: true,
  exitOnUncaughtException: false,
  stackTraceLimit: 20,
  enabled: environment.env !== 'dev',
  environment: environment.env,
  },
  payload: {
    environment: environment.env,
    client: {
      javascript: {
        code_version: version,  // <== ADD
        // Optionally have Rollbar guess which frames the error was thrown from
        // when the browser does not provide line and column numbers.
        guess_uncaught_frames: true,
      },
...