search

maizzle / framework

Quickly build HTML emails with Tailwind CSS.
https://maizzle.com
MIT License
1.2k stars 48 forks source link

More verbose output in case of an error #283

Closed nodeg closed 4 years ago

nodeg commented 4 years ago

Is it possible to make Maizzle more verbose or introduce a verbose mode? In my opinion it is very hard to understand the stack trace when an error occurs and I am not able to find the exact issue when looking at it.

Example: I made changes to some .html files and did some error I did not see. After a maizzle serve or maizzle build I got the following error, where I cannot see where I made the exact error and what the error actually is. So it is very hard and time consuming for me to debug everything.

Building emails...(node:15140) UnhandledPromiseRejectionWarning: YAMLException: can not read a block mapping entry; a multiline key may not be an implicit key at line 2, column 1:

    ^
    at generateError (/Users/gb/Sandbox/GIT/LAB/send-mail-beta/node_modules/js-yaml/lib/js-yaml/loader.js:167:10)
    at throwError (/Users/gb/Sandbox/GIT/LAB/send-mail-beta/node_modules/js-yaml/lib/js-yaml/loader.js:173:9)
    at readBlockMapping (/Users/gb/Sandbox/GIT/LAB/send-mail-beta/node_modules/js-yaml/lib/js-yaml/loader.js:1073:9)
    at composeNode (/Users/gb/Sandbox/GIT/LAB/send-mail-beta/node_modules/js-yaml/lib/js-yaml/loader.js:1359:12)
    at readDocument (/Users/gb/Sandbox/GIT/LAB/send-mail-beta/node_modules/js-yaml/lib/js-yaml/loader.js:1525:3)
    at loadDocuments (/Users/gb/Sandbox/GIT/LAB/send-mail-beta/node_modules/js-yaml/lib/js-yaml/loader.js:1588:5)
    at load (/Users/gb/Sandbox/GIT/LAB/send-mail-beta/node_modules/js-yaml/lib/js-yaml/loader.js:1614:19)
    at safeLoad (/Users/gb/Sandbox/GIT/LAB/send-mail-beta/node_modules/js-yaml/lib/js-yaml/loader.js:1637:10)
    at parse (/Users/gb/Sandbox/GIT/LAB/send-mail-beta/node_modules/front-matter/index.js:64:20)
    at extractor (/Users/gb/Sandbox/GIT/LAB/send-mail-beta/node_modules/front-matter/index.js:26:12)
(Use 'node --trace-warnings ...' to show where the warning was created)
(node:15140) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:15140) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
⠦ Building emails...

Is there a way to get a better feedback from Maizzle whenthe user did something wrong?

cossssmin commented 4 years ago

You can use the build.fail config key to also log the paths of the files that failed to build. I'd suggest using verbose so you can see both the offending files and the stack trace.

The error you're getting:

YAMLException: can not read a block mapping entry; a multiline key may not be an implicit key at line 2, column 1:

is related to Front Matter in your template. I think it usually happens because of a value that it thinks is a variable, maybe try wrapping it in " " (I can confirm if you paste your front matter from the template here).

nodeg commented 4 years ago

Thanks for the quick reply. The front matter is either of the following:

---
title: "Please confirm your email address!"
---
---
title: Please confirm your email address!
---

So you suggest to put everything inside " "?

cossssmin commented 4 years ago

So you suggest to put everything inside " "?

Yes, quote the value as you did in the first example.

cossssmin commented 4 years ago

Though both should work fine in this example, just tested without quotes... wonder if it's an issue with front-matter and your Node version (I see front-matter is tested only up to Node 14.3) 🤔

cossssmin commented 4 years ago

Hmm, do you have spaces after the ---? Maybe it's https://github.com/jxson/front-matter/issues/53 ?

nodeg commented 4 years ago

Hmm, do you have spaces after the ---?

No.

I added the build.fail suggestions you mentioned

module.exports = {
  build : {
    fail: 'verbose',
  },
}

but I can see no difference in the the output of the build failure message compared to the one above. I can test everyting with Node.js 12, too.

cossssmin commented 4 years ago

Yeah, try downgrading, Node 15 is not released yet so there may be breaking changes. Maizzle tests run on 10 and 12, the front-matter I see is also tested on latest stable (which is 14.3.0 in Travis CI).

