search

stealjs / steal

Gets JavaScript
https://stealjs.com
MIT License
1.36k stars 522 forks source link

Cryptic error message when steal encounters an invalid object or 404 #1489

Open DaveO-Home opened 5 years ago

DaveO-Home commented 5 years ago

How often can you reproduce it?

Description: Steal produces;

Invalid object             steal.js:7341:13
logErrors
http://localhost:3080/node_modules/steal/steal.js:7341:13

when steal encounters an object that it considers invalid. Extremely difficult to debug. Usually if there is a 404 in the server log, that may point to the problem.

Steps to reproduce:

  1. In development mode use the hmr attribute <script src="../../node_modules/steal/steal.js" main="stealjs/appl/main" data-env="development" dev-bundle="../../dev-bundle"></script>
  2. Make sure hmr has not previously run, i.e. dev_bundle.js and dev_bundle.css do not exist.
  3. Start a node server and run the application in development mode.

Expected results: If hmr had been previously run, the main web page should load.

Actual results: without existing dev_bundle.js the app will error with; [Invalid object]

Environment: Steal development mode

Software Version
Steal version "steal": "^2.1.12"
Steal-tools version "steal-tools": "^2.0.11"
node -v v9.10.1
npm -v 6.5.0
Browser Firefox/Chrome
Operating system Fedora 29
matthewp commented 5 years ago

I don't totally understand, what is Invalid object here?

DaveO-Home commented 5 years ago

Actually there is an easy way to reproduce this console [Invalid Object] error. Just code;

if (anyUndefinedVar) {
    console.warn(anyUndefinedVar);
}

[Invalid Object] show up in the console with nothing else to indicate the problem.

matthewp commented 5 years ago

Should you be doing if(typeof anyUndefinedVar !== 'undefined') there?

DaveO-Home commented 5 years ago

Correct, but the point is that deep into to code my example might be mistakenly coded. Very difficult to debug if all that is reported is [Invalid object].

matthewp commented 5 years ago

What browser is this? I don't think steal is the cause of the [Invalid object] error. It's likely coming from the browser. We try to give good error messages that point to the line in the code. So, which browser?

DaveO-Home commented 5 years ago

Matthew, The message comes from this; http://localhost:3080/node_modules/steal/steal.js:7341:13

var type = c.error ? "error" : "log"; 
c[type](error);

I coded console.log(type.trace()) and got this;

ReferenceError: Error evaluating index anyUndefinedVar is not defined

points to the problem... gives me the file and variable.

matthewp commented 5 years ago

Steal will log all errors that occur during module execution. It attempts to add additional information to that log to help you track down where in your code the bug occurred. I'm happy to look into using .trace() if that will help. This article explains how we add more info to the errors: https://www.bitovi.com/blog/donejs-error-handling

However it doesn't work perfectly in every browser. Chrome works better than others, because it gives us more information on where the bug occurred. That's why I asked which browser does this occur in?

DaveO-Home commented 5 years ago

I'm sure others work in Fedora, a trace would be good. This also happens with Chrome and Opera. But you are correct, these are Browser builds for Fedora.

matthewp commented 5 years ago

Fedora is an OS, right? What is the name of the browser you are using?

DaveO-Home commented 5 years ago

Yes, a red-hat Linux flavour, usually on the bleeding edge. Firefox Quantum - 64-bit - Mozilla Firefox for Fedora - fedora-1.0 Chrome - Version 66.0.3359.117 (Official Build) (64-bit)

matthewp commented 5 years ago

Thanks for the info! Any small reproducible example would be appreciated, and make it faster for me to fix.

DaveO-Home commented 5 years ago

package.json

{
  "name": "stealex",
  "version": "1.0.0",
  "description": "Steal message error",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "Steal"
  ],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "koa": "^2.6.2",
    "koa-static": "^5.0.0",
    "steal": "^2.1.13"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../images/favicon.ico">
        <title>StealJS Test Application</title>
    </head>

    <body>
        <test-app>Loading...</test-app>

        <script src="./node_modules/steal/steal.js" main="index" data-env="development"></script>
    </body>
</html>

koa.js

const serve = require('koa-static');
const Koa = require('koa');
var path = require('path');
const app = new Koa();
app.use(serve(path.join(__dirname, '.')));
app.listen(3000)
console.log("started on 3000");

index.js

if (anyUndefinedVar) {
   console.log(anyUndefinedVar)
}

execute; node koa.js browser; localhost:3000/index.html

DaveO-Home commented 5 years ago

I find this reliable...

...
var type = c.error ? "error" : "log";
c["count"](error);
c[type](error);
...