时间戳

首页 > 技术文章 > vue项目接入sentry错误日志采集

vue项目接入sentry错误日志采集

ivan5277 2020-05-18 14:40 原文

sentry官网注册一个账号：https://sentry.io/organizations/northfed/projects/new/

 

先安装依赖（以下步骤在sentry里都有提示步骤的）：

cnpm install @sentry/browser  
cnpm install @sentry/integrations

vue中main.js引入：

import Vue from 'vue';
import * as Sentry from '@sentry/browser';
import { Vue as VueIntegration } from '@sentry/integrations';

Sentry.init({
  dsn: 'https://a3745bb6b1734f4b94078878a682f731@o388935.ingest.sentry.io/5244239',
  integrations: [new VueIntegration({Vue, attachProps: true})],
    environment:baseUrl.env
});

 备注：dsn是创建sentry项目后动态生成的，类似百度的ak密钥标识当前项目。

 

 

下面截图sentry是创建一个项目和team：

 

 

 

 

效果：

控制台报错：

 

 

 sentry后台捕获报错：

 

 

就这么简单~！！

sentry的特性

  • 支持多种语言和框架

  • 相同错误合并

  • 定制规则进行邮件通知

  • 支持导入sourcemap自动解析和还原代码

  • 友好的可视化Web界面

 

Sentry免费版可以：

  • 每月5k 错误日志上限
  • 支持所有平台和语言，功能无缩水
  • 无限项目数量，仅单用户访问，不提供团队功能

 

 具体的价格表可以看这里：

推荐阅读