::: tip
插件文档详细说明请参考 @shencom/plugins 文档
:::

初始化文件

  1. # 安装依赖
  2. yarn add @shencom/plugins
  4. # 创建 setup/sentry.ts 文件，存在则用不创建
  5. mkdir src/setup && touch src/setup/sentry.ts
  7. # 创建 `src/setup/index.ts` 入口文件
  8. touch src/setup/index.ts

添加下面代码

src/setup/sentry.ts

  1. // 示例, 按需修改
  2. import { VueConstructor } from 'vue';
  3. import { Sentry } from '@shencom/plugins'; // 二次封装类
  4. import router from '../router'; // 路由
  6. const dsn = 'https://xxxx@sentry.shencom.cn/n';
  8. /** 初始化 */
  9. export default function install(Vue: VueConstructor) {
  10.   const { $utils, $config } = Vue.prototype as Vue;
  12.   const { _IsPro, _IsDev, _FormatDateTime } = $utils;
  13.   const { scid, version } = $config;
  15.   const release = version + (_IsPro ? '' : '.tst');
  17.   Sentry.install({
  18.     Vue,
  19.     dsn,
  20.     scid,
  21.     isDev: _IsDev,
  22.     isPro: _IsPro,
  23.     release,
  24.     BrowserTracingOption: {
  25.       routingInstrumentation: Sentry.context.vueRouterInstrumentation(router),
  26.     },
  27.     beforeSend(event) {
  28.       // 上报拦截，根据需要自定义上报数据
  29.       const base = {
  30.         scid,
  31.         date: _FormatDateTime(),
  32.         environment: _IsPro ? '正式' : '测试',
  33.         origin: window.location.origin,
  34.         hash: window.location.hash,
  35.         search: window.location.search,
  36.       };
  38.       // 上报 tag.name 可以通过当前用户名来查找全部出现异常的情况
  39.       // const user = _UserInfo._GetUserInfo() || {};
  40.       // const username = user.realname || user.nickname;
  41.       // if (username) {
  42.       // if (!event.tags) event.tags = {};
  43.       // Object.assign(event.tags, { username });
  44.       // }
  46.       if (!event.extra) event.extra = {};
  48.       Object.assign(event.extra, base);
  50.       return event;
  51.     },
  52.   });
  53. }

src/setup/index.ts

  1. import { VueConstructor } from 'vue';
  2. + import Sentry from './sentry';
  4. export default function install(Vue: VueConstructor) {
  5. +  Vue.use(Sentry);
  6. }

src/main.ts

  1. import Vue from 'vue';
  2. ...
  3. + import Init from './setup';
  5. + Vue.use(Init);

错误上报

::: tip
在 sentry.ts 中，进行初始化 @shencom/plugins 包的 Sentry 方法，根据需求进行改动；
通过创建一个 src/lib/utils/error.ts 文件，再进行集中处理不同类型的错误上报
:::

  1. // src/lib/utils/error.ts
  2. /* eslint-disable import/prefer-default-export */
  3. import { AxiosError } from 'axios';
  4. import { Sentry } from '@shencom/plugins';
  6. const responseError = (error: AxiosError) => {
  7.   console.log('请求错误--- :', error, { ...error });
  9.   if (!error || !error.response) return;
  11.   const { response, message } = error;
  12.   const { config, data, status } = response;
  13.   const method = (config.method && config.method.toLocaleUpperCase()) || '';
  15.   Sentry.setRequest({
  16.     data,
  17.     status,
  18.     method,
  19.     message,
  20.     url: config.url || '',
  21.     body: JSON.parse(config.data || '{}'),
  22.     header: config.headers || {},
  23.   });
  24. };
  26. const tryError = (error: Error) => {
  27.   console.log('脚本错误--- :', error);
  28.   Sentry.captureException(error);
  29. };
  31. /** 全局错误处理
  32.  *
  33.  * @param {(Error | AxiosError)} error 错误信息
  34.  * @param {boolean} [isHttp=false] 在请求拦截中传 `true` 为了防止请求错误重复上报
  35.  * @return {*}
  36.  */
  37. export const _GlobalError = (error: any, isHttp = false) => {
  38.   if (!error) return;
  40.   if (isHttp && error.response) {
  41.     responseError(error as AxiosError);
  42.   } else {
  43.     tryError(error as Error);
  44.   }
  45. };

请求错误

:::warning 请求错误上报，是在 axios 中的 请求拦截 和 响应拦截 中使用 _GlobalError 第二个参数需要传一个 true :::

axios.ts

  1. import axios from 'axios';
  2. import { _GlobalError } from '../utils/error';
  4. axios.interceptors.response.use(
  5.   () => {},
  6.   (error) => {
  7.     // code ...
  9.     _GlobalError(error, true);
  10.   },
  11. );
  13. axios.interceptors.request.use(
  14.   () => {},
  15.   (error) => {
  16.     // code ...
  18.     _GlobalError(error, true);
  19.   },
  20. );

脚本错误

脚本错误上报，一般为自动上报，如果手动上报可以参考下面代码

  1. onError() {
  2.   try {
  3.     const a: any = {};
  4.     const num = Math.floor(Math.random() * 10);
  5.     a.b[num].d.c = '1';
  6.   } catch (error) {
  7.     this.$utils._GlobalError(error); // _GlobalError 已经挂载到 Vue 实例上
  8.   }
  9. }

::: tip
try/catch 里面的请求，如果报错，已经在 axios 中的拦截器中已经进行上报；
这里面的错误请求将被过滤掉；
:::

  1. async onSendRequest() {
  2.   try {
  3.    const data = await this.$http.post<{data:{a:number}}>(this.$api.login, { a: 12 });
  5.    data.a.b.c = ''; // 抛出异常
  6.   } catch (error) {
  7.     this.$utils._GlobalError(error);
  8.   }
  9. }

加载优化

使用方式 1

配置 .babelrc 使用按需加载 @shencom/plugins 内容

  1. {
  2.   "plugins": [
  3.     [
  4.       "import",
  5.       {
  6.         "libraryName": "@shencom/plugins",
  7.         "libraryDirectory": "es",
  8.         "camel2DashComponentName": false
  9.       }
  10.     ]
  11.   ]
  12. }

使用方式 2

  1. import Sentry from '@shencom/plugins/es/sentry';
  3. Sentry.install({
  4.   // ...
  5. });