前端监控

$ git clone https://github.com/getsentry/onpremise.git
$ cd ./onpremise
$ chmod u+x ./install.sh
$ ./install.sh
# or
$ sudo ./install.sh

$ vim ./cron/Dockerfile

# 修改如下
ARG BASE_IMAGE
FROM ${BASE_IMAGE}
RUN sed -i "s@http://deb.debian.org@http://mirrors.aliyun.com@g" /etc/apt/sources.list && apt-get update && apt-get install -y --no-install-recommends cron && \
    rm -r /var/lib/apt/lists/*
COPY entrypoint.sh /entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]

# 再次安装
$ sudo ./install.sh

# 创建数据库，生成管理员账号
$ docker-compose run --rm web upgrade

# 启动 Sentry 服务
$ docker-compose up -d

# 查看容器
$ docker-compose ps

# 命令应在sentry目录下执行

# 停止 sentry 相关容器
$ docker-compose down

# 重新build
$ docker-compose build

# 升级配置
$ docker-compose run --rm web upgrade

# 重新启动 sentry 相关容器（-d 是守护）
$ docker-compose up -d

SENTRY_EVENT_RETENTION_DAYS=7

import Vue from 'vue'
import Router from 'vue-router'
import * as Sentry from '@sentry/vue'
import { Integrations } from '@sentry/tracing'

Vue.use(Router)

const router = new Router({
  // ...
})

Sentry.init({
  Vue,
  dsn: 'https://138b35a0c5584646944565b51fa8a3f3@o1064497.ingest.xxxx.io/6055444',
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ['localhost', 'my-site-url.com', /^\//],
    }),
  ],
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
  // 添加用户崩溃反馈弹窗
  beforeSend(event, hint) {
    // Check if it is an exception, and if so, show the report dialog
    if (event.exception) {
      Sentry.showReportDialog({ eventId: event.event_id })
    }
    return event
  },
})

// ...

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app')

// yarn add @sentry/browser @sentry/tracing

import * as Sentry from '@sentry/browser'
import { Integrations } from '@sentry/tracing'

// init
Sentry.init({
  dsn: 'https://aabfe2180673babf842912aifd3863141519d@sentry.io/3806182',
  // 统计后台接口在前端的响应时间
  integrations: [new Integrations.BrowserTracing()],
})

import React from 'react'
import ReactDOM from 'react-dom'
import * as Sentry from '@sentry/react'
import { Integrations } from '@sentry/tracing'
import App from './App'

Sentry.init({
  dsn: 'https://138b35a0c5584646944565b51fa8a3f3@o1064497.ingest.sentry.io/6055459',
  integrations: [new Integrations.BrowserTracing()],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
})

ReactDOM.render(<App />, document.getElementById('root'))

// Can also use with React Concurrent Mode
// ReactDOM.createRoot(document.getElementById('root')).render(<App />);

import * as Sentry from '@sentry/vue'

export type ISentry = typeof Sentry

class TrackError {
  public sentry?: ISentry

  constructor(sentry?: ISentry) {
    this.sentry = sentry
  }

  captureException(exception: any) {
    if (!this.sentry || !exception) return

    this.sentry.captureException(exception)
  }
}

export default TrackError

[auth]
token=42b21a34ca654530af08			授权令牌，认证凭证token(Settings/Auth Tokens)

[defaults]
url = https://sentry.io/				上报 sentry 地址
org = ws-ap 										组织名称(Organization)
project = qv-h5									项目名称

const SentryCliPlugin = require('@sentry/webpack-plugin')

module.exports = {
  // 开启 source map
  productionSourceMap: true,
  configureWebpack: (config) => {
    config.plugins.push(
      new SentryCliPlugin({
        include: './dist/',
        configFile: 'sentry.properties',
        // 版本(如果没有指定，sentry会自动创建 string 类型版本号)，记得跟 init 版本一致sourceMap才会生效
        release: process.env.VUE_APP_PROJECT_RELEASE,
        ignore: ['node_modules'],
        urlPrefix: `${process.env.VUE_APP_COS_URL}/`,
      })
    )
  },
}