1

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

Narshe
  • 427
  • 8
  • 22
  • What happens when your run `ng build --prod` ? does it fail ? –  May 22 '19 at 15:09
  • No errors at that stage. We even have the whole project under CI to try and catch as many of these errors as possible, which makes this issue even more annoying/hard to debug as, from the outside, the code looks correct. – Narshe May 22 '19 at 15:15
  • Well if [even Stackblitz](https://stackblitz.com/edit/angular-3dx11e) is aware of that, it means you have done something to your CLI / TS config ... Could you provide a [mcve] ? From experience, I have never witnessed the compiler accept this kind of error ... –  May 22 '19 at 15:17
  • I think I have reduced the problem to one of the libraries the project is using that is eating those exceptions. Because I'm new in the project and work angular I thought that was something to do with how NG handles exceptions, but no. Calling the method in OnInit, the exception is shown in console as expected. I'll update this post as soon as possible – Narshe May 22 '19 at 16:25
  • Well you'd better make another question, this one is buried now ! –  May 22 '19 at 16:30

1 Answers1

1

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)
Narshe
  • 427
  • 8
  • 22