Vue 项目中接入sentry

Magicer 发布于2019-08-21 17:32 / 907人阅读

摘要：项目中接入最近在公司的内部项目中接入技术栈，跟踪运行时错误。具体的可以在你的项目中中查看三客户端设置在客户端中接入是简单的，只需要配置插件就可以了。

Vue 项目中接入sentry

    最近在公司的内部Vue项目中接入sentry技术栈，跟踪运行时错误。针对这件事分享下，有不完整或者错误的地方欢迎交流。[源码][1]

一、sentry 错误日志收集框架

Stop hoping your users will report errors
Open-source error tracking that helps developers monitor and fix crashes in real time. Iterate continuously. Boost efficiency. Improve user experience.

如果项目允许，你可以在sentry申请一个免费账户，管理你项目上传的运行时错误。也可以在公司搭建一个sentry。关于搭建sentry这块与本文无关就暂时不说了，可以查看。

1、sentry的原理（个人见解）

（1）sentry是一个收集项目运行时错误日志的框架，这个框架就要分为服务平台和客户端了。

    服务平台： 可以自己自己搭建，也可以使用官网的（免费、付费）
    客户端：从他的出发点是监控项目代码来理解就知道，需要嵌入项目中。作为前端的话第一个想到的就是插件了。

（2）、语言的多样化，开发使用语言是多样化的所以sentry支持的语言也比较多

（3）、错误日志的收集方式。代码中产生的错误日志怎样上传到sentry服务平台。

当你完成sentry配置的时候，你会得到一个称为“DSN”的值，看起来像一个标准的URL。
Sentry 服务支持多用户、多团队、多应用管理，每个应用都对应一个 PROJECT_ID，以及用于身份认证的 PUBLIC_KEY 和 SECRET_KEY。
由此组成一个这样的 DSN：
"{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}"
PROTOCOL 通常会是 http 或者 https，HOST 为 Sentry 服务的主机名和端口，PATH 通常为空。

二、sentry服务平台配置 1、创建项目

2、获取SENTRY_DSN（也叫Client Keys）

To send data to Sentry you will need to configure an SDK with a client key (usually referred to as the SENTRY_DSN value). For more information on integrating Sentry with your application take a look at our documentation.

如果是使用的免费的sentry
"{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}"
PROTOCOL 通常会是 http 或者 https，HOST 为 Sentry 服务的主机名和端口，PATH 通常为空。
具体的可以在你的项目中“Project Setting”中查看

三、客户端设置

在客户端中接入是简单的，只需要配置插件就可以了。但是要注意的是，必须在Vue配置之前。每一个的客户平台配置内容可以在官网查找。

import Vue from "vue";
import Raven from "raven-js";
import RavenVue from "raven-js/plugins/vue";

Raven
    .config("https://60f9e820eb7b4a8f9beb62a314b1f80d@sentry.io/242345")
    .addPlugin(RavenVue, Vue)
    .install();

四、报错后

点击进去可以查看详情，且会将报错信息默认发送到注册邮箱。

云服务器 GPU云服务器云服务器搭建vue项目腾讯云服务器部署vue项目 vue项目放到云服务器上阿里云服务器搭建vue项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89637.html

简单而完整地体验一遍sentry的sourcemap服务

摘要：是一个日志平台支持多种语言多种框架在接入的同时也接入了国内的相对而言的服务会比较完善比如上报控制的如果自行搭建可以忽略支持自行搭建服务当然了也很感谢的技术人员耐心为我解答了几个问题官网具体接入流程简单体验不使用框架注册登录创建团队创建 sentry Sentry是一个日志平台, 支持多种语言多种框架, 在接入sentry的同时, 也接入了国内的fundebug, 相对而言, sentr...

fsmStudy 2019-08-21 17:41 评论0 收藏0
vue项目前端错误收集之sentry

摘要：我创建了一个名为的项目。错误信息查看在后台找到我们的项目，点击进去就能看到多了一条错误信息。它由以下几部分组成，分别是协议公钥私钥主机路径一般为空项目。 sentry简介 Sentry 是一个开源的错误追踪工具，可以帮助开发人员实时监控和修复系统中的错误。其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言(JS/Java/Python/php)和平台, 并提供了w...

RaoMeng 2019-08-26 13:57 评论0 收藏0
Sentry异常监控方案部署-前端攻略

摘要：故而，我们需要在项目出现异常时主动对其进行收集上报，分析原因和影响后制定下一步解决方案。所以，我们需要一款成熟的异常监控系统来协助我们。最近在公司项目中部署了，用于项目中异常监控，涵盖了前端后端。原文首发于我的个人博客： https://lonhon.top/ 凡事只要有可能出错,那就一定会出错对于任何一个项目而言，本地测试肯定做不到100%覆盖，而且，我们也不能保证用户能按照我们...

Lorry_Lu 2019-08-22 16:31 评论0 收藏0
推荐几个前端开发插件

摘要：提高开发效率简单的集成到了生成的项目上项目地址一集成管理团队的信息步奏安装添加规则根目录添加文件，并添加规则，必须为格式添加到中安装并添加命令在中添加查看详情二集成管理团队编写规范步奏安装提高开发效率简单的集成到了vue-cli生成的项目上项目github地址 A Vue.js project Build Setup # install dependencies npm inst...

张宪坤 2019-08-23 12:07 评论0 收藏0
推荐几个前端开发插件

摘要：提高开发效率简单的集成到了生成的项目上项目地址一集成管理团队的信息步奏安装添加规则根目录添加文件，并添加规则，必须为格式添加到中安装并添加命令在中添加查看详情二集成管理团队编写规范步奏安装提高开发效率简单的集成到了vue-cli生成的项目上项目github地址 A Vue.js project Build Setup # install dependencies npm inst...

JowayYoung 2019-08-02 11:34 评论0 收藏0