Javascript runtime error when running from IE

Answered
Corbitt asked on April 11, 2018

The component functions properly within the context of my app in Google Chrome, but IE causes it to throw the attached error. I have also included the parameters I am sending to the Flexmonster call (minus the actual data as I am not at liberty to share it). Can you assist?
pivotDict[pivotInfos[plc].position] = new Flexmonster(tehPivot);
tehPivot = {"componentFolder":"flexmonster/","licenseKey":LICENSE KEY OMITTED,"report":{"options":{"grid":{"type":"classic","title":"Lead sheet"},"configuratorButton":false},"formats":[{"name":"","thousandsSeparator":" ","decimalSeparator":".","decimalPlaces":2,"maxDecimalPlaces":2,"maxSymbols":20,"currencySymbol":"","currencySymbolAlign":"left","nullValue":"","infinityValue":"Infinity","divideByZeroValue":"Infinity","textAlign":"right","isPercent":false},{"name":"tags","thousandsSeparator":" ","decimalSeparator":".","decimalPlaces":0,"maxDecimalPlaces":0,"maxSymbols":20,"currencySymbol":"","currencySymbolAlign":"left","nullValue":"","infinityValue":"Infinity","divideByZeroValue":"Infinity","textAlign":"right","isPercent":false}],"conditions":[{"formula":"#value > 0","measure":"tag_count","format":{"backgroundColor":"#00A45A","color":"#FFFFFF"}}],"dataSource":{"data":[[DATA REMOVED DUE TO SENSITIVE NATURE]]},"slice":{"reportFilters":[{"uniqueName":"source_type","filter":{"members":["source_type.[Ending balance]"],"negation":false}},{"uniqueName":"account_type","filter":{"members":[]}},{"uniqueName":"account_sub_type","filter":{"members":[]}},{"uniqueName":"account_class","filter":{"members":[]}},{"uniqueName":"account_sub_class","filter":{"members":[]}},{"uniqueName":"gl_account_code","filter":{"members":[]}},{"uniqueName":"currency_code","filter":{"members":[]}},{"uniqueName":"period_flag","filter":{"members":[]}}],"rows":[{"uniqueName":"account_type","sort":"desc"},{"uniqueName":"account_sub_type","sort":"desc"},{"uniqueName":"account_class","sort":"desc"},{"uniqueName":"account_sub_class","sort":"desc"},{"uniqueName":"gl_account_code","sort":"desc"}],"columns":[{"uniqueName":"currency_code"},{"uniqueName":"period_flag"},{"uniqueName":"[Measures]"}],"measures":[{"uniqueName":"net_amount","aggregation":"sum","availableAggregations":["sum"],"active":true},{"uniqueName":"tag_count","caption":"Tags","aggregation":"sum","availableAggregations":["sum"],"active":true,"format":"tags"}]}},"container":"Container0","toolbar":true,"width":"100%","height":"calc(100% - 80px)"}

Attachments:
FM_Unhandled.png

11 answers

Public
Tanya Gryshko Tanya Gryshko Flexmonster April 12, 2018

Hi Corbitt!
Thank you for reporting the issue.
We've checked your sample but we were unable to reproduce the issue without your data. Could you please replace real values with some random ones and send to Illia's email? It's necessary for us to test a sample with the actual data structure.
Thanks,
 Tanya

Public
Tanya Gryshko Tanya Gryshko Flexmonster April 12, 2018

Corbitt!
Illia forwarded me your data sample. Thanks a lot.
One more question. What the version of IE do you have? 
Thanks,
  Tanya

Public
Corbitt April 12, 2018

Hi Tanya,
We are using IE:
version: 11.2125.14393.0
update versions: 11.0.56
 
As a note: this operation also fails in MS Edge for me with the following error:
SCRIPT5007: Unable to get property '1' of undefined or null reference
flexmonster.js (9,837539)
Microsoft Edge 38.14393.2068.0
Microsoft EdgeHTML 14.14393
 
Thanks,
Corbitt Eason

Public
Tanya Gryshko Tanya Gryshko Flexmonster April 12, 2018

Corbitt,

I still have a problem reproducing the issue. Could you tell me if your application uses any other js libraries? Did you try to run our basic sample with your report?

Thanks

