diff --git a/middleware/webpack.js b/middleware/webpack.js
index 9fd021f758e6..50c56c30e423 100644
--- a/middleware/webpack.js
+++ b/middleware/webpack.js
@@ -1,12 +1,20 @@
 const webpack = require('webpack')
 const middleware = require('webpack-dev-middleware')
 const config = require('../webpack.config')
+const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
 
 const webpackCompiler = webpack({
   ...config,
-  mode: 'development'
+  mode: 'development',
+  plugins: [
+    ...config.plugins,
+    new FriendlyErrorsWebpackPlugin({
+      clearConsole: false
+    })
+  ]
 })
 
 module.exports = middleware(webpackCompiler, {
-  publicPath: config.output.publicPath
+  publicPath: config.output.publicPath,
+  logLevel: 'silent'
 })
diff --git a/package-lock.json b/package-lock.json
index 55b713a58e95..a20693f69416 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6718,6 +6718,15 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "error-stack-parser": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.6.tgz",
+      "integrity": "sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==",
+      "dev": true,
+      "requires": {
+        "stackframe": "^1.1.1"
+      }
+    },
     "es-abstract": {
       "version": "1.17.7",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.7.tgz",
@@ -8492,6 +8501,65 @@
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
       "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
     },
+    "friendly-errors-webpack-plugin": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.0.tgz",
+      "integrity": "sha512-K27M3VK30wVoOarP651zDmb93R9zF28usW4ocaK3mfQeIEI5BPht/EzZs5E8QLLwbLRJQMwscAjDxYPb1FuNiw==",
+      "dev": true,
+      "requires": {
+        "chalk": "^1.1.3",
+        "error-stack-parser": "^2.0.0",
+        "string-width": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
+          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
+          "dev": true,
+          "requires": {
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^4.0.0"
+          },
+          "dependencies": {
+            "strip-ansi": {
+              "version": "4.0.0",
+              "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+              "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+              "dev": true,
+              "requires": {
+                "ansi-regex": "^3.0.0"
+              }
+            }
+          }
+        }
+      }
+    },
     "from": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
@@ -18695,6 +18763,12 @@
       "integrity": "sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==",
       "dev": true
     },
+    "stackframe": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.2.0.tgz",
+      "integrity": "sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==",
+      "dev": true
+    },
     "start-server-and-test": {
       "version": "1.11.3",
       "resolved": "https://registry.npmjs.org/start-server-and-test/-/start-server-and-test-1.11.3.tgz",
diff --git a/package.json b/package.json
index bdbaab89c1ee..1e2089be0bd0 100644
--- a/package.json
+++ b/package.json
@@ -98,6 +98,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "event-to-promise": "^0.8.0",
+    "friendly-errors-webpack-plugin": "^1.7.0",
     "graphql": "^14.5.8",
     "heroku-client": "^3.1.0",
     "husky": "^4.2.1",