哨兵介绍

Sentry是一个开源的错误跟踪工具，可以帮助开发人员实时监控和修复系统中的错误。它侧重于错误监控和提取后处理所需的所有信息；它支持几乎所有主流开发语言(JS/Java/Python/php)和平台，并提供web展示输出错误。

哨兵官网：https://sentry.io/

哨兵设施

Sentry是一个可以自己构建的开源工具。

正式来说，安装和运行Sentry服务器有两种方式，Docker和Python。建议使用Docker。

当然刚来哨兵的同学也可以直接使用官方免费服务，但是有一些限制。

先介绍一下如何通过使用官方免费服务在前端项目中使用sentry。

如何在项目中使用哨兵

1.首先，你需要在哨兵官网注册一个账号。选择在注册后创建新项目。sentry支持多种框架，其中vue被选中来创建一个项目。我创建了一个名为test的项目。

1.创建项目的页面会自动跳转到如何配置vue项目的页面。然后，根据指南，将sentry引入vue代码。它可以通过cdn或npm引入。我们用npm来介绍。在介绍的时候，需要给init函数传递一个dsn参数。此参数唯一指定了我们刚刚创建的项目，该项目将在创建项目时自动生成。如果这个参数没有通过，哨兵就不会发送错误。

//main . jsimport * as Sentry from ' @ Sentry/browser '；从“@sentry/integrations”导入*作为集成；//让sentry报告生产环境中的错误。process . env . node _ env=' production ' sentry . init({ DSN 3360 ' https://[email protected]/1447145 '，integrations 3360[new integrations . vue({ vue，attachprops 3360 true) Add。项目和目录下的sentryclirc文件，其中的token可以从左上角头像中的api键获取。

[auth]token=' your token '[defaults]URL=https://sentry . ioorg=' your org ' project=test，然后我们在代码中犯一个错误，这样哨兵就可以抓住它。如何模拟在线环境在本地访问dist下的文件？你需要安装一个http服务器，只需在dist文件夹下启动一个http服务。

NPM I http-server CD dist http-server-p 8888注意：哨兵捕获的错误不会在控制台中打印。

您可以在网络中看到sentry发送了一个包含以下参数的错误请求：

接下来，我们可以在后台看到刚才上传的错误消息，哨兵也会向你的邮箱发送错误邮件。

查看错误消息

在后台找到我们的测试项目，然后点击它查看更多的错误信息。

点击信息进入信息详情查看。

但是，此错误消息是压缩的，无法定位到代码的实际位置。使用没有意义，需要上传源图。

上传源地图

上传的方式有很多。您可以通过sentry-cli通过命令行上传源地图，但需要手动上传。您也可以使用webpack-plugin作为插件，它可以在构建时自动上传源地图。本文采用自动上传策略。

项目配置：

//web pack . prod . confconst sentrycliplilugin=require(' @ sentry/web pack-plugin ')；plugins:[新sentryclipplugin({ include : })。/dist '，release : process . env . release _ VERSION，config file : ' sentry . properties ' })]//main . jssentry . init({ DSN : ' https://[email protected]/1447158 '，Integrations :[new Integrations]。Vue({ Vue，attachProps: true })，新集成。RewriteFrames() ]，release : process . env . release _ VERSION })；//prod . env . js ' use strict '；const release=' test-1 '；process . env . RElease _ VERSION=release；module . exports={ NODE _ ENV: ' ' production ' '，RELEASE _ version : ` ' $ { RELEASE } ' ` }；确保插件和Sentry.init中的发布版本号相同，这样Sentry就可以一个接一个地映射源映射文件。

修改后，让我们构建项目。建造的过程很慢：

我们到后台后，可以看到版本中多了一个test-1版本，也就是我们刚刚上传的版本。

点击查看我们刚刚上传的源地图文件。

此时，我们可以再次触发错误，并且可以看到具体的错误位置。

Sentry associates github

在setup-integration中，sentry可以设置为与各种服务相关联，例如github和jira。与github关联后，可以直接为这个异常创建一个问题。

这样，您就可以在此异常的详细信息页面上为哨兵的仓库创建一个问题。

创建时，您可以选择仓库、名称、详细信息和要分配的人员：

打开github，在sentry的仓库中，我们发现还有一个问题，我们刚刚创建的。

当我们向github提交提交时，如果我们添加一个异常id，例如：

git commit -m '修复测试-3 '

这样，当下一次发布构建时，sentry会自动将异常状态从未解决更改为已解决，并给出此提交的diff地址。

设立岗哨服务

政府给出了两种自己建造岗哨的方法：

python docker

建议使用Docker。让我们通过docker介绍一下如何建立岗哨。

首先你需要下载docker

Mac桌面地址：https://hub . docker.com/editions/community/docker-ce-desktop-MAC

它集成了docker命令行、docker-compose等。

然后需要去github获取sentry On-Premise，这是一个通过docker安装Sentry的官方仓库，里面介绍了如何一步一步的搭建Sentry。

创建服务步骤：

Cd onpremise//创建本地数据库Docker卷创建-名称=sentry-data Docker卷创建-名称=sentry-postgres//创建环境配置文件cp -n .env.example。env//Build docker Service docker-compose Build//生成一个密钥，并将其作为SENTRY_SECRET_KEY添加到。env文件//创建数据库。生成管理员账号docker-compose run-RM web升级带交互提示//启动所有服务docker-compose up -d如果流程正常，现在访问localhost:9000就可以看到sentry的登录页面，使用刚刚生成的管理员账号密码登录。

未来的操作将与上述操作相同。

需要注意的事项

1.使用本地构建的sentry创建项目时，发现dsn的列为空，系统没有自动生成。你需要自己拼接这个dsn。它由以下部分组成：协议、公钥、私钥、主机、路径(通常为空)和项目id。{ protocol } :/{ public _ key } : { secret _ key } @ { host }/{ path } { project _ id } '//就像这样，把它放在sentry.init中的dsn中

http://4 cf 10206 ef 27409 BBB 64 f 68 b :[email protected]:9000/2

摘要

以上是边肖介绍的vue项目前端错误收集哨兵教程的详细说明。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！