Sentry-javascript: Angular 5 compilation error using @sentry/angular package

[ahmad-luqman]

• [x] Review the documentation: https://docs.sentry.io/
• [x] Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• [x] Use the latest release: https://github.com/getsentry/sentry-javascript/releases
• [ ] Provide a link to the affected event from your Sentry account

Package + Version

• [ ] @sentry/browser
• [ ] @sentry/node
• [ ] raven-js
• [ ] raven-node _(raven for node)_
• [x] other:

Version:

5.22.3

Description

When using "angular": "5.2", "angular/cli": "1.7.3", "typescript": "2.7.2", getting the following error when using the "@sentry/angular": "5.22.3" package:

> ng serve
Your global Angular CLI version (10.0.0) is greater than your local
version (1.7.4). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2020-08-31T10:18:09.309Z
Hash: 5135acf86bdc9ae2e3b2
Time: 1500ms
chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.91 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 577 bytes [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 41.6 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 871 kB [initial] [rendered]

ERROR in node_modules/@sentry/angular/node_modules/@angular/core/core.d.ts(7365,55): error TS1005: ']' expected.
node_modules/@sentry/angular/node_modules/@angular/core/core.d.ts(7365,57): error TS1134: Variable declaration expected.
node_modules/@sentry/angular/node_modules/@angular/core/core.d.ts(7365,124): error TS1005: ';' expected.
node_modules/@sentry/angular/node_modules/@angular/core/core.d.ts(12773,86): error TS1110: Type expected.
node_modules/@sentry/angular/node_modules/@angular/core/core.d.ts(12773,92): error TS1005: '=' expected.
node_modules/@sentry/angular/node_modules/@angular/core/core.d.ts(12773,94): error TS1005: ')' expected.
node_modules/@sentry/angular/node_modules/@angular/core/core.d.ts(12773,95): error TS1128: Declaration or statement expected.
node_modules/@sentry/angular/node_modules/@angular/core/core.d.ts(12773,96): error TS1128: Declaration or statement expected.
node_modules/@sentry/angular/node_modules/rxjs/internal/types.d.ts(81,44): error TS1005: ';' expected.
node_modules/@sentry/angular/node_modules/rxjs/internal/types.d.ts(81,74): error TS1005: ';' expected.
node_modules/@sentry/angular/node_modules/rxjs/internal/types.d.ts(81,77): error TS1109: Expression expected.
node_modules/@sentry/angular/node_modules/rxjs/internal/types.d.ts(82,52): error TS1005: ';' expected.
node_modules/@sentry/angular/node_modules/rxjs/internal/types.d.ts(82,88): error TS1005: ';' expected.
node_modules/@sentry/angular/node_modules/rxjs/internal/types.d.ts(82,92): error TS1109: Expression expected.


webpack: Failed to compile.

The question is which versions of angular are supported? And is there a plan to support the older version of angular? If not I can probably switch to the general @sentry-browser package.

[kamilogorek]

Angular 5 is supported, however, TypeScript 2 is not. We require at least v3 in order for the SDK to compile.

[burnaDLX]

Hi @kamilogorek,
I have the same error using "@angular/core": "7.1.0", and "typescript": "3.1.6".

ERROR in node_modules/@sentry/angular/node_modules/@angular/core/core.d.ts(7380,55): error TS1005: ']' expected.
node_modules/@sentry/angular/node_modules/@angular/core/core.d.ts(7380,57): error TS1134: Variable declaration expected.
node_modules/@sentry/angular/node_modules/@angular/core/core.d.ts(7380,124): error TS1005: ';' expected.

Which specific typescript minor release of ts3 is the minimum?

[Duboox]

@burnaDLX Same error here, same angular, ts versions,

[acramatte]

Angular 5 is supported, however, TypeScript 2 is not. We require at least v3 in order for the SDK to compile.

If I am not mistaken the current @sentry/angular package relies on Angular 10+. As of today, this pulls Angular 10.1.X that itself relies on TypeScript 4. Also, Angular 9 is no longer supporting TS 3.5 and below so there are no guarantee that using the latest version of @sentry/angular with an older version of Angular will work.

It is unclear to me why the package needs to have angular-common, core and such as direct dependencies and not peer-dependencies. Might be related to TS version then ?

When using "angular": "5.2", "angular/cli": "1.7.3", "typescript": "2.7.2", getting the following error when using the "@sentry/angular": "5.22.3" package:

On a side note, Angular 5 was released 3 years ago so that might be a good opportunity to catch up with major framework updates :)

