Skip to content

Better error output #181

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Sep 26, 2017
Merged

Better error output #181

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1250f60
feat($scripts): Clean-up errors from Elm Compiler before showing them
halfzebra Sep 23, 2017
5234838
feat($config): Mock-out Node.js libraries to secure the run-time in t…
halfzebra Sep 23, 2017
49af44c
style: prettify the code
halfzebra Sep 23, 2017
f63aeeb
feat($scripts): Add color highlighting for Elm compiler errors
halfzebra Sep 24, 2017
be6d5c9
fix($dependencies): Update dependencies
halfzebra Sep 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions config/webpack.config.dev.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ module.exports = {
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
require.resolve('react-dev-utils/webpackHotDevClient'),
// require.resolve('react-dev-utils/webpackHotDevClient'),
require.resolve('../scripts/utils/webpackHotDevClient'),

// Errors should be considered fatal in development
require.resolve('react-error-overlay'),
Expand Down Expand Up @@ -196,5 +197,15 @@ module.exports = {
new HotModuleReplacementPlugin(),

new NamedModulesPlugin()
]
],

// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
};
11 changes: 10 additions & 1 deletion config/webpack.config.prod.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,5 +242,14 @@ module.exports = {
// Don't precache sourcemaps (they're large) and build asset manifest:
staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/]
})
]
],
// Some libraries import Node modules but don't use them in the browser.
// Tell Webpack to provide empty mocks for them so importing them works.
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
};
4 changes: 2 additions & 2 deletions scripts/build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const paths = require('../config/paths');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
const highlightElmCompilerErrors = require('./utils/highlightElmCompilerErrors');
const formatElmCompilerErrors = require('./utils/formatElmCompilerErrors');

