NGXLogger logs point to console.log in ngx-logger.mjs library file

[tomatemeo]

I would expect the logs to point to the position in the code, where the logger is called and not to the code line in the library where the console.log() is called in node_modules/ngx-logger/fesm/ngx-logger.mjs. However, in Chrome dev tools it does just that. Is there a setting I am missing, or anything else I could be doing wrong?

Any help appreciated

[bmtheo]

The logger gives you the position of your code in the []

In your case it is 8450.js:1:3363

[tomatemeo]

Thank for your reply @bmtheo ! I understand that, but the problem is that this is an Angular project, and 8450.js isn't that meaningful. The sourcemap apparently translates that to ngx-logger.mjs. However, if I want to use it instead of e.g. console.debug() that information is not helpful. I would like a behaviour as if I would have written console.debug() when using logger.debug(). Is this possible?

[bmtheo]

Did you :

• Set enableSourceMaps to true in ngxLogger config
• Build the source maps in your angular project (something like "sourceMap": {"scripts": true} in the config)

[tomatemeo]

Thank you so much @bmtheo , the enableSourceMaps: truesetting worked!

[tomatemeo]

The link now shows nicely in the square brackets, but I noticed, that it is not clickable because (at least in Google Chrome) the '.' at the start of the relative path is not recognised as being part of it. Sorry to ask again, but any ideas how to change this?

Thanks again for your help!

[toerni]

I have the same problem: The path that is displayed is correct, but when I copy the link by right clicking and copying the link, the value for the screenshot above is /app/infra/logging/logger-config.service.ts. The src part is dropped

[tomatemeo]

Just noticed, I never documented how I solved it in my case. I looked at where the links normally point to for console.logs and wrote a custom writer service to replace the '.' with the corresponding webpack prefix, that works well enough for me.

@Injectable()
export class CustomNGXLoggerWriterService extends NGXLoggerWriterService {

  static readonly PATH_START = /^\.\//
  static readonly WEBPACK_PREFIX = 'webpack:///'

  protected override getFileDetailsToWrite(metadata: INGXLoggerMetadata, config: INGXLoggerConfig): string {
    if (config.disableFileDetails) {
      return '';
    }
    const { fileName, lineNumber, columnNumber } = metadata;
    const webPackFileName = fileName.replace(CustomNGXLoggerWriterService.PATH_START, CustomNGXLoggerWriterService.WEBPACK_PREFIX);
    return `[${webPackFileName}:${lineNumber}:${columnNumber}]`;
  }
}

then in main.ts you can use that writer by:

...createApplication({
  ...
  providers: [
    ...
    LoggerModule.forRoot({ ... }, { 
      writerProvider: { 
        provide: TOKEN_LOGGER_WRITER_SERVICE, 
        useClass: CustomNGXLoggerWriterService     
      }
    }...

If I remember correctly the display problem with the link is not really the fault of ngx-logger, but what the browser dev environment/console interprets as link / part of a link.

[tscislo]

@tomatemeo Thanks for sharing your writer, unfortunately even when I use it I still have the same problem as described by @toerni

[tscislo]

@tomatemeo

I had to modify your Writer Service to use different PATH_START and WEBPACK_PREFIX

    static readonly PATH_START = /^src\// 
    static readonly WEBPACK_PREFIX = 'http://localhost:4200/src/'

Not very robust though ;)

[tscislo]

Main reason for this issue is that currently Angular CLI in version > 17 uses es-build instead of webpack for bundling