[kamilogorek]

A quick fix for that is "skipLibCheck": true in your tsconfig file. I'll spend some time working on a better solution soon.

[neudesiceldho]

Angular 5 is supported, however, TypeScript 2 is not. We require at least v3 in order for the SDK to compile.

Any plan to support Angular 5, and typesciprt 2 ?

[Plonq]

If I am not mistaken the current @sentry/angular package relies on Angular 10+.

Angular 10 was release 3 months ago. Sentry can't expect everyone to immediately update the framework, yet never states this dependency anywhere (in the docs), and does not provide instructions for configuring Sentry for older Angular versions (if that's even possible).

We are on Angular 9 and have issues. Specifically:

WARNING in Invalid constructor parameter decorator in /path/to/project/node_modules/@sentry/angular/node_modules/@angular/core/fesm2015/core.js:
 () => [
    { type: Array, decorators: [{ type: Inject, args: [APP_INITIALIZER,] }, { type: Optional }] }
]

ERROR in getInternalNameOfClass() called on a non-ES5 class: expected ApplicationInitStatus to have an inner class declaration

EDIT: For anyone else having this problem, I was able to get it working following instructions here. Why Sentry doesn't have this in their docs is beyond me.

Summary:

import * as Sentry from "@sentry/browser";
import { RewriteFrames } from "@sentry/integrations";

Sentry.init({
  dsn: <your DSN>,
  integrations: [new RewriteFrames()],
});

import { ErrorHandler, Injectable } from "@angular/core";
import * as Sentry from "@sentry/browser";

@Injectable()
export class SentryErrorHandler implements ErrorHandler {
  constructor() {}

  handleError(error: any) {
    Sentry.captureException(error.originalError || error);
    console.error(error);
  }
}

app.module.ts:

...
providers: [
  { provide: ErrorHandler, useClass: SentryErrorHandler },
  ...
],
...

[dmrugalski]

If I am not mistaken the current @sentry/angular package relies on Angular 10+.

Angular 10 was release 3 months ago. Sentry can't expect everyone to immediately update the framework, yet never states this dependency anywhere (in the docs), and does not provide instructions for configuring Sentry for older Angular versions (if that's even possible).

We are on Angular 9 and have issues. Specifically:

WARNING in Invalid constructor parameter decorator in /path/to/project/node_modules/@sentry/angular/node_modules/@angular/core/fesm2015/core.js:
 () => [
    { type: Array, decorators: [{ type: Inject, args: [APP_INITIALIZER,] }, { type: Optional }] }
]

ERROR in getInternalNameOfClass() called on a non-ES5 class: expected ApplicationInitStatus to have an inner class declaration

EDIT: For anyone else having this problem, I was able to get it working following instructions here. Why Sentry doesn't have this in their docs is beyond me.

Summary:

import * as Sentry from "@sentry/browser";
import { RewriteFrames } from "@sentry/integrations";

Sentry.init({
  dsn: <your DSN>,
  integrations: [new RewriteFrames()],
});

import { ErrorHandler, Injectable } from "@angular/core";
import * as Sentry from "@sentry/browser";

@Injectable()
export class SentryErrorHandler implements ErrorHandler {
  constructor() {}

  handleError(error: any) {
    Sentry.captureException(error.originalError || error);
    console.error(error);
  }
}

app.module.ts:

...
providers: [
  { provide: ErrorHandler, useClass: SentryErrorHandler },
  ...
],
...

Oh gosh... I've spent a few hours because I had similar problem.... I copied your code and still no luck... But then I realized I had a wrong import!

I had:

import * as Sentry from '@sentry/angular';

but your import is:

import * as Sentry from "@sentry/browser";

Changed that and it's working!