nodeg commented 4 years ago

I do not use Node 15. This was a typo in in the first post. I corrected this. Sorry for the confusion.

cossssmin commented 4 years ago

Hmm, ok, maybe we should add latest stable to the test suite. I can have a look at it if you can share a repo that reproduces the issue 👍

cossssmin commented 4 years ago

Added Node 14 to the test suite in #284 , build still passing. Again, if you want, I can have a look at it - just put it in a repo (private if you prefer) and I'll try to see what the issue is.

nodeg commented 4 years ago

I adjusted the .html files with the following front-matter:

---
title: "[ANNOUNCE] New email framework available!"
---

<extends src="master.html">

I applied " " to every title and put a empty line after ---. Now it works again, but I wonder why the verbose setting in config.js did not change the failed build error?

cossssmin commented 4 years ago

Oh yes, that string starting with [ is invalid as far as front-matter is concerned, so it needs to be wrapped in quotes.

verbose is meant to output the path to files that failed to compile, like so:

‼ Failed to compile build_production/index.html

... and then the rest of the trace stack is output. In this case with front matter I see it just hangs, not working as expected indeed - will investigate and try to add a fix, thanks for noticing.

nodeg commented 4 years ago

In this case with front matter I see it just hangs, not working as expected indeed - will investigate and try to add a fix, thanks for noticing.

Thank you!

nodeg commented 4 years ago

What I also experienced is that you cannot just copy paste stuff from the TailwindCSS docs. I played with responsive design and adjusted the screens values the following way in the tailwind.config.js:

screens: {
      'sm': {'min': '640px', 'max': '767px'},
      'md': {'min': '768px', 'max': '1023px'},
      'lg': {'min': '1024px', 'max': '1279px'},
      'xl': {'min': '1280px'},
}

This resulted in the following error message: 

$ maizzle build
⠋ Building emails...(node:20439) UnhandledPromiseRejectionWarning: RangeError: Maximum call stack size exceeded
    at /home/dom/git/send-mail-beta/node_modules/postcss/lib/container.js:139:15
    at AtRule.each (/home/dom/git/send-mail-beta/node_modules/postcss/lib/container.js:101:16)
    at AtRule.walk (/home/dom/git/send-mail-beta/node_modules/postcss/lib/container.js:131:17)
    at /home/dom/git/send-mail-beta/node_modules/postcss/lib/container.js:148:24
    at AtRule.each (/home/dom/git/send-mail-beta/node_modules/postcss/lib/container.js:101:16)
    at AtRule.walk (/home/dom/git/send-mail-beta/node_modules/postcss/lib/container.js:131:17)
    at /home/dom/git/send-mail-beta/node_modules/postcss/lib/container.js:148:24
    at AtRule.each (/home/dom/git/send-mail-beta/node_modules/postcss/lib/container.js:101:16)
    at AtRule.walk (/home/dom/git/send-mail-beta/node_modules/postcss/lib/container.js:131:17)
    at /home/dom/git/send-mail-beta/node_modules/postcss/lib/container.js:148:24
(Use `node-default --trace-warnings ...` to show where the warning was created)
(node:20439) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:20439) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

When looking at the Maizzle docs for screen I see that the names are not inside ' ' tags, so when I change the code to the following

screens: {
      sm: {'min': '640px', 'max': '767px'},
      md: {'min': '768px', 'max': '1023px'},
      lg: {'min': '1024px', 'max': '1279px'},
      xl: {'min': '1280px'},
}

I got the same error as above.

What is the best practice regarding TailwindCSS?

cossssmin commented 4 years ago

What is the best practice regarding TailwindCSS?

You're not doing anything wrong, keys work both quoted and unquoted in this case.

I just looked into it and it's an issue with the css-mqpacker library that we're using for merging media queries - apparently it has some issues with min queries. Since this isn't really necessary with Tailwind, I've removed it and just released 1.4.3 which should fix the issue. Thanks for reporting it!

Regarding the original issue, improved error handling is coming in 2.0, which should launch beginning of September 👍

nodeg commented 4 years ago

Thank you very much again for the quick and detailed answer! :+1:

cossssmin commented 4 years ago

Both issues are handled in v2.0.0 which will be released soon.