sentry-前端应用监控工具

水深无声 2022-11-29 13:04 584阅读 0赞

### 一、sentry介绍： ###

Sentry 是一个开源的实时错误追踪系统，可以帮助开发者发现问题、追踪问题；支持 web 前后端、移动应用等。

了解更多信息，请移步[sentry官网][sentry]

### 二、sentry配置 ###

#### 1、注册sentry账号 ####

使用sentry监控平台，必须先申请账号

#### 2、登录sentry网站，重设语言和时区 ####

**1）点击账号旁的箭头，打开弹出**  
![在这里插入图片描述][20200821152113956.png_pic_left]  
**2）点击账号弹窗中的"User settings"选项，进入账号设置页面，可设置语言、时区**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70_pic_left]

#### 3、配置项目 ####

**1）点击‘项目’菜单，进入项目页面，创建自己的项目，这里我们以创新Vue项目为例。**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70_pic_center]  
**2）创建项目成功后，自动进入配置页面，描述了vue项目配置sentry的步骤**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70_pic_center 1]

**3）项目配置sentry**  
打开本地项目，按sentry平台中提示的项目配置步骤，为项目配置sentry监控。

// 步骤一：安装sentry插件
    npm install @sentry/browser
    npm install @sentry/integrations
    
    // 步骤二：main.js添加如下代码
    import Vue from "vue";
    import * as Sentry from "@sentry/browser";
    import {  Vue as VueIntegration } from "@sentry/integrations";
    
    Sentry.init({ 
      dsn: "https://62ed24c86g0a4f26b86ea4ab294dadfb@l211011.ingest.sentry.io/1116510",
      integrations: [new VueIntegration({  Vue, attachProps: true })],
    });

到此为止项目配置sentry监控完成，可访问sentry官网查看

[sentry]: https://sentry.io/
[20200821152113956.png_pic_left]: /images/20221124/4ab6764369a4460ab97eecb1b094aa46.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70_pic_left]: /images/20221124/f675a5ee82274837ae0158d6d6a20d5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/c76e21cf6d7d4d808a96d2db3f090bc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/a5996de6040c4d338b283c35bceb63aa.png