前端性能监控 RUM 自动上传 sourcemap 文件-实践教程-文档中心-腾讯云

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);
});
﻿
RUM 自动上传 sourcemap 文件

本页目录：

步骤一：获取调用云 API 的密钥

步骤二：按照 demo 进行改造
