Chrome: SourceMap links not working

[spyro2000]

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!

[sylvain-gaborit]

hello,

I have the same problem.

Angular version 13.2.0:
ngx-logger version: 5.0.7
Chrome version: 98.0.4758.102

[spyro2000]

Is this lib still maintained...?

[bmtheo]

Yes it is but I am the only active maintainer for now

I am open to PR if you have time

About this issue, is the location of the log line correct ? (In your example "./src/app/core/components/.../grid-settings-store.service.ts:46:0")

[spyro2000]

Hello and thank you. Yes, the position is correct only the link itself is not working.

[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 :D )
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).

[ThisIsIvan]

Above method does not work for Angular 16.
To correctly parse the SourceMap I overwrote NGXLoggerMapperService::getMapping to use source-map-js.

  private getMapping(sourceMap: SourceMapPayload, position: INGXLoggerLogPosition): INGXLoggerLogPosition {
    try {
      const rawSourceMap: RawSourceMap = {
        file: sourceMap.file,
        mappings: sourceMap.mappings,
        names: sourceMap.names,
        sourceRoot: sourceMap.sourceRoot,
        sources: sourceMap.sources,
        sourcesContent: sourceMap.sourcesContent as string[],
        version: `${sourceMap.version}`,
      };
      const sourceMapConsumer = new SourceMapConsumer(rawSourceMap);
      const mappedPosition: MappedPosition = sourceMapConsumer.originalPositionFor({
        line: Number(position.lineNumber || 1),
        column: Number(position.columnNumber || 1),
      });
      return { fileName: mappedPosition.source, lineNumber: mappedPosition.line, columnNumber: mappedPosition.column };
    } catch (e) {
      return { fileName: 'unknown', lineNumber: 0, columnNumber: 0 };
    }
  }

If anyone wants to create a PR go ahead.

[viceice]

for vite this doesn't work either. my workaround is to extend the NGXLoggerWriterService to render the full file url and chrome can then link to proper position. Chrome will also resolve the sourcemap and points to source.

@Injectable()
export class NgxLoggerWriterService extends NGXLoggerWriterService {
  protected override getFileDetailsToWrite(metadata: INGXLoggerMetadata, config: INGXLoggerConfig): string {
      return config.disableFileDetails === true ? '' : `[${location.protocol}//${location.host}/${metadata.fileName}:${metadata.lineNumber}:${metadata.columnNumber}]`
  }
}

LoggerModule.forRoot(null, {
  configProvider: { provide: TOKEN_LOGGER_CONFIG, useFactory: loggerConfigFactory },
  writerProvider: { provide: TOKEN_LOGGER_WRITER_SERVICE, useClass: NgxLoggerWriterService },
}),