帮你快速理解、总结文档立即下载

RUM 自动上传 sourcemap 文件

最近更新时间:2026-09-22 20:36:01
我的收藏
Sourcemap 文件对于前端 JS 排障至关重要。Sourcemap 是一个信息文件,里面储存着代码转换前后的对应位置信息,可以解决在打包过程中,代码经过压缩、去空格以及 babel 编译转化后,由于代码之间差异性过大,造成无法 debug 的问题。Sourcemap 文件通常是在 CI/CD 过程中自动生成,如果用户有需求通过 API 调用或者想通过自定义流水线插件使流程自动化,可以参考以下的上传流程。

步骤1:获取调用云 API 的密钥

针对云上产品,前端页面使用的接口和 API 开放平台的接口是一致的。前端页面鉴权方式通常是使用微信/QQ/云梯账号等,而 API 开放平台的鉴权方式需要通过调用 API 对账号以及账号密钥进行鉴权。如果您想了解更多关于云 API 的内容,可以通过 前端性能 API 3.0 版本 进行查看。

步骤2:按照 demo 进行改造

为便于您的使用,您可以参照以下代码进行编写,以此改造自己的插件:

// Depends on tencentcloud-sdk-nodejs(请升级至最新版,需包含 DescribeFileCertificate 接口)
// 需要引入相关 npm 包
const tencentcloud = require('tencentcloud-sdk-nodejs');
const COS = require('cos-nodejs-sdk-v5');
const fs = require('fs');
var crypto = require('crypto');
const RumClient = tencentcloud.rum.v20210622.Client;
const clientConfig = {
credential: {
secretId: '子账号密钥 id',
secretKey: '子账号密钥 key',
},
region: "",
profile: {
httpProfile: {
endpoint: "rum.tencentcloudapi.com", // rum.tencentcloudapi.com 是外网域名,如果上面的密钥对没有开外网访问,使用外网域名将报无权限错误
},
},
};
const client = new RumClient(clientConfig);
const projectID = 0; // rum 的项目 id(数字 id 不是上报 key),必填
const version = '1.0.0'; // 这里自己填入需要的版本号(比如线上使用的 js 是1.0.0版本)
const fileName = 'test.js.map'; // sourcemap 文件名
// 读取文件内容
const sourceMapFileContent = fs.readFileSync('./test.js.map');
var fileHash = crypto.createHash('md5').update(sourceMapFileContent.toString()).digest('hex');
const cos = new COS({
getAuthorization: (options, callback) => {
// 新接口:传入项目 ID,返回按项目前缀授权的临时密钥与桶地址
client.DescribeFileCertificate({ ID: projectID }).then(
(data) => {
// BucketAddress 格式为 "地域:桶名",如 "ap-guangzhou:rumprod-xxxxx"
const [region, bucket] = data.BucketAddress.split(':');
callback({
TmpSecretId: data.SecretID,
TmpSecretKey: data.SecretKey,
SecurityToken: data.SessionToken,
ExpiredTime: data.ExpiredTime,
Bucket: bucket, // 桶地址由服务端下发,不要再写死
Region: region,
});
},
(err) => {
console.error("error", err);
}
).catch(err => {
console.log(err);
});
},
});
const timestamp = +new Date();
// 注意:fileKey 必须以 "项目ID-" 开头,临时密钥仅授权该项目前缀
const fileKey = `${projectID}-${version}-${timestamp}-${fileName}`;
cos.putObject({
Bucket: '从 BucketAddress 解析', /* 见 getAuthorization 回调 */
Region: '从 BucketAddress 解析',
Key: fileKey, /* 必须 */
Body: sourceMapFileContent.toString(), // 上传文件对象
}).then(res => {
// …… CreateReleaseFile / DescribeReleaseFiles 部分不变,原样保留
}).catch(err => {
console.log('putObject err:', err);
});