Search code examples
angularspreadjs

No exception being thrown inside SpreadJS event binding


First of all, I'm not sure if this is an Angular problem or ES6 problem.

During some refactoring in our app, we extracted a method to a different file and by doing so we made the following mistake:

export const setDataTypeToColumn = (
  row: any,
  col: any
) => {
  const updates = this.getChanges().updatedTables;
  // Some code in here
}

this.getChanges() is a method in the main file we used before the refactoring, but in this new file it does not exists, neither does in the arrow function as described. However, when calling setDataTypeToColumn(x, y) we don't get any console error. The application silently fails and what's worse, the follow-up code ends up not being executed.

It is only when I surround the call to setDataType with a try..catch where I get the exception error:

TypeError: _this.getChanges is not a function
    at Object.push../src/app/components/model-structure/validators.ts.exports.setDataTypeToColumn (validators.ts:120)
    at SetupComponent.push../src/app/components/model-structure/ .......

Is there any way to configure my environment (linter, compiler, angular itself) to catch these exceptions without having to spam my code with try/catch clauses all over the place?

Thanks for your answers and my apologies for the novice question


Solution

  • I found out that this issue is happening due to the use of Grapecity's SpreadJS library.

    Any exception raised inside an event binding callback will be caught by the library and won't be shown in console or be available to you outside the callback function.

    A minimal example:

        // Trigger on cell change
        this.sheet.bind(GC.Spread.Sheets.Events.CellChanged, (event, info) => {
          thisvariableisnotdefined = 0;  
        });
    

    This won't raise any errors on execution, and it's obviously identified by the IDE and compiler. More complicated cases may be easy to find like the one originally posted: we called setDataTypeToColumn from inside the function and we never got the exception back. Using a try/catch clause outside the function won't change the outcome either.

    You need to place a try/catch inside the callback function in order to handle any possible exceptions thrown inside:

        // Trigger on cell change
        this.sheet.bind(GC.Spread.Sheets.Events.CellChanged, (event, info) => {
          try {
            thisvariableisnotdefined = 0;
          } catch (err) {
            console.error(err);
          }
        });
    

    This code will properly log the exception to the console, or allow you to have your error ready to be handled.

    example.component.ts:386 ReferenceError: thisvariableisnotdefined is not defined
        at HTMLInputElement.<anonymous> (example.component.ts:350)
        at HTMLInputElement.j (gc.spread.sheets.all.min.js:25)
        at J.trigger (gc.spread.sheets.all.min.js:26)
        at na.Wq (gc.spread.sheets.all.min.js:30)
        at na.Bq (gc.spread.sheets.all.min.js:30)
        at T.setValue (gc.spread.sheets.all.min.js:29)
        at T.do (gc.spread.sheets.all.min.js:29)
        at na.uq (gc.spread.sheets.all.min.js:29)
        at na.setValue (gc.spread.sheets.all.min.js:29)