vue项目创建并接入sentry

vue项目创建并接入sentry

一、安装node.js

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

打开命令行，输入：

$npm -v

查看版本.png

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

npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

二、项目初始化

npm install vue-cli -g      //全局安装 vue-cli

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

vue list.png

1、输入命令创建Vue项目：

vue-init webpack  ”项目名称“

初始化项目.png

2、使用vscode打开初始项目安装依赖：

$yarn add @sentry/integrations
$yarn add @sentry/browser  

3、配置sentry，在项目中的main.ts中加入以下代码：

import * as Sentry from "@sentry/browser";
import * as Integrations from "@sentry/integrations";

Sentry.init({
  dsn: "https://[email protected]/1420283",
  integrations: [
    new Integrations.Vue({
      Vue,
      attachProps: true
    })
  ]
});

4、运行项目

$yarn start

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

结果成功.png

5、为了测试sentry是否成功，在main.ts最后自己发送一个错误

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

throw 'bug for developer';

6、登录sentry查看是否有错误日志

sentry error log.png