首页 Vue正文

vue项目接入sentry

景先 Vue 2019-08-08 282 0

vue项目接入sentry

新建项目

在首页,点击右上角Add new...,选择项目。

在对应的地方输入项目名, teamfe_team, 然后创建项目即可。

创建完成之后,点击Get your DSN,并保存公用DSN

使用sentry

webpack项目

安装@sentry/browser(Sentry’s browser JavaScript SDK)。

安装@sentry/integrations(Vue Error Handling)。

npm i @sentry/browser @sentry/integrations

main.js中引入并配置即可,project dsn为上一步的公用DSN获取项目dsn

外网仅支持https,务必将DSN的http改为https

外网仅支持https,务必将DSN的http改为https

外网仅支持https,务必将DSN的http改为https

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

const sentryDsn = `{{project dsn}}`;

const sentryEnv = (() => /^\d+$|localhost/g.exec(location.host.replace(/\.|:/g, ''))
  ? (/^192\.168/g.exec(location.host) ? 'test' : 'dev')
  : 'prod')();

Sentry.init({
  dsn: sentryEnv === 'dev' ? '' : sentryDsn,
  environment: sentryEnv,
  integrations: [
    new Integrations.Vue({
      Vue,
      attachProps: true,
    }),
  ],
});

需手动进行配置来捕获请求错误,在封装的axios函数中,错误处理的地方加上sentry即可,如:

import * as Sentry from '@sentry/browser';

...
axios(...).then(res => {
  ...
}).catch((error) => {
  Sentry.captureException(error);
  ...
});
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论