Chrome: SourceMap links not working

Hi there,

loving this library, using it every day with pure joy! 😃

One of the coolest features might be the generated links to jump directly to the source. For some reason, that doesn’t work for me. Clicking on one of the links just opens a new tab to about:blank instead:

(after clicking on the link)

Manually, I can open the file in the DevTools just fine:

Angular version 13.0.2: ngx-logger version: 5.0.7 Chrome version: 97.0.4692.99 (running in debug mode without any plugins enabled)

Configuration (in app.module.ts):

imports: [
...
HttpClientModule,
LoggerModule.forRoot({
  level: environment.production ? NgxLoggerLevel.INFO : NgxLoggerLevel.DEBUG,
  serverLogLevel: NgxLoggerLevel.OFF,
  timestampFormat: 'HH:mm:ss.SSS',
  enableSourceMaps:true
})
]

• I started angular dev environment with ng serve

Build config from angular.json:

    {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/styles"
              ]
            },
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss"
            ],
            "scripts": [],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          }

Did I miss something?

Thank you!

[BenniG82]

This works for me:

Extend the NGXLoggerWriterService and replace prepareMetaString with your own implementation that removes the leading “.” and adds ‘webpack://’.

import { Injectable } from '@angular/core';
import { INGXLoggerConfig, INGXLoggerMetadata, NgxLoggerLevel, NGXLoggerWriterService } from 'ngx-logger';

@Injectable({
  providedIn: 'root'
})
export class MyLoggerWriterService extends NGXLoggerWriterService {
 protected prepareMetaString(metadata: INGXLoggerMetadata, config: INGXLoggerConfig): string {
    const fileName = metadata.fileName?.charAt(0) === '.' ? 'webpack://' + metadata.fileName?.substring(1) : metadata.fileName;
    return super.prepareMetaString({ ...metadata, fileName }, config);
  }
}

Configure ngx-logger to use it:

LoggerModule.forRoot({/* your log-config here */}, {
      writerProvider: { provide: TOKEN_LOGGER_WRITER_SERVICE, useClass: MyLoggerWriterService }
    }),

Maybe there is a better way, but this works (at least on my machine 😄 ) How I came up with webpack://? Thats what I saw, when hovering over the source of console.log statements:

Sample output:

2022-03-26T13:22:56.331Z TRACE [webpack:///src/app/core/services/auth/authentication.service.ts:77:0] Token is still valid

[spyro2000]

This works!! So many thanks!

So together with the fix for the missing linebreak before the actual message the writer should look like this:

protected override prepareMetaString(metadata: INGXLoggerMetadata, config: INGXLoggerConfig): string {
    // Fix link to the source file in the console
    const fileName = metadata.fileName?.charAt(0) === '.'
      ? 'webpack://' + metadata.fileName?.substring(1)
      : metadata.fileName

    // We want to start the actual log message on a new line (after level + source link)
    return super.prepareMetaString({ ...metadata, fileName }, config) + '\n'
  }

(For some reason there is still an additional space added before the start of the actual message but it’s already way more readable).