Make error location clickable in IDE

app/build-config/craco.config.js

@@ -4,6 +4,7 @@ const { BABEL_INCLUDED_REGEXP, BABEL_EXCLUDED_REGEXP, CSS_URL_ROOT_PATH,
 } = require("./constants");
 const SVGRLoader = require.resolve("@svgr/webpack");
 const FileLoader = require.resolve("file-loader");
+const { uuiCustomFormatter } = require("./utils/issueFormatter");
 
 /**
  * See https://craco.js.org/
@@ -89,6 +90,13 @@ function configureWebpack(config, { paths }) {
     if (isUseBuildFolderOfDeps()) {
         config.resolve.mainFields = ["epam:uui:main", "browser", "module", "main"];
     }
+
+    config.plugins.forEach(p => {
+        if (p.constructor.name === 'ForkTsCheckerWebpackPlugin') {
+            p.options.formatter = uuiCustomFormatter;
+        }
+    })
+
     return config;
 }
 

app/build-config/utils/issueFormatter.js

@@ -0,0 +1,29 @@
+const { createCodeFrameFormatter } = require('../../../node_modules/fork-ts-checker-webpack-plugin/lib/formatter/CodeFrameFormatter.js')
+const path = require('path');
+const os = require('os');
+
+module.exports = { uuiCustomFormatter };
+
+const defaultFormatter = createCodeFrameFormatter({});
+
+function uuiCustomFormatter(issue) {
+    function formatIssueLocation(location) {
+        return `${location.start.line}:${location.start.column}`;
+    }
+    function norm(p) {
+        return path.normalize(p).replace(/\\+/g, '/')
+    }
+    const formattedIssue = defaultFormatter(issue);
+    if (issue.file) {
+        // Next line is the main reason why we created custom formatter
+        // We want error location to be clickable in WebStorm console log.
+        // In order to make it clickable, the location must be absolute or relative to the root folder, but not relative to "app".
+        //
+        let location = norm(issue.file);
+        if (issue.location) {
+            location += `:${formatIssueLocation(issue.location)}`;
+        }
+        return `${location}${os.EOL}${formattedIssue}`
+    }
+    return formattedIssue;
+}