blaze
blaze copied to clipboard
Published
20 hours ago •
meteor
meteor
Errors in onCreated callback cause a complete stop for rendering further Templates
Reproduction
Create a new project
$ meteor create testproject --blaze
$ cd testproject && meteor
Then manually added [email protected] (or once release [email protected]) to .meteor/packages
Then replaced client/main.html with the following:
<head>
<title>testproject</title>
</head>
<body>
<select class="select-template">
<option>none</option>
{{#each option in options}}
<option value="template{{option}}">Template {{option}}</option>
{{/each}}
</select>
{{#if show}}
{{> Template.dynamic template=show }}
{{/if}}
</body>
<template name="templateA">TemplateA</template>
<template name="templateB">templateB</template>
<template name="templateC">templateC {{raise}}</template>
<template name="templateD">templateD <button class="raise-btn">raise</button></template>
<template name="templateE">TemplateE
<div id="renderTarget"></div>
<button class="render-btn">render</button>
<button class="remove-btn">remove</button>
</template>
<template name="templateF">templateF</template>
<template name="templateEInner">Inner Template with Blaze.render</template>
and the following code in client/main.js:
import { Template } from 'meteor/templating'
import { ReactiveVar } from 'meteor/reactive-var'
import './main.html'
import { Blaze } from 'meteor/blaze'
Template.body.onCreated(function () {
this.show = new ReactiveVar()
})
Template.body.helpers({
show () {
return Template.instance().show.get()
},
options () {
return [...'ABCDEF']
}
})
Template.body.events({
'click .remove-btn' () {
Blaze.remove(renderedView)
},
'change .select-template' (event, templateInstance) {
const value = templateInstance.$(event.currentTarget).val()
templateInstance.show.set(value)
}
})
Template.templateA.onCreated(function () {
throw new Error('Error-1')
})
Template.templateB.onRendered(function () {
throw new Error('Error-2')
})
Template.templateC.helpers({
raise () {
throw new Error('Error-3')
}
})
Template.templateD.events({
'click .raise-btn' () {
throw new Error('Error-4')
}
})
let renderedView
Template.templateE.events({
'click .render-btn' (event, templateInstance) {
const parent = templateInstance.$('#renderTarget').get(0)
renderedView = Blaze.render(Template.templateEInner, parent)
},
'click .remove-btn' (event, templatInstance) {
Blaze.remove(renderedView)
}
})
Template.templateEInner.onDestroyed(function () {
throw new Error('Error-5')
})
Template.templateF.onDestroyed(function () {
throw new Error('Error-6')
})
Here Are my results
on Created - Dev
09:46:04.900 Exception from Tracker recompute function: meteor.js:1064:23
09:46:04.901 Error: Error-1 meteor.js:1064:23
09:46:04.901 module/</<@http://localhost:3000/app/app.js?hash=2589f8fab30c3e63ebc6f027a605b14bdc7a5773:212:11
module/fireCallbacks/<@http://localhost:3000/packages/blaze.js?hash=4e97ea5149f9400d1971a350b259a60cb2bf73a5:3305:20
This caused a follow-up error, which always occurs when Template A is removed:
09:56:33.315 Exception from Tracker recompute function: [meteor.js:1064:23](http://localhost:3000/packages/meteor.js?hash=b9ec8cf25b6fc794ae6b825f30e06c3c35c50e7c)
09:56:33.315 TypeError: domrange is undefined [meteor.js:1064:23](http://localhost:3000/packages/meteor.js?hash=b9ec8cf25b6fc794ae6b825f30e06c3c35c50e7c)
09:56:33.315 doMaterialize@http://localhost:3000/packages/blaze.js?hash=4e97ea5149f9400d1971a350b259a60cb2bf73a5:1952:11
This also causes no other Template to be drawn afterwards, although they should! Should I take hands on this issue? I think this is crucial to a proper user experience.
on Created - Prod
In production it's worse since nobody knows where this comes from:
Error: Error-1 [144eb911d5f3d4749cb2bd08d2ac42cc9e2c7110.js:1:6618](http://localhost:3000/144eb911d5f3d4749cb2bd08d2ac42cc9e2c7110.js?meteor_js_resource=true)
10:18:03.451 e/<@http://localhost:3000/144eb911d5f3d4749cb2bd08d2ac42cc9e2c7110.js?meteor_js_resource=true:164:2698
And the DOMRange error is completely obfuscated:
10:18:08.468 Exception from Tracker recompute function: [144eb911d5f3d4749cb2bd08d2ac42cc9e2c7110.js:1:6618](http://localhost:3000/144eb911d5f3d4749cb2bd08d2ac42cc9e2c7110.js?meteor_js_resource=true)
10:18:08.468 TypeError: o is undefined [144eb911d5f3d4749cb2bd08d2ac42cc9e2c7110.js:1:6618](http://localhost:3000/144eb911d5f3d4749cb2bd08d2ac42cc9e2c7110.js?meteor_js_resource=true)
10:18:08.469 t@http://localhost:3000/144eb911d5f3d4749cb2bd08d2ac42cc9e2c7110.js?meteor_js_resource=true:144:21604
This is something we definitely need to tackle! I think this will be much better, when we integrate #368
