codehag / js-better-errors Goto Github PK

What is the code triggering the message?

{ x = 2; let x; }

What went wrong in the code? What is the system trying to tell you?

This is a TDZ error. The system is trying to tell me that that x is in its TDZ when x = 2 is accessed, and is instead not available until let x is encountered in the scope.

What error message do you see?

• v8: Uncaught ReferenceError: x is not defined
• SpiderMonkey: ReferenceError: can't access lexical declaration `x' before initialization

Side note: Notice that SpiderMonkey's error message strangely surrounds x in a ` on one side and a ' on the other. Weird.

Which JavaScript environment produced this error?

• v8 (in Chrome 70)
• SpiderMonkey (in FF 65)

What error message would you like to see?

SpiderMonkey's error message is pretty good, much better than v8's.

But I would have worded it differently, and I would have included the "TDZ" terminology (instead of reusing the ReferenceError type) because that helps people google for this error.

TDZError: `x` cannot be accessed before its declaration

Using "initialization" in the error message is technically accurate, but it's not very helpful to the user because they likely don't understand the nuance of the fact that a let / const have been "hoisted" for the scope but not initialized. I teach that detail in my workshops, but the vast majority of devs don't understand that.

My error message shifts attention to describing the problem accurately without an unnecessary detail to distract.

If you're going to keep ReferenceError as the error class, the message should read:

ReferenceError: `x` cannot be accessed in its TDZ before its declaration

Do you agree to license your suggested error message under an MIT-style license?

Yes

@wolframkriesing ran a meetup with some JS developers interested in the language itself, and looked into the issue. See notes here: https://gitlab.com/wolframkriesing/jslang-meetups/tree/master/errors-2018-10-18

Hey there, this is a great effort! 💯

I just wanted to let you know that over on MDN, we try to help web developers with documentation alongside error messages. You can read about it here: https://hacks.mozilla.org/2016/06/helping-web-developers-with-javascript-errors/ and find the docs on MDN here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors

Basically, in Firefox, the console will spit out "RangeError: radix must be an integer at least 2 and no greater than 36 [Learn more]``" for errors we have written docs about. As the blog posts says, we haven't written docs for all error messages yet, so help is welcome :)

The errors we've documented are the top errors thrown in Firefox according to users who have opted into Firefox Telemetry. So, maybe that is also useful data to you.

I'm happy to talk more about this, so please let me know if I can be of any help.

This is a general discussion issue to get some conversation on the topic, not an error message itself.

I am wondering how we would define a good error message. I have a couple of ideas:

• relationship to the source code - a good error message would clearly show its relationship to the source code as it was written.

• Error in relation to intended code - sometimes it is hard to tell exactly what the programmers intent was, but the closer the error message is to the intention, the more useful it is.

• suggestions on how to fix - maybe we can give tips on where the problem is likely coming from?

Those are some initial thoughts. Let me know what you folks think.

Do you agree to license your suggested error message under an MIT-style license?

Yes

What is the code triggering the message?

let pie = {
  flavor: 'rhubarb',
  size: 'large'
};

pie.push({ temperature: 'warm' });

What went wrong in the code? What is the system trying to tell you?

I'm trying to use an array prototype method on an object. (The prototype method I selected does not exist on the data type I'm calling it on.)

What error message do you see?
Which JavaScript environment produced this error?

#### V8
TypeError: pie.push is not a function

What error message would you like to see?

TypeError: 'push' is not a valid method for the object 'pie'

(New developers tend to think the current error message means there's something wrong with push, rather than thinking to check the data type of the value they're working with. They'll try to capitalize push or change the prototype method to something else.)

Do you agree to license your suggested error message under an MIT-style license?

Yes

I don't know if this project is aimed at the "stack" property, but I would hope to see progress there.

What is the code triggering the message?

function test (){
  console.log(new Error().stack+'')
}
function doit(){
  test()
}
doit();

What error message do you see?
Which JavaScript environment produced this error?

spidermonkey:

test@https://example.com/main.js:2:14
doit@https://example.com/main.js:5:2
@https://example.com//main.js:7:1

jsc:

test@https://example.com/main.js:2:14 
doit@https://example.com/main.js:5:2 
global code@https://example.com/main.js:7:1

v8:

Error
    at test (https://example.com/main.js:2:14)
    at doit (https://example.com/main.js:5:2)
    at https://example.com/main.js:7:1

What error message would you like to see?

I would like a standardized stack property, if possibliy as a array error.stackArray

[{
       function: 'test',
       file: 'https://example.com/main.js',
       line: 2,
       column: 14
},{
       function: 'doit',
       file: 'https://example.com/main.js',
       line: 5,
       column: 2
},{
       function: Error.STACK_GLOBAL_SCOPE,
       file: 'https://example.com/main.js',
       line: 7,
       column: 1
}]

Do you agree to license your suggested error message under an MIT-style license?

Yes

What is the code triggering the message?

let z = { a: { b: { } } }
z.a.b.c.d

What went wrong in the code? What is the system trying to tell you?

That z.a.b.c is undefined, so you can't access the d property on it

What error message do you see?
Which JavaScript environment produced this error?

#### jsc
TypeError: undefined is not an object (evaluating 'z.a.b.c.d')

#### V8
TypeError: Cannot read property 'd' of undefined

#### chakracore
TypeError: Unable to get property 'd' of undefined or null reference

#### spidermonkey
TypeError: z.a.b.c is undefined

eshost shows that only SpiderMonkey gives helpful output

What error message would you like to see?

SpiderMonkey-style output in all JS engines

Do you agree to license your suggested error message under an MIT-style license?

Yes

What is the code triggering the message?

let arr = [1, 2, 3
print(arr[0])

What went wrong in the code? What is the system trying to tell you?

The array literal is left open; I forgot to put a closing ].

What error message do you see?
Which JavaScript environment produced this error?

#### jsc
SyntaxError: Unexpected identifier 'print'. Expected either a closing ']' or a ',' following an array element.

#### V8
SyntaxError: Unexpected identifier

#### chakracore
SyntaxError: Expected ']'

#### spidermonkey
SyntaxError: missing ] after element list:

What error message would you like to see?

JSC's style of error message in all engines would be the best!

Do you agree to license your suggested error message under an MIT-style license?

Yes

hi everybody. 👋

I recently wrote about some error message changes we had to back out of Firefox, because the new changes broke sites that made assumptions about what certain type error messages look like:

https://miketaylr.com/posts/2018/10/(native)-error-prototype-message.html

One site was able to fix their own code, but the larger concern is sites using facebook' idx library (and of course, the things we don't know about:

https://github.com/facebookincubator/idx/blob/9609fe1a728caaea8f621c44e2e7190a1c5689f6/packages/idx/src/idx.js#L73-L84

So anyways, it would be useful to probably do a bit of research or outreach to increase the odds of any proposed improvements sticking.