Errors are unfriendly.

[yodakaEngineer]

When I develop with Vue3, I encountered these errors often.

Unhandled error during execution of render function 

https://github.com/vuejs/vue-next/issues?q=is%3Aissue+Unhandled+error+during+execution+of+render+function

Property was accessed during render but is not defined on instance. 

https://github.com/vuejs/vue-next/issues?q=is%3Aissue+Property+was+accessed+during+render+but+is+not+defined+on+instance.+is%3Aclosed+

I think the error statements are very exaggerated and the stack trace is really hard to follow... The reason it's hard to follow is that it only tracks at the component level, so for example, if there is an error in a div tag just below a page component after a lot of nesting, it only tells me that the error is happening in . So, if there is an error in a div tag directly under a page component, it only tells us that the error occurred in . So we have to do something like commenting out a group of components that might contain suspicious components and bisecting them to see if they work or not.

I am sorry for I have no concrete idea. But I am so struggling with it.

For example,

• Show variable name that caused error.
• Show the number of line that the error occurred.
• Show DOM name that caused error.