Uploading source maps for Typescript files

Hi.

I’m trying to upload the source maps of a NodeJS project written in Typescript to Bugsnag. The code doesn’t get minified, uglyfied or concatenated. Just compiled from Typescript to Javascript. The project is running on Firebase Functions.

First of all is this even possible to upload the source maps for Typescript to be shown on the dashboard?

Steps to reproduce

What I tried is using the bugsnag-sourcemaps package to upload the source maps manually. I also triggered the following error: Preview

Currently I’m just trying to upload the single source map file in which the error is thrown

const upload = require('bugsnag-sourcemaps').upload;
const glob = require('glob');
const bugsnagKey = '...';
const path = require('path');

const projectRoot = path.resolve(__dirname, '..');
const dist = path.resolve(projectRoot, 'dist');

glob(`${dist}/app/controllers/internal_controller.js.map`, (err, files) => {
	if (err) throw err;

	Promise.all(files.map(processMap))
		.then((result) => {
			console.log(result);
		})
		.catch((err) => {
			console.error(err);
			process.exit(1);
		});
});

function processMap(sourceMapFile) {
	const localFile = sourceMapFile.split('.map')[0];
	console.log('Local file:', localFile);
	const relativeFile = localFile.split(dist)[1];
	const remoteFileUrl = `/user_code/dist${relativeFile}`;
	console.log('URL:', remoteFileUrl);
	const tsFile = path.join(projectRoot, 'src', relativeFile.replace('.js', '.ts'));
	console.log('TS file:', tsFile);
	return upload({
		apiKey: bugsnagKey,
		// appVersion: appVersion,
		minifiedUrl: remoteFileUrl,
		sourceMap: sourceMapFile,
		minifiedFile: localFile,
		projectRoot: projectRoot,
		sources: {
			[remoteFileUrl]: tsFile
		},
		uploadSources: true,
		overwrite: true,
	});
};

Upload is a success and those lines get printed:

Local file: /home/dominic/workspace/tablechamp-api/dist/app/controllers/internal_controller.js
URL: /user_code/dist/app/controllers/internal_controller.js
TS file: /home/dominic/workspace/tablechamp-api/src/app/controllers/internal_controller.ts

Version

Using "bugsnag-sourcemaps": "^1.0.3",

Additional information

I’m not setting any project version while uploading. The error in the dashboard doesn’t show a version as well.

Project: freshfox/tablechamp-api

[bengourley]

It shouldn’t be too hard, you’ll just want to glob over all .map files in your directory and call upload() on them, along with the appopriate parameters for bugsnag-sourcemaps.

const glob = require('glob')
const fs = require('fs')
const parallel = require('run-parallel-limit')
const { upload } = require('bugsnag-sourcemaps')

// find every .map file in your dist directory
glob('path/to/dist/**/*.map', (err, files) => {
  if (err) throw err

  // for each source map, get an upload function and
  // pass it to the parallel runner utility – this limits the
  // upload concurrency to 5 at once
  parallel(files.map(f => getUploadFn(f), 5, (err) => {
    if (err) throw err
    console.log('done')
  })
})

function getUploadFn (f) {
  return () => {
    console.log(`Uploading source map ${f}`)
    upload({
      apiKey: 'YOUR_API_KEY_HERE',
      appVersion: '1.2.3',
      // this must match the path that will appear in your error reports
      minifiedUrl: path.relative(projectRoot, f.replace(/\.map$/, '')),
      // this is the path to the source map
      sourceMap: f,
      // this is the path to the js file that the source map is for
      minifiedFile: f.replace(/\.map$/, '')
    })
  }
}

Note that this is just a sketch – I just wrote it directly here on GitHub and didn’t run it!

[bmakuh]

Thanks for the great explanation!