Public
Corbitt April 13, 2018
  1. Yes. we are using Highcharts, Gridstack, JQuery, canvas, pdfmake, require, and underscore.
  2. Not yet. I'll try feeding our data into the sample and let you know what I come up with. 
Public
Corbitt April 13, 2018

Tanya,
 
running the following code in the same context (layout attached) still produces the error:
 

@{
 ViewData["Title"] = "FMTest";
}
<!DOCTYPE html>
<h2 style="padding-top: 40px;padding-bottom: 40px;">FMTest</h2>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>FMTest</title>
</head>
<body>
 <div id="pivot-container"></div>
</body>
</html>
<script>
 new Flexmonster({
  container: "#pivot-container",
  componentFolder: "https://cdn.flexmonster.com/",
  width: "100%",
  height: 430,
  toolbar: true,
  report: {
   dataSource: {
    filename: "data/sales.csv"
   },
   slice: {
    rows: [{
     uniqueName: "Month"
    }, {
     uniqueName: "[Measures]"
    }],
    columns: [{
     uniqueName: "Category",
     levelName: "Product Name",
     filter: {
      members: [
       "category.[condiments].[bbq sauce]",
       "category.[breakfast cereals].[corn flakes]",
       "category.[confectionery]",
       "category.[bakery].[chocolate biscuits]",
       "category.[fruit preserves].[apple jam]",
       "category.[bakery].[apple cake]",
       "category.[soups].[tomato soup]"
      ]
     }
    }],
    measures: [{
     "uniqueName": "Revenue",
     "aggregation": "sum",
     "format": "2sfou03a"
    }]
   },
   conditions: [{
    formula: "#value < 2500",
    measure: "Revenue",
    format: {
     backgroundColor: "#df3800",
     color: "#FFFFFF"
    },
    isTotal: false
   }, {
    formula: "#value > 20000",
    measure: "Revenue",
    format: {
     backgroundColor: "#00A45A",
     color: "#FFFFFF"
    },
    isTotal: false
   }],
   formats: [{
    name: "2sfou03a",
    thousandsSeparator: ",",
    decimalSeparator: ".",
    decimalPlaces: 2,
    currencySymbol: "$",
    currencySymbolAlign: "left",
    nullValue: "",
    textAlign: "right",
    isPercent: false
   }]
  }
 });
</script>
 

Attachments:
RYOBI_Layout.txt

Public
Tanya Gryshko Tanya Gryshko Flexmonster April 13, 2018

Corbitt,
Thank you for sharing your layout, report and the list of JS libraries used in your application.
I have tested Flexmonster with all JS libraries you mentioned and with the configs you provided. However, the issue is unreproducible on our side. We kindly ask you to prepare JSFiddle demonstrating the issue or share with us zip archive containing simplified context of your app, like local js libs and files where Flexmonster is used.
We really hope this would help us to reproduce the issue.
Looking forward to your reply!
Regards,
Tanya

Public
Corbitt April 16, 2018

Tanya,
I will work on a fiddle, but for the moment I have published to our POC environment a version of the code which demonstrates the breakage, does not contain potentially sensitive data or implementations of the included libraries (just your example flexmonster) and is outside accessible. The layout is still present, so any conflicting library is still present. You can find it here. https://helixplatform.azurewebsites.net/Home/FMTest

Public
Tanya Gryshko Tanya Gryshko Flexmonster April 17, 2018

Hi Corbitt!
It looks like we've found the source of the problem.
The are several methods added to the prototype of core JavaScript class Array in the file RYOBI_index.js. We strongly recommend you to avoid using such practice.
I'll send you a quick fix for our component a little bit later.
Regards,
 Tanya

Public
Tanya Gryshko Tanya Gryshko Flexmonster April 17, 2018

Corbitt,
you can download the latest build from here: https://s3.amazonaws.com/flexmonster/EY/FLEXMONSTER-2018-EY-APR17.ZIP
Please keep in mind that it's a quick fix and we will run more tests and include it in the next minor release.
Thanks,
  Tanya

Public
Corbitt April 17, 2018

Wow, thanks. We are, obviously, working heavily with arrays and array modification. We will take your advice into account, and investigate efficient ways to achieve current functionality without adding methods to the Array prorotype. Thanks for the quick turnaround!

Please login or Register to Submit Answer