Vue: Improve warning message information

This filed issue requires more information. Are you using vue 2 or vue 1.
Is it a bug or a suggestion ? if bug then a reproducible link on jsfiddle.
If any of your component don't have a handler function, this can not be a vue issue.

//Best

I'm using Vue 2. It's not a bug. It's an error message that's of no use. Well , Vue can take this as a suggestion to improve the error message style and make it specific. So that, by any mistake if any developer makes a mistake s/he can fix it in little time by knowing exactly where the mistake is. In comparison to React JS, they show the component name along with line number and of course the error too.

All I wish, there error messege to be specific.

There are lots of messages in Vue that don't really say much. Vue's safety checks seem to be lacking, unfortunately.

I guess if vue can add bit more info to its warnings -

component name
component type
or
can make the warning message configurable for development env.

We do try to provide component information whenever we can, this one maybe an oversight.

@just-nobody please provide specific examples of which messages are lacking so that we can improve - just complaining achieves nothing.

I wasn't really complaining; I figured that was kind of just something people already knew. I've run into plenty of small edge cases in the past that gave an odd, nondescript message of the actual issue, but instead rooted deep in the source, and some other issues didn't emit an error, and instead caused some weird rendering bug. Some were easier to track down than others so I didn't bother reporting them since I figured it was just me being stupid, but one in particular I actually created a pull request for because it took so long for me to figure out what was wrong.

I imagine the lot of them are fixed now that 2.0.1 is out, but my bad for staying silent, I guess. A message to readers: if you think it's a bug, report it, even if it might end up not being a bug.

@yyx990803 Even, Providing the name key of a component doesn't help much. Thanks for stopping by and adding this issue as an improvement.

:) thanks Evan

Hi, I have noticed recently that lack of line numbers makes things really hard to debug especially if component is big. I have a component with couple thousands of lines. I received a warning
"[Vue warn]: Error in render function: "TypeError: _vm.values[item.name] is undefined""

There is a component name, but no line number in my Firefox console. For this kind of cases it would be really useful to have a specified line number. Of course I can split component to several smaller ones or just dig through all these lines with editor's search but that's not the point.

Please consider adding line numbers in next versions. Thank you.

+1 Please add line numbers.

I got next message,

vue.js:577 [Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"
(found in )

I know why it fails, on this construct " variable.length" if variable == null. Problem is that I have many of ".length" constructs, data is coming from external service.

Same for me @ameoba32
I have "Cannot read property 'length' of undefined" and I don't find where is the problem. It's a big webapp so it's hard.
I suppose that I found file in cause but I don't know where error is exactly.
Should I erraze line by line for find the line broken ? xD

Same here like as @ameoba32 . @yyx990803 Please do something. Thanks!

I love vue - a lot and have been working with it for two years. The lack of specificity in a RENDER errror is my #1 complaint/request to fix. This error occurs either in the template or in the corresponding js code. A line number would greatly help, or even if the problem is located in either the template or the js code.

had the same problem

Yes. I have the same problem ;)

unreachable code after return statement[Więcej informacji] app.js:5248:4
unreachable code after return statement[Więcej informacji] app.js line 4957 > eval:5248:4
unreachable code after return statement[Więcej informacji] app.js:5248:4
unreachable code after return statement[Więcej informacji] app.js line 5136 > eval:5248:4

I understand what it means, but I don't know where I should fix it and going through all my components to find those issues is kind of a lot of work.

Same here.

vue.common.js means nothing for me when i try to find where occurred the error.

I agree, that just the line number in source file will speedup debugging a lot

anything new about this? why is the issue closed (since the issue is still there)?

would love this to be fixed! debugging is too complicated right now, we need file name and line number for easier debugging, please fix

I agree as well, my .vue files are so big and getting the exact location would help.

I've made some headway in determining which component and can get the line number (in many cases) for the error. (I am using single file components). But there is still much investigation to do still. I hope to release my findings in the future.

@gpadilla123 God speed sir. Looking forward to your work.

In case any people are still combing their code for malformed return statements, I found the source of the error occurring when I use both an expression and a function call in the template:
:class="x=0; getClass()" in this case, removing x=0; got rid of the warning. Not that this will be the case for anyone in this list necessarily, but a reminder to check the template.

Even to this day it is still unclear as balls. Im getting an error when vue is evaluating something im not even changing...

Vue 3.0 should solve this issue since it will have better error messages, but the release date of Vue 3.0 ranges from end of Q2 2019 to the end of 2019. Too long for me to wait, so I have hacked a way to get the line numbers of the errors (for some cases). The hacked solution needs to be more robust and work for more cases.

yea this is killing me, i was expecting at least the line number or something to specify better

+1

This is deadly. We need the lines the errors are occurring on to be reported correctly. At the moment I seem to get completely useless vue.js line numbers when an error occurs, eg.

[Vue warn]: Error in render: "TypeError: Cannot read property '0' of undefined"

[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"
Will be fun searching for the line. Especially when there are plenty of .length in my code.

Messages like these are like a wild goose chase. No clue where the error originated: I'd expect a line number, the name of a vue, the name of a function that i made and that is not part of the Vue framework. This happens on vue 2.5.17. There is also no help from the vue development extension in cases like these.

Glad to hear this will be addressed in Vue 3.0. In the meantime I found a good tip: Click on the error line indicator in the console, then put a breakpoint on the same line in the source of Vue. You can then reload the page, the debugger will stop on the breakpoint, then you can work back up the stack until you find one of your components, and usually the error is there.

It's not perfect but it could help you get unstuck in a bug hunt.

[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"
Will be fun searching for the line. Especially when there are plenty of .length in my code.

Finally found the line.
It wouldn't have taken that long if the issue had been resolved.

+1, vue's console logging is sorely lacking. Take the below for instance. It is telling me the component stack, which is nice, but there is no reference to the line number here, and the entire call stack points to compile vue code, not my component code. A line number next to the component name is all it needs.

I'm also having issues debugging without line numbers...

Challenge accepted.

This has been a bummer for years and still is.

i was scrolling through this hoping someone would have some super secret hack for this already or some update already

+1

TypeError: Cannot read property 'length' of undefined

but i have 30-50