Sourcemap 文件对于前端 js 排障至关重要。Sourcemap 是一个信息文件,里面储存着代码转换前后的对应位置信息,可以解决在打包过程中,代码经过压缩、去空格以及 babel 编译转化后,由于代码之间差异性过大,造成无法 debug 的问题。Sourcemap 文件通常是在 CI/CD 过程中自动生成,如果用户有需求通过 API 调用或者想通过自定义流水线插件使流程自动化,可以参考以下的上传流程。
步骤一:获取调用云 API 的密钥
针对云上产品,前端页面使用的接口和 API 开放平台的接口是一致的。前端页面鉴权方式通常是使用微信/QQ/云梯账号等,而 API 开放平台的鉴权方式需要通过调用 API 对账号以及账号密钥进行鉴权。如果您想了解更多关于云 API 的内容,可以通过 前端性能 API 3.0 版本 进行查看。
步骤二:按照 demo 进行改造
为便于您的使用,您可以参照以下代码进行編写,以此改造自己的插件:
// Depends on tencentcloud-sdk-nodejs version 4.0.3 or higher// 需要引入相关 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 是外网域名,建议使用 rum.internal.tencentcloudapi.com,如果上面的密钥对没有开外网访问,使用外网域名将报无权限错误},},};const client = new RumClient(clientConfig);const params = {};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) => {client.DescribeReleaseFileSign(params).then((data) => {callback({TmpSecretId: data.SecretID,TmpSecretKey: data.SecretKey,SecurityToken: data.SessionToken,ExpiredTime: data.ExpiredTime,});},(err) => {console.error("error", err);}).catch(err => {console.log(err);});},});const timestamp = +new Date();const fileKey = `${projectID}-${version}-${timestamp}-${fileName}`;cos.putObject({Bucket: 'rumprod-1258344699', /* 必须 */ // 固定值Region: 'ap-guangzhou', /* 存储桶所在地域,必须字段 */ // 固定值Key: fileKey, /* 必须 */Body: sourceMapFileContent.toString(), // 上传文件对象}).then(res => {console.log(res);client.CreateReleaseFile({ProjectID: projectID,Files: [{Version: version,FileKey: fileKey,FileName: fileName,FileHash: fileHash,}]}).then((data) => {console.log('CreateReleaseFile res:', data);client.DescribeReleaseFiles({ProjectID: projectID}).then((data) => {// 这里就能查看到自己上传的 sourcemap 文件列表了console.log('DescribeReleaseFiles res: ', data);},(err) => {console.error("DescribeReleaseFiles error", err);});},(err) => {console.error("CreateReleaseFile error", err);});}).catch(err => {console.log('putObject err:', err);});