Source map line numbers mismatch (Angular)

Elastic Observability APM
1

I am using Angular 9 and elastic/apm-rum-angular version 1.1.6.

I uploaded the source maps generated by running "ng build --source-map".

There is a mismatch between what is displayed in the "Exception stack trace" and the original TypeScript files.

APM Exception stack trace:
APM-Line70

TypeScript file as displayed in Chrome:
Chrome-Line70

The file and line number are correct:
"webpack:///src/app/form/form.component.ts in call at line 70"
That correctly refers to the line with:

this.sub.unsubscribe();

However, in the Exception stack trace, it is missing the empty lines in between lines of code, so it's erroneously highlighting:

goToLanding() {

Is there a way to fix this issue/preserve the original formatting of the files when they are displayed in the Exception stack trace?

Thank you!

2

That's not a known problem and recent fixes don't mention it.

Did you follow the APM RUM Angular instructions?

If so it'd be good to see your main app module where you hook RUM into your app, just to make sure that's set up right.

Which method of source map generation & upload did you use? (e.g. are you using parcel, webpack, etc. - how did you generate it in case I wanted to try the same)

3

Thank you for your reply, Emanuil!

Yes, I followed those Angular integration instructions.

Here are parts from my app.module.ts:

  providers: [
    ...
    {
      provide: ApmService,
      useClass: ApmService,
      deps: [Router],
    },
    {
      provide: ErrorHandler,
      useClass: ApmErrorHandler,
    },
  ],

(serviceName and serverUrl values have been changed to empty strings below)

export class AppModule {
  constructor(
    @Inject(ApmService) as: ApmService,
    @Inject(SettingsService) ss: SettingsService
  ) {
    ss.settings.pipe(take(1)).subscribe((settings: Record<string, string>) => {
      const env = settings.env;

      const apm = as.init({
        serviceName: '',
        serviceVersion: '1.0.0',
        serverUrl: '',
        environment: env,
      });

      apm.setUserContext({
        username: 'localhost',
        id: 'default',
      });
    });
  }
}

To generate the source maps, I ran ng build. "webpack" is shown in my screenshot above.
To upload the source maps, I ran a Node.js script based on:


I also tried uploading them via Postman but there was no difference.
4

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.