2

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

stack-trace-first-line

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
5
  • Hi PKolyCloudApps, do you see the same slowdown in Chrome? I'd like to repro your case. Could you provide additional information?
    – JF Paradis
    Jul 11, 2017 at 13:21
  • @JFParadis I do not see the same slowdown in Chrome. I am working on documenting reproducible steps, I will update the issue when I have these ready. Thank you Jul 13, 2017 at 10:56
  • Thanks @PKolyCloudApps. I'm super interested to know the issues. I should get the notification once you post.
    – JF Paradis
    Jul 13, 2017 at 16:03
  • @JFParadis Question updated with reproducible steps. Jul 13, 2017 at 16:29
  • 1
    Thanks for the into. I didn't see your post earlier. Yes, I can reproduce the out of memory situation in FF. Investigating...
    – JF Paradis
    Jul 27, 2017 at 13:15

1 Answer 1

0

I investigated the same issue, have a look at the ongoing discussion:

API v40 slows down Apex generated data in Lightning Components

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .