Sentry

介绍

• Sentry 是一个开源的实时错误报告系统，可以帮助开发者快速定位错误，提高开发效率。

• 可以通过自己搭建 sentry 服务，也可以通过 sentry.io 提供的服务。

• 自己搭建的 sentry 服务，可以通过 docker-compose 快速搭建(不要直接用dockerhub镜像安装,版本太老)。

• windows 下需要使用wsl2功能(因为要运行linux下的命令,windows不能直接运行)

前置工作

前置工作

• 安装docker, docker-compose

• 安装wsl2

• windows 商店安装一个linux发行版,如ubuntu

• 设置wsl2为默认的linux发行版

设置wsl2默认发行版

# Ubuntu-22.04 是你的发行版名称
wsl --set-version Ubuntu-22.04 2

查看docker 设置

1,拉取sentry镜像

拉取sentry镜像

• 由于sentry官方镜像太老,所以需要自己拉取最新的镜像
• github地址

git clone https://github.com/getsentry/self-hosted.git

2,wsl下安装

wsl下安装

• wsl一般会把windows的文件系统映射到linux的/mnt目录下
• 进入到self-hosted目录下
• 执行./install.sh脚本

cd self-hosted
./install.sh

3,创建用户名和密码

# 现在是否需要创建你的账户？默认：是
Would you like to create a user account now? [Y/n]:

# 输入邮箱
Email: 

# 输入密码，注意密码输入是不可见的，所以注意大小写。输入完成后会再确认。
Password:

4,使用docker-compose启动

docker-compose up -d

5,访问

访问

• 访问地址: http://localhost:9000

6,配置中文

配置中文

• 进入用户设置 -> 账户详情 -> PREFERENCES -> LANGUAGE

7,添加项目

添加项目

• 点击创建项目按钮,添加项目
• 选择vue项目

8,配置vue项目

yarn add @sentry/vue @sentry/tracing

// main.js
import * as Sentry from '@sentry/vue';
import { Integrations } from '@sentry/tracing';

Sentry.init({
  Vue: Vue,
  dsn: "http://XXXX@localhost:9000/2",
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ['localhost', 'https://my-site-url.com/api'],
      trackComponents: true,
    }),
  ],
  tracesSampleRate: 1.0,
});

// vite.config.ts
export default {
  build: {
    // 开启sourcemap,否则无法定位到源码
    sourcemap: true,
  },
}

9,测试

// app.tsx
export default defineComponent({
  mounted() {
    throw new Error("test Sentry");
  },
  setup() {
    return () => (
      <ConfigProvider locale={zhCN}>
        <RouterView />
      </ConfigProvider>
    );
  },
});

10,查看错误

查看错误

• 点击 问题 按钮,查看错误