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¶
- Obtain the
OpenApi
domain address for the corresponding site; - In Guance obtain the required
OpenApi
API KEY
; - On the Guance platform, obtain the Web application's
applicationId
,env
, andversion
information. If there is no application, you need to create a new application; - Preparation complete.
Webpack¶
Install @cloudcare/webpack-plugin
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:¶
-
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
-
The relative path of the file causing the error is
js/chunk-vendors.732b3b98.js
-
If the js files are in the static directory on the server as
dist/js/*.js
dist/js/*.js.map
-
Plugin configuration
filepaths: ['dist']
-
If
root
is not configured, the default value isdist/
, and the final path of the uploaded SourceMap file to the Guance server isdist/js/**.js.map
-
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:'/'
orroot: ''
, ensuring the upload directory path isjs/**.js.map
.