const measureFileSizesBeforeBuild =
FileSizeReporter.measureFileSizesBeforeBuild;
Expand Down Expand Up @@ -90,7 +90,7 @@ function build(previousFileSizes) {
if (err) {
return reject(err);
}
const messages = highlightElmCompilerErrors(
const messages = formatElmCompilerErrors(
formatWebpackMessages(stats.toJson({}, true))
);
if (messages.errors.length) {
Expand Down
4 changes: 2 additions & 2 deletions scripts/eject.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,8 @@ function performEject(pkg) {
fs.copySync(path.resolve(__dirname, 'build.js'), './scripts/build.js');
fs.copySync(path.resolve(__dirname, 'start.js'), './scripts/start.js');
fs.copySync(
path.resolve(__dirname, './utils/highlightElmCompilerErrors.js'),
'./scripts/utils/highlightElmCompilerErrors.js'
path.resolve(__dirname, './utils/formatElmCompilerErrors.js'),
'./scripts/utils/formatElmCompilerErrors.js'
);
fs.copySync(path.resolve(__dirname, '../config'), './config');
} catch (err) {
Expand Down
4 changes: 2 additions & 2 deletions scripts/start.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
const clearConsole = require('react-dev-utils/clearConsole');
const openBrowser = require('react-dev-utils/openBrowser');
const createDevServerConfig = require('../config/webpackDevServer.config');
const highlightElmCompilerErrors = require('./utils/highlightElmCompilerErrors');
const formatElmCompilerErrors = require('./utils/formatElmCompilerErrors');
const paths = require('../config/paths');

if (fs.existsSync('elm-package.json') === false) {
Expand Down Expand Up @@ -100,7 +100,7 @@ function createCompiler(webpack, config, appName, urls) {
// We have switched off the default Webpack output in WebpackDevServer
// options so we are going to "massage" the warnings and errors and present
// them in a readable focused way.
const messages = highlightElmCompilerErrors(
const messages = formatElmCompilerErrors(
formatWebpackMessages(stats.toJson({}, true))
);

Expand Down
38 changes: 38 additions & 0 deletions scripts/utils/formatElmCompilerErrors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
'use strict';

var chalk = require('chalk');
var ctx = new chalk.constructor({ enabled: true });
var error = ctx.bold.red;
var filename = ctx.cyan;
var isBrowser = typeof window === 'object';

if (isBrowser) {
ctx.level = 1;
error = ctx.cyan;
filename = ctx.green;
}

function stripRedundantInfo(error) {
return error.replace(
/Module build failed: Error: Compiler process exited with error Compilation failed/g,
''
);
}

module.exports = function formatElmCompilerErrors(messages) {
var errors = messages.errors;
var warnings = messages.warnings;
Copy link
Contributor

@fobos fobos Sep 23, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not to use const and destructuring?

Copy link
Owner Author

@halfzebra halfzebra Sep 23, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@fobos this one is supposed to be running in the browser and under the node(without being transpiled by Babel)

return errors.length > 0
? {
errors: errors
.map(x =>
Copy link
Owner Author

@halfzebra halfzebra Sep 25, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I shouldn't be using arrow functions here because of browser compatibility issues.

x
.replace(/(--\s[A-Z\s]+-+\s.*\.elm\n)/g, filename('$1'))
.replace(/(\n\s*)(\^+)/g, '$1' + error('$2'))
.replace(/(\d+)(\|>)/g, '$1' + error('$2'))
)
.map(stripRedundantInfo),
warnings: warnings
}
: messages;
};
19 changes: 0 additions & 19 deletions scripts/utils/highlightElmCompilerErrors.js
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions scripts/utils/webpackHotDevClient.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ var url = require('url');
var launchEditorEndpoint = require('react-dev-utils/launchEditorEndpoint');
var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
var ErrorOverlay = require('react-error-overlay');
var highlightElmCompilerErrors = require('./highlightElmCompilerErrors');
var formatElmCompilerErrors = require('./formatElmCompilerErrors');

ErrorOverlay.startReportingRuntimeErrors({
launchEditorEndpoint: launchEditorEndpoint,
Expand Down Expand Up @@ -142,7 +142,7 @@ function handleErrors(errors) {
hasCompileErrors = true;

// "Massage" webpack messages.
var formatted = highlightElmCompilerErrors(
var formatted = formatElmCompilerErrors(
formatWebpackMessages({
errors: errors,
warnings: []
Expand Down
49 changes: 25 additions & 24 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2327,6 +2327,7 @@ elm-test@^0.18.8:
find-parent-dir "^0.3.0"
firstline "1.2.1"
fs-extra "0.30.0"
fsevents "1.1.2"
glob "^7.1.1"
lodash "4.13.1"
minimist "^1.2.0"
Expand Down Expand Up @@ -2493,11 +2494,11 @@ escope@^3.6.0:
estraverse "^4.1.1"

eslint-plugin-prettier@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.2.0.tgz#f2837ad063903d73c621e7188fb3d41486434088"
version "2.3.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.3.1.tgz#e7a746c67e716f335274b88295a9ead9f544e44d"
dependencies:
fast-diff "^1.1.1"
jest-docblock "^20.0.1"
jest-docblock "^21.0.0"

eslint-scope@^3.7.1:
version "3.7.1"
Expand All @@ -2507,18 +2508,18 @@ eslint-scope@^3.7.1:
estraverse "^4.1.1"

eslint@^4.6.1:
version "4.6.1"
resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.6.1.tgz#ddc7fc7fd70bf93205b0b3449bb16a1e9e7d4950"
version "4.7.2"
resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.7.2.tgz#ff6f5f5193848a27ee9b627be3e73fb9cb5e662e"
dependencies:
ajv "^5.2.0"
babel-code-frame "^6.22.0"
chalk "^2.1.0"
concat-stream "^1.6.0"
cross-spawn "^5.1.0"
debug "^2.6.8"
debug "^3.0.1"
doctrine "^2.0.0"
eslint-scope "^3.7.1"
espree "^3.5.0"
espree "^3.5.1"
esquery "^1.0.0"
estraverse "^4.2.0"
esutils "^2.0.2"
Expand All @@ -2539,7 +2540,7 @@ eslint@^4.6.1:
natural-compare "^1.4.0"
optionator "^0.8.2"
path-is-inside "^1.0.2"
pluralize "^4.0.0"
pluralize "^7.0.0"
progress "^2.0.0"
require-uncached "^1.0.3"
semver "^5.3.0"
Expand All @@ -2548,9 +2549,9 @@ eslint@^4.6.1:
table "^4.0.1"
text-table "~0.2.0"

espree@^3.5.0:
version "3.5.0"
resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.0.tgz#98358625bdd055861ea27e2867ea729faf463d8d"
espree@^3.5.1:
version "3.5.1"
resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.1.tgz#0c988b8ab46db53100a1954ae4ba995ddd27d87e"
dependencies:
acorn "^5.1.1"
acorn-jsx "^3.0.0"
Expand Down Expand Up @@ -3948,9 +3949,9 @@ isstream@0.1.x, isstream@~0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"

jest-docblock@^20.0.1:
version "20.0.3"
resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-20.0.3.tgz#17bea984342cc33d83c50fbe1545ea0efaa44712"
jest-docblock@^21.0.0:
version "21.1.0"
resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.1.0.tgz#43154be2441fb91403e36bb35cb791a5017cea81"

js-base64@^2.1.9:
version "2.1.9"
Expand Down Expand Up @@ -5210,9 +5211,9 @@ pkginfo@0.x.x:
version "0.4.0"
resolved "https://registry.yarnpkg.com/pkginfo/-/pkginfo-0.4.0.tgz#349dbb7ffd38081fcadc0853df687f0c7744cd65"

pluralize@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-4.0.0.tgz#59b708c1c0190a2f692f1c7618c446b052fd1762"
pluralize@^7.0.0:
version "7.0.0"
resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"

portfinder@^1.0.9:
version "1.0.13"
Expand Down Expand Up @@ -7180,8 +7181,8 @@ webpack-dev-middleware@^1.11.0:
range-parser "^1.0.3"

webpack-dev-server@^2.8.1:
version "2.8.1"
resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.8.1.tgz#344e312bf560498ee0c518f2fcc709951630f667"
version "2.8.2"
resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.8.2.tgz#abd61f410778cc4c843d7cebbf41465b1ab7734c"
dependencies:
ansi-html "0.0.7"
array-includes "^3.0.3"
Expand All @@ -7203,10 +7204,10 @@ webpack-dev-server@^2.8.1:
sockjs "0.3.18"
sockjs-client "1.1.4"
spdy "^3.4.1"
strip-ansi "^4.0.0"
strip-ansi "^3.0.1"
supports-color "^4.2.1"
webpack-dev-middleware "^1.11.0"
yargs "^8.0.2"
yargs "^6.6.0"

webpack-sources@^1.0.1:
version "1.0.1"
Expand All @@ -7216,8 +7217,8 @@ webpack-sources@^1.0.1:
source-map "~0.5.3"

webpack@^3.5.6:
version "3.5.6"
resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.5.6.tgz#a492fb6c1ed7f573816f90e00c8fbb5a20cc5c36"
version "3.6.0"
resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.6.0.tgz#a89a929fbee205d35a4fa2cc487be9cbec8898bc"
dependencies:
acorn "^5.0.0"
acorn-dynamic-import "^2.0.0"
Expand Down Expand Up @@ -7383,7 +7384,7 @@ yargs-parser@^7.0.0:
dependencies:
camelcase "^4.1.0"

yargs@^6.5.0:
yargs@^6.5.0, yargs@^6.6.0:
version "6.6.0"
resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
dependencies:
Expand Down