build(webpack): add source maps for @influxdata/giraffe prod builds (#14908)

* build(webpack): add source maps for @influxdata/giraffe prod builds

We were getting runtime errors in the prod builds via honeybadger.
They were unreadable because we did not have source maps for giraffe.

We were only able to get this working for prod builds but not dev
despite trying putting it in the webpack common file.  This is good
'nuff for our purpose now, but maybe we'll need further investigation.

Bonus commit... I added a new make target of influxd so I would not
need to type so much.

Co-authored-by: Andrew Watkins <watts@influxdb.com>

* build(webpack): add clockface source maps to production build

 Co-authored-by: Andrew Watkins <watts@influxdb.com>

Makefile

@@ -67,6 +67,9 @@ subdirs: $(SUBDIRS)
 $(CMDS): $(SOURCES)
 	$(GO_BUILD) -o $@ ./cmd/$(shell basename "$@")
 
+# Ease of use build for just the go binary
+influxd: bin/$(GOOS)/influxd
+
 #
 # Define targets for the web ui
 #
@@ -180,4 +183,4 @@ protoc:
 	chmod +x /go/bin/protoc
 
 # .PHONY targets represent actions that do not create an actual file.
-.PHONY: all subdirs $(SUBDIRS) run fmt checkfmt tidy checktidy checkgenerate test test-go test-js test-go-race bench clean node_modules vet nightly chronogiraffe dist ping protoc e2e run-e2e
+.PHONY: all subdirs $(SUBDIRS) run fmt checkfmt tidy checktidy checkgenerate test test-go test-js test-go-race bench clean node_modules vet nightly chronogiraffe dist ping protoc e2e run-e2e influxd

ui/package.json

@@ -144,6 +144,7 @@
     "react-testing-library": "^5.4.4",
     "sass": "^1.22.7",
     "sass-loader": "^7.1.0",
+    "source-map-loader": "^0.2.4",
     "style-loader": "^0.23.1",
     "terser-webpack-plugin": "^1.3.0",
     "ts-jest": "^24.0.0",

ui/webpack.common.ts

@@ -10,6 +10,7 @@ module.exports = {
   context: __dirname,
   output: {
     path: path.resolve(__dirname, 'build'),
+    sourceMapFilename: '[name].js.map',
   },
   entry: {
     app: './src/bootstrap.ts',

ui/webpack.prod.ts

@@ -1,10 +1,15 @@
 export {}
-const merge = require('webpack-merge')
+
+// utils
 const common = require('./webpack.common.ts')
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
-const TerserJSPlugin = require('terser-webpack-plugin')
+const merge = require('webpack-merge')
+const path = require('path')
+
+// Plugins
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const TerserJSPlugin = require('terser-webpack-plugin')
 
 module.exports = merge(common, {
   mode: 'production',
@@ -28,6 +33,15 @@ module.exports = merge(common, {
           },
         ],
       },
+      {
+        test: /\.js$/,
+        enforce: 'pre', // this forces this rule to run first.
+        use: ['source-map-loader'],
+        include: [
+          path.resolve(__dirname, 'node_modules/@influxdata/giraffe'),
+          path.resolve(__dirname, 'node_modules/@influxdata/clockface'),
+        ],
+      },
     ],
   },
   optimization: {

ui/yarn.lock

@@ -2194,6 +2194,13 @@ async@^1.5.2:
   resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
   integrity sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=
 
+async@^2.5.0:
+  version "2.6.3"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
+  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
+  dependencies:
+    lodash "^4.17.14"
+
 async@~0.2.6:
   version "0.2.10"
   resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
@@ -10987,6 +10994,14 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
+source-map-loader@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-0.2.4.tgz#c18b0dc6e23bf66f6792437557c569a11e072271"
+  integrity sha512-OU6UJUty+i2JDpTItnizPrlpOIBLmQbWMuBg9q5bVtnHACqw1tn9nNwqJLbv0/00JjnJb/Ee5g5WS5vrRv7zIQ==
+  dependencies:
+    async "^2.5.0"
+    loader-utils "^1.1.0"
+
 source-map-resolve@^0.5.0:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"