HandsOnTable causing a parameter mismatch error with String.startsWith()

[ZarifS]

Description

After loading handsOnTable (community edition) from our node modules folder we began to see a error coming through the chrome javascript console: Uncaught Error: Sys.ParameterCountException: Parameter count mismatch.
The stack trace pointed at String.startsWith() as throwing the issue. After some investigation it seems like the distributed HoT code seems to be overwriting the default String.startsWith() function and in turn that function throws this exception. We believe the error is from Ajax during the call to the String.startsWith().

Steps to reproduce

1. Install"handsontable": "0.34.5"
2. Load HoT into source code
3. Run main page/application which loads HoT code (doesn't need to implement it)
4. Alternatively you can also try running a String.startsWith("a") call to see the exception being thrown.

Full Stack Trace:

Uncaught Error: Sys.ParameterCountException: Parameter count mismatch.
    at Function.Error$create [as create] (ScriptResource.axd?d=D9drwtSJ4hBA6O8UhT6CQjf0DaoSIddZ2zaEQ-R_S0Lcu0ljzFdYVjs6ebhJlB6jYR_ooxxv4QKyWR9QakefWVFTd2zhSyb_l22jRHQQpfw-jOni8lfuHn0NVaVDkQJlTdhZlVy9Dhk2uqjRUoTEriheeqn_NJ8BUpdp3Utju9A1&t=74693645:237)
    at Function.Error$parameterCount [as parameterCount] (ScriptResource.axd?d=D9drwtSJ4hBA6O8UhT6CQjf0DaoSIddZ2zaEQ-R_S0Lcu0ljzFdYVjs6ebhJlB6jYR_ooxxv4QKyWR9QakefWVFTd2zhSyb_l22jRHQQpfw-jOni8lfuHn0NVaVDkQJlTdhZlVy9Dhk2uqjRUoTEriheeqn_NJ8BUpdp3Utju9A1&t=74693645:413)
    at Function$_validateParameterCount [as _validateParameterCount] (ScriptResource.axd?d=D9drwtSJ4hBA6O8UhT6CQjf0DaoSIddZ2zaEQ-R_S0Lcu0ljzFdYVjs6ebhJlB6jYR_ooxxv4QKyWR9QakefWVFTd2zhSyb_l22jRHQQpfw-jOni8lfuHn0NVaVDkQJlTdhZlVy9Dhk2uqjRUoTEriheeqn_NJ8BUpdp3Utju9A1&t=74693645:118)
    at Function$_validateParams [as _validateParams] (ScriptResource.axd?d=D9drwtSJ4hBA6O8UhT6CQjf0DaoSIddZ2zaEQ-R_S0Lcu0ljzFdYVjs6ebhJlB6jYR_ooxxv4QKyWR9QakefWVFTd2zhSyb_l22jRHQQpfw-jOni8lfuHn0NVaVDkQJlTdhZlVy9Dhk2uqjRUoTEriheeqn_NJ8BUpdp3Utju9A1&t=74693645:70)
    at String$startsWith (ScriptResource.axd?d=D9drwtSJ4hBA6O8UhT6CQjf0DaoSIddZ2zaEQ-R_S0Lcu0ljzFdYVjs6ebhJlB6jYR_ooxxv4QKyWR9QakefWVFTd2zhSyb_l22jRHQQpfw-jOni8lfuHn0NVaVDkQJlTdhZlVy9Dhk2uqjRUoTEriheeqn_NJ8BUpdp3Utju9A1&t=74693645:491)
    at String.startsWith (1-bundle.js?88e7e269a96e574b7ef0:sourcemap:68347)
    at new Sys$UI$DomEvent (ScriptResource.axd?d=D9drwtSJ4hBA6O8UhT6CQjf0DaoSIddZ2zaEQ-R_S0Lcu0ljzFdYVjs6ebhJlB6jYR_ooxxv4QKyWR9QakefWVFTd2zhSyb_l22jRHQQpfw-jOni8lfuHn0NVaVDkQJlTdhZlVy9Dhk2uqjRUoTEriheeqn_NJ8BUpdp3Utju9A1&t=74693645:3986)
    at browserHandler (ScriptResource.axd?d=D9drwtSJ4hBA6O8UhT6CQjf0DaoSIddZ2zaEQ-R_S0Lcu0ljzFdYVjs6ebhJlB6jYR_ooxxv4QKyWR9QakefWVFTd2zhSyb_l22jRHQQpfw-jOni8lfuHn0NVaVDkQJlTdhZlVy9Dhk2uqjRUoTEriheeqn_NJ8BUpdp3Utju9A1&t=74693645:4052)

Your environment

• Handsontable version: "0.34.5"
• Browser Name and version: Chrome, 62.0.3202.75 (Official Build) (64-bit)
• Operating System: Windows 10

[AMBudnik]

Hi @ZarifS

Can you share your settings the instance's settings?

I've just built a sample app

  var container = document.querySelector('.example'), hot;
    hot = new Handsontable(container, {
            data: Handsontable.helper.createSpreadsheetData(10, 10),
            colHeaders: true,
            rowHeaders: true,
            columnSorting: true
    })

and relate to .full. files

<link rel="stylesheet" href="node_modules/handsontable/dist/handsontable.full.css">
<script src="node_modules/handsontable/dist/handsontable.full.js"></script>

using 0.34.5 (latest) version of CE and did not get the issue in the console.
Tried on FF and Chrome 62 on Windows 10.

ps. does the error block you for doing any actions with the table?

[ZarifS]

Hey,
So we did a little more digging and one our developers found some information relating to this issue that could be of use in the future. Although its not a solution it does explain the cause a little more clearer.

This is what we found:

We found some information that's relevant. It's an interaction between ASP.NET and HOT. In ASP.NET, this construct: <asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true"></asp:ScriptManager> causes injection of code that overrides String methods.

The crash happens because HOT is also intercepting String.startsWith (node_modules\handsontable\dist\handsontable.js around line 15099). It calls the original method with $startsWith.call(that, search, index), but that method, which has already been intercepted by ASP.NET, only expects one parameter and throws an exception.

This only happens in debug mode. We found a workaround of specifying ScriptMode="Release", i.e. <asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true" ScriptMode="Release"></asp:ScriptManager>

That doesn't stop ASP.NET from overriding String methods, but it prevents the validation. ASP.NET's version of String.startsWith only expects one parameter, and HOT is calling it with two. BTW String.startsWith is defined to have two parameters, so ASP.NET is wrong here.

There's some background info that may help anyone else who stumbles upon this. Can you tell us though, why is HOT intercepting String.startsWith, and under what conditions does it do so? In our testing, it doesn't always seem to intercept it.

Thanks.

[wojciechczerniak]

As stated in the comment this is not a bug in Handsontable so I'm going to close this issue. Thanks

String.startsWith is a part of core-js and bundled with HOT by babel polyfills. As they are less and less needed by modern browsers it will be a good idea to extract polyfills to external file, just for IE.

[obujeiromhginsurance]

am still fighting with this thank you for giving no solution