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
)
;
}
)
;