前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue项目创建并接入sentry

vue项目创建并接入sentry

作者头像
用户6094182
发布2020-02-24 12:54:41
1.3K0
发布2020-02-24 12:54:41
举报
文章被收录于专栏:joealzhou

vue项目创建并接入sentry

一、安装node.js

nodejs.cn官网下载,傻瓜式安装,直到Finish完成安装。

打开命令行,输入:

代码语言:javascript
复制
$npm -v

查看版本.png

补充:大家都知道国内直接使用npm 的官方镜像是非常慢的,可以使用淘宝 NPM 镜像。

代码语言:javascript
复制
npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

二、项目初始化

代码语言:javascript
复制
npm install vue-cli -g      //全局安装 vue-cli

通过 version或者list 命令参数查看vue是否安装成功

vue list.png

1、输入命令创建Vue项目:
代码语言:javascript
复制
vue-init webpack  ”项目名称“

初始化项目.png

2、使用vscode打开初始项目安装依赖:
代码语言:javascript
复制
$yarn add @sentry/integrations
$yarn add @sentry/browser  
3、配置sentry,在项目中的main.ts中加入以下代码:
代码语言:javascript
复制
import * as Sentry from "@sentry/browser";
import * as Integrations from "@sentry/integrations";

Sentry.init({
  dsn: "https://a21877a8baef4d5688908cf5ee30f848@sentry.io/1420283",
  integrations: [
    new Integrations.Vue({
      Vue,
      attachProps: true
    })
  ]
});
4、运行项目
代码语言:javascript
复制
$yarn start

运行成功,http://localhost:8080就可以打开此项目了。

结果成功.png

5、为了测试sentry是否成功,在main.ts最后自己发送一个错误
代码语言:javascript
复制
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

throw 'bug for developer';
6、登录sentry查看是否有错误日志

sentry error log.png

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • vue项目创建并接入sentry
    • 一、安装node.js
      • 二、项目初始化
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档