Skip to content

Upload SourceMap during project build

Guance currently provides a webpack plugin that can easily upload the corresponding directory's SourceMap files during the Web project build process, solving the cumbersome manual upload process.

Note: Currently supports uploads for Web applications.

Preparation

  1. Obtain the OpenApi domain address for the corresponding site;
  2. In Guance obtain the required OpenApi API KEY;
  3. On the Guance platform, obtain the Web application's applicationId, env, and version information. If there is no application, you need to create a new application;
  4. Preparation complete.

Webpack

Install @cloudcare/webpack-plugin

 npm install @cloudcare/webpack-plugin --D

Modify the plugins option in the webpack.config.js file

// ....
const { GuanceSourceMapUploadWebpackPlugin } = require('@cloudcare/webpack-plugin')
module.exports = ({ mode }) => ({
  //.....
  devtool: 'hidden-source-map',
  plugins: [
    //.....
    new GuanceSourceMapUploadWebpackPlugin({
      applicationId: 'xxxxx', // Guance appid
      apiKey: 'xxxxxxxx', // open apikey
      server: 'https://console.guance-xxx.cn',
      filepaths: ['dist/'], // Directories or files to search
      logLevel: 'verbose', // Log print level, optional
      root: 'dist/', // Directory to calculate relative paths, optional
      env: 'production', // Guance application env, optional
      version: '1.0.0', // Guance application version, optional
    }),
  ],
})

SourceMap WebpackPlugin Configuration Description

interface Options {
  /**
   *
   * Files/directories to search for sourcemaps.
   * All files matching the "extensions configuration" list but not matching the "ignore configuration" will be searched for
   * sourcemap JSON or `//#sourceMappingURL=` comments, so generated files + source maps pairs are found, then source maps will be uploaded.
   */
  filepaths: Array<string> | string

  /**
   * OpenApi Key generated by the Guance platform, refer to (https://docs.guance.com/en/management/api-key/open-api/#_1) for generation method.
   */
  apiKey: string

  /**
   * Guance platform OpenAPi service
   */
  server: string
  /**
   * RUM Application corresponding applicationId (required)
   */
  applicationId: string
  /**
   * RUM Application corresponding version (optional)
   */
  version?: string
  /**
   * RUM Application corresponding env (optional)
   */
  env?: string

  /**
   * Find all eligible files without uploading them, useful for debugging.
   */
  dryRun?: boolean

  /**
   * Delete all found source map files after uploading.
   */
  deleteAfterUpload?: boolean
  /**
   * If source maps cannot be matched with generated files via sourceMappingURL, attempt to match by filename on local disk.
   */
  matchSourcemapsByFilename: ?boolean

  /**
   * List of extensions to look for under directories.
   * Default [".js", ".map"].
   */
  extensions?: Array<string>

  /**
   * List of files to ignore.
   */
  ignore?: Array<string>

  /**
   * Directory to calculate relative paths. The relative path of uploaded sourcemaps should be included within the error path, thus
   * this parameter controls the uploaded relative directory.
   * Default relative path from execution directory to search directory path.relative(process.cwd(), filepath).
   */
  root?: string
  /**
   * Used during debugging, sets the log level.
   */
  logLevel?: 'quiet' | 'normal' | 'verbose'
}

Whether SourceMap is Visible in Production Environment

In production environments, for security reasons, we typically do not retain SourceMap files. These files allow developers to map compressed or compiled code back to original source code, but if made public, they may expose the internal logic of applications, increasing security risks.

To safely handle SourceMaps, you can enable the deleteAfterUpload: true option when configuring GuanceSourceMapUploadWebpackPlugin. This way, once the SourceMap is uploaded to the server, it will be immediately deleted from the local file system, ensuring that they do not remain in the production environment.

Additionally, by setting Webpack's devtool to "hidden-source-map", you can generate SourceMaps without including any references to them in JavaScript files. This prevents browsers from attempting to download and view the source code.

If "hidden-source-map" is enabled, you should also set matchSourcemapsByFilename: true in the GuanceSourceMapUploadWebpackPlugin plugin. This configuration ensures that the plugin can identify and upload the corresponding SourceMap files based on the names of the JavaScript files, even if they are not explicitly referenced in the generated code.

Through these measures, you can maintain the convenience of debugging your application while effectively protecting your source code.

 const { GuanceSourceMapUploadWebpackPlugin } = require('@cloudcare/webpack-plugin')
 = require('@cloudcare/webpack-plugin')

module.exports = {
  // Ensure that Webpack has been configured to output sourcemaps,
  // but without the `sourceMappingURL` references in build artifacts.
  devtool: 'hidden-source-map',
  // ...
  plugins: [
    // Enable our plugin to upload the sourcemaps once the build has completed.
    // This assumes NODE_ENV is how you distinguish production builds. If that
    // is not the case for you, you will have to tweak this logic.
    process.env.NODE_ENV === 'production'
      ? [
          new GuanceSourceMapUploadWebpackPlugin({
            ...
            deleteAfterUpload: true,
            matchSourcemapsByFilename: true,
          }),
        ]
      : [],
  ],
}

How to DEBUG

If SourceMaps are not found during runtime, you can set the environment variable DEBUG=guance:sourcemap-upload or configure logLevel: verbose and run the build command to view detailed logs.

Precautions

Node Version > 10.13

filepaths and root Configuration Notes:

  1. In the Guance console, there is an incorrect line in one of the errors at SVGGElement.<anonymous> @ http://localhost:8000/js/chunk-vendors.732b3b98.js:1:93427

  2. The relative path of the file causing the error is js/chunk-vendors.732b3b98.js

  3. If the js files are in the static directory on the server as dist/js/*.js dist/js/*.js.map

  4. Plugin configuration filepaths: ['dist']

  5. If root is not configured, the default value is dist/, and the final path of the uploaded SourceMap file to the Guance server is dist/js/**.js.map

  6. In this case, there will be a mismatch between the uploaded file directory path and the error-generating path, so at this point, you should add the configuration root:'/' or root: '', ensuring the upload directory path is js/**.js.map.

Feedback

Is this page helpful? ×