logging/errors/webpack: Improve error stack traces with blueslip.

This commit improves the output that blueslip produces while
showing error stack traces on the front-end. This is done by
using a library called error-stack-parser to format the stack
traces.

This commit also edits the webpack config to use a different
devtool setting since the previous one did not support sourcemaps
within stack traces. It also removes a plugin that was obviated
by this change.

package.json

@@ -15,6 +15,7 @@
     "emoji-datasource-emojione": "3.0.0",
     "emoji-datasource-google": "3.0.0",
     "emoji-datasource-twitter": "3.0.0",
+    "error-stack-parser": "2.0.1",
     "expose-loader": "0.7.5",
     "file-loader": "1.1.11",
     "flatpickr": "4.5.0",

static/js/blueslip.js

@@ -96,8 +96,23 @@ exports.get_log = function blueslip_get_log() {
     return logger.get_log();
 };
 
+// Format error stacks using the ErrorStackParser
+// external library
+function getErrorStack(stack) {
+    var ex = new Error();
+    ex.stack = stack;
+    return ErrorStackParser
+        .parse(ex)
+        .map(function (stackFrame) {
+            return stackFrame.lineNumber
+            + ': ' + stackFrame.fileName
+            + ' | ' + stackFrame.functionName;
+        }).join('\n');
+}
+
 var reported_errors = {};
 var last_report_attempt = {};
+
 function report_error(msg, stack, opts) {
     opts = _.extend({show_ui_msg: false}, opts);
 
@@ -108,6 +123,7 @@ function report_error(msg, stack, opts) {
     if (page_params.debug_mode) {
         // In development, we display blueslip errors in the web UI,
         // to make them hard to miss.
+        stack = getErrorStack(stack);
         exports.display_errors_on_screen(msg, stack);
     }
 

tools/webpack.config.ts

@@ -124,12 +124,12 @@ export default (env?: string) : webpack.Configuration => {
         resolve: {
             extensions: [".tsx", ".ts", ".js", ".json", ".scss", ".css"],
         },
-        // We prefer cheap-module-eval-source-map over eval because
+        // We prefer cheap-module-source-map over any eval-** options
-        // currently eval has trouble setting breakpoints per line
+        // because the eval-options currently don't support being
-        // in Google Chrome. There's almost no difference
+        // source mapped in error stack traces
-        // between the compilation time for the two and could be
+        // We prefer it over eval since eval has trouble setting
-        // re-evaluated as the size of files grows
+        // breakpoints in chrome.
-        devtool: production ? 'source-map' : 'cheap-module-eval-source-map',
+        devtool: production ? 'source-map' : 'cheap-module-source-map',
     };
     if (production) {
         config.plugins = [
@@ -164,14 +164,6 @@ export default (env?: string) : webpack.Configuration => {
                 filename: "[name].css",
                 chunkFilename: "[id].css"
             }),
-            // We use SourceMapDevToolPlugin in order to enable SourceMaps
-            // in combination with mini-css-extract-plugin and
-            // the devtool setting of cheap-module-eval-source-map.
-            // Without this plugin source maps won't work with that combo.
-            // See https://github.com/webpack-contrib/mini-css-extract-plugin/issues/29
-            new webpack.SourceMapDevToolPlugin({
-                filename: "[file].map"
-            })
         ];
 
         config.devServer = {

version.py

@@ -8,4 +8,4 @@ ZULIP_VERSION = "1.8.1+git"
 # Typically, adding a dependency only requires a minor version bump, and
 # removing a dependency requires a major version bump.
 
-PROVISION_VERSION = '20.0'
+PROVISION_VERSION = '20.1'

yarn.lock

@@ -3046,6 +3046,12 @@ error-ex@^1.2.0, error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
+error-stack-parser@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.1.tgz#a3202b8fb03114aa9b40a0e3669e48b2b65a010a"
+  dependencies:
+    stackframe "^1.0.3"
+
 error@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/error/-/error-7.0.2.tgz#a5f75fff4d9926126ddac0ea5dc38e689153cb02"
@@ -9290,6 +9296,10 @@ stack-trace@0.0.9:
   version "0.0.9"
   resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-0.0.9.tgz#a8f6eaeca90674c333e7c43953f275b451510695"
 
+stackframe@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.0.4.tgz#357b24a992f9427cba6b545d96a14ed2cbca187b"
+
 static-eval@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/static-eval/-/static-eval-2.0.0.tgz#0e821f8926847def7b4b50cda5d55c04a9b13864"

zproject/settings.py

@@ -916,6 +916,7 @@ JS_SPECS = {
             'node_modules/to-markdown/dist/to-markdown.js',
             'node_modules/flatpickr/dist/flatpickr.js',
             'node_modules/flatpickr/dist/plugins/confirmDate/confirmDate.js',
+            'node_modules/error-stack-parser/dist/error-stack-parser.min.js',
             'third/marked/lib/marked.js',
             'generated/emoji/emoji_codes.js',
             'generated/pygments_data.js',