::: tip
Sentry 支持使用源映射对转译、缩小和捆绑的 JavaScript 进行分解,源映射是 JSON 文件,其中包含有关如何将部署的代码映射回其原始源的信息。这使您可以查看从堆栈跟踪中获得的原始未转换形式的源代码上下文。这在调试缩小和/或转译的代码时特别有用,因为这两个过程对代码进行了足够大的更改,以至于在其最终部署形式中通常变得几乎无法识别。源映射还允许 Sentry 在上下文中显示堆栈跟踪中的每一行,通过在任一侧包含额外的代码行。
参考链接:
https://docs.sentry.io/platforms/javascript/guides/vue/sourcemaps/uploading/cli/
https://docs.sentry.io/product/cli/releases/#managing-release-artifacts
:::
安装 sentry-cli
yarn add -D @sentry/cli
# or
npm i -g @sentry/cli
如果安装 sentry-cli
速度过慢,可以在根目录下添加 .yarnrc
文件,来使用镜像安装
.yarnrc
registry: https://registry.npm.taobao.org
ENTRYCLI_CDNURL: https://cdn.npm.taobao.org/dist/sentry-cli
sentrycli_cdnurl: https://cdn.npm.taobao.org/dist/sentry-cli
配置和认证
::: tip
配置API keys
,在选择令牌作用域时,必须要勾选 project:write
和 event:write
这 2 个选项,这涉及到后面上传 sourceMap
文件的权限。
:::
设置成功后可以拿到 API key
。
.sentryclirc
[defaults]
url = https://sentry.xxx.cn
org = sentry
project = xxx
[auth]
token = API key
- url:sentry 上报错误日志的网址;(固定域名: https://sentry.xxx.cn)
- org:项目所属的组织(注意:不是团队,是所属组织);
- project:项目名称;
- token:找到第一步生成的 API key(一定要有
project:write
权限),复制粘贴进去即可;
org
project
上传 sourceMap
用于 sourceMap 不能传到线上,但是 sentry 需要 .map 文件;在构建配置用需要把 sourceMap 打开。
在 OSS 部署代码的插件中已经在上传正式服的时候做了 .map 过滤
之前也说过 sourceMap 一定不能传到线上,可是我们又得把 sourceMap 传到自己的 sentry 中。其中我们可以通过插件上传后,发布新版本的时候手动把 sourceMap 删除。
node_modules/@sentry/cli/bin/sentry-cli releases files <version> upload-sourcemaps <dirPath> --url-prefix <web-prefix>
# 如
# node_modules/@sentry/cli/bin/sentry-cli releases files 1.0.0 upload-sourcemaps ./dist/js --url-prefix '~/recycle/js'
version
: 代表sourceMap
文件对应的版本;dirPath
: 这个是你本地项目sourceMap
文件所在目录的文件;web-prefix
: 网页前缀比如我们项目跑在https://app.gov.xxx.cn/recycle/index.html#/
, 那我们的前缀就是 recycle;我们需要,访问http://app.gov.xxx.cn/recycle/js/
才能找到对应的 JS 文件;
正常上传成功的提示如下:
在 sentry 中可以查看上传后的文件,如果前期版本也存在 sourceMap
文件,可以点后面删除的按钮。因为我们 sentry 存储空间有限,尽可能删除没用文件
参考链接: [https://www.yuque.com/shi_mu/fe/mh985m](https://www.yuque.com/shi_mu/fe/mh985m)