I have a lightning component that has Chart.js (v.2.3) as a dependency. It has been packaged before Summer 17 and it was functional. It has also been tested and was functional in LockerService enabled dev orgs.
I upgraded its' API version to v40 (LockerService enforced) as part of my preparation to package our next product release and submit it for security review.
After doing so, the component becomes extremely slow and crashes in Firefox and Safari (it still works as expected in Chrome).
On Firefox, if I click the browser's wait button several times after being warned that a script takes too long to complete execution, i finally get the error: uncaught exception: out of memory out of memory aura_proddebug.js:24596:11
If I stop the script I get the following stack trace:
Error: Script terminated by timeout at:
next@https://*.lightning.force.com/auraFW/javascript/ChXnmCA7O-Fvbs9jcqI9Ow/aura_proddebug.js:19187:1
SecureFunction@https://*.force.com/auraFW/javascript/ChXnmCA7O-Fvbs9jcqI9Ow/aura_proddebug.js:21018:31
draw/<@/resource/1499768156000/*__CommonBundle/vendor/charts/Chart230.min.js:15:7332
[26]</e.exports/o.each@/resource/1499768156000/*__CommonBundle/vendor/charts/Chart230.min.js:14:6902
draw@/resource/1499768156000/*__CommonBundle/vendor/charts/Chart230.min.js:15:7225
draw/<@/resource/1499768156000/*__CommonBundle/vendor/charts/Chart230.min.js:13:30133
[26]</e.exports/o.each@/resource/1499768156000/*__CommonBundle/vendor/charts/Chart230.min.js:14:6902
draw@/resource/1499768156000/*__CommonBundle/vendor/charts/Chart230.min.js:13:30106
render/r.render@/resource/1499768156000/*__CommonBundle/vendor/charts/Chart230.min.js:13:29805
startDigest@/resource/1499768156000/*__CommonBundle/vendor/charts/Chart230.min.js:13:23857
requestAnimationFrame/t.request<@/resource/1499768156000/*__CommonBundle/vendor/charts/Chart230.min.js:13:23356
SecureFunction@https://*.lightning.force.com/auraFW/javascript/ChXnmCA7O-Fvbs9jcqI9Ow/aura_proddebug.js:21018:31
This seems to me a LockerService bug (especially since the component is still functional in Chrome). Any thoughts?
[Update] - Reproducible steps
Chart.js v.2.3.0 https://github.com/chartjs/Chart.js/releases/download/v2.3.0/Chart.min.js
lightningChart.cmp
<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
<!-- REPLACE ME WITH A VALID STATIC RESOURCE -->
<ltng:require scripts="{!join(',',
$Resource.CommonBundle + '/vendor/charts/Chart230.min.js')}"
afterScriptsLoaded="{!c.drawChart}"/>
<div>
<canvas id="chartCanvas" width="300" height="400" />
</div>
</aura:component>
lightningChartController.js
({
drawChart : function(component, event, helper) {
if (typeof Chart === 'undefined') return;
var config = {
type: 'doughnut',
data: {
labels: [
"One", "Two", "Three",
"Four", "Five", "Six",
"Seven", "Eight", "Nine"
],
datasets: [{
data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
backgroundColor: [
'#b74f9c', '#b72363', '#ec2aab',
'#06a706', '#03b7bb', '#8662cf',
'#ee8d98', '#e3dd60', '#c75364'
],
}]
},
options: {
responsive: true,
maintainAspectRatio: true
}
};
var chartCanvasElement = document.getElementById('chartCanvas');
var ctx = chartCanvasElement.getContext('2d');
var instance = new Chart(ctx, config);
}
})
IMPORTANT: Ensure the component's Bundle Version Settings is set to have API Version 40
- Drop the above component on a Lightning Page.
- View the Page in Chrome: chart renders
- View the Page in Firefox (in my case v54.0.1): browser eventually throws the following console log: uncaught exception: out of memory out of memory
