making VueJS expressions debug-able - debugging

Question

My vue js data has some arrays, and in the template I am trying to render them using v-for loops.
something like:
<tr v-for="d in [0,1,2,3]"><td>{{data.people[d].name}}</td></tr>
<tr v-for="d in [0,1,2,3]"><td>{{data.places[d].name}}</td></tr>
<tr v-for="d in [0,1,2,3]"><td>{{data.orders[d].id}}</td></tr>
<tr v-for="d in [0,1,2,3]"><td>{{data.other_array[d].id}}</td></tr>
<tr v-for="d in [0,1,2,3]"><td>{{data.more_array[d].som_property}}</td></tr>
and I am getting an error that looks like this:
TypeError: Cannot read property '0' of undefined
at eval (eval at createFunction (vue.js:10518), <anonymous>:2:3084)
at Proxy.renderList (vue.js:3666)
at Proxy.eval (eval at createFunction (vue.js:10518), <anonymous>:2:2915)
at Vue$3.Vue._render (vue.js:4465)
at Vue$3.updateComponent (vue.js:2765)
at Watcher.get (vue.js:3113)
at new Watcher (vue.js:3102)
at mountComponent (vue.js:2772)
at Vue$3.$mount (vue.js:8416)
at Vue$3.$mount (vue.js:10777)
logError # vue.js:1719
globalHandleError # vue.js:1710
handleError # vue.js:1699
Vue._render # vue.js:4467
updateComponent # vue.js:2765
get # vue.js:3113
Watcher # vue.js:3102
mountComponent # vue.js:2772
Vue$3.$mount # vue.js:8416
Vue$3.$mount # vue.js:10777
Vue._init # vue.js:4557
Vue$3 # vue.js:4646
(anonymous) # astromap.html:291
I do understand that it means that somewhere one of my arrays is not initialized, and I will find that array, I also know I can write using guards and use v-if .
What bothers me is that The above stack trace seems quite useless.
my Q is:
Is there a better way to write such templates, not to prevent them from failing, but so that when they do fail I will get a more indicative output?
Alternatively, Is there any other debugging magic (e.g. some lastParsedExpression secret variable) that I can use in the debug console that can tell me what was the expression that failed?
UPDATE: edited to emphasis that there are multiple places where the error could happen.

Answer 1

I think what you are looking for is ErrorBoundary.
Vue.component('ErrorBoundary', {
data: () => ({ error: null }),
errorCaptured (err, vm, info) {
this.error = `${err.stack}\n\nfound in ${info} of component`
return false
},
render (h) {
if (this.error) {
return h('pre', { style: { color: 'red' }}, this.error)
}
// ignoring edge cases for the sake of demonstration
return this.$slots.default[0]
}
})
<error-boundary>
<another-component/>
</error-boundary>

Answer 2

The first item in your v-for array is 0. The error states:
Cannot read property '0' of undefined
You're attempting to access property 0 on people
people[d].name
Where do you have people defined?
The error is telling you an object is not defined, not an array.