Sentry 监控部署与使用(详细流程)

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: Sentry 监控部署与使用(详细流程)

一、简介

  • Sentry 是一个开源的实时错误监控的项目,它支持很多端的配置,包括 web 前端服务器端移动端游戏端
    基于 Django 构建的现代化的实时事件日志监控、记录和聚合平台,主要用于如何快速的发现故障。更快地解决错误和性能问题,并从前端到后端不断了解他们的应用程序运行状况。
    支持各种语言,例如 pythonocjavanodejavascript 等。也可以应用到各种不同的框架上面,如前端框架中的 vueangularreact 等最流行的前端框架。
    提供了 githubslacktrello 等常见开发工具的集成。可以自己安装并且搭建 sentry 应用。
  • 优点
  • 产品体验好,功能完善
  • 接入工作量少
  • Sentry 专注于 ErrorExceptionCrash
  • 提供丰富的上下文信息
  • 自动合并重复问题
  • 主动邮件告警
  • 缺点
  • 部署依赖繁多官方提供的 Github 仓库,基于 DockerDocker Compose 确实可以一键部署、开箱即用。不过,当看到 30 个容器列在面前时,还是会觉得踌躇。
  • 需自行保障高可用比如:ZooKeeperNginxRedis 等,要自行运维这些组件并保障高可用,并不是容易的事情。
  • 如果大量的错误信息涌向 Sentry 服务器,会导致 Sentry 响应严重延迟

二、其他监控方案

  • Logan
    美团点评集团推出的大前端日志系统,包括日志的收集存储,上报分析以及可视化展示。提供了五个组件,包括 端上日志收集存储Web SDK后端日志存储分析 Server日志分析平台 LoganSite
  • ARMS
    阿里的一个前端数据监控的服务,专注于对 Web 场景Weex 场景小程序场景 的监控,从 页面打开速度(测速)页面稳定性(JS Error)外部服务调用成功率(API) 这三个方面监测 Web小程序页面 的健康度,似乎是收费的。
  • fundebug
    专业的应用错误监控平台,及时发现 Bug,提高 Debug 效率。目前支持 前端 JavaScript微信小程序微信小游戏支付宝小程序React NativeJava 以及 Node.js 等,是一个挺完善的前端错误日志服务,也是收费的。
  • BadJS
    腾讯团队的一个开源项目,针对 web 前端异常监控解决方案,提供一种 web 页面的脚本错误监控、上报、统计、查看等系统化的跟踪解决方案。
  • 目前比较流行的异常监控方案有以上几种,但从易用性、免费与否、以及项目是否开源等方面考虑, Sentry 是个非常不错的选择,服务端部署也非常简单,当然服务端也可以直接使用 Sentry 提供的,网站客户端引入 sentry sdk 并插入初始化 Sentry 的代码就可以实现对页面脚本异常的监控了。

三、部署(服务端)

  • 官网提供了两种部署方案:docker 方式python 方式
  • 部署实战记录

四、项目本地测试(Vue 项目举例,配置都差不多)

  • Sentry 管理后台创建项目,会出来对应项目类型的接入文档,可以根据需要做下调整。


  • Vue项目中引入并配置
  • 安装
# Using yarn
$ yarn add @sentry/vue
# Using npm
$ npm i @sentry/vue
  • main.js
// ======= Vue3
import { createApp } from 'vue'
import * as Sentry from "@sentry/vue"
const app = createApp(App)
Sentry.init({
  app,
  dsn: "http://924f490d8b1a4ee38f7e17a25cbab259@10.0.51.147:9000/3"
})
app.use(...).mount('#app')
// ======= Vue2
import Vue from 'vue'
import * as Sentry from '@sentry/vue'
Sentry.init({
  Vue,
  dsn: "http://924f490d8b1a4ee38f7e17a25cbab259@10.0.51.147:9000/3",
})
new Vue({...}).$mount('#app')
// ======= 只在线上环境进行错误日志收集
// process.env.NODE_ENV === 'production' && Sentry.init({...})
// 配置字段补充
Sentry.init({
  Vue,
  // 客户端密钥,可以通过进入项目 -》右上角设置 -》客户端密钥(DSN) 里面拷贝
  dsn: "http://924f490d8b1a4ee38f7e17a25cbab259@10.0.51.147:9000/3",
  // 项目版本号
  release: '1.0.0',
  // 使用哪些插件,附:http://www.javascriptcn.com/post/203679
  integrations: [new Integrations.BrowserTracing()],
  // 采样率,默认为 0.1,表示采集 10% 的请求,设置为 1.0,表示采集全部请求
  tracesSampleRate: 1.0,
  // 当前环境
  environment: 'production',
  // 发送前回调
  beforeSend(event) {
    // 在发送事件之前修改事件
    return event
  },
  ....
})
  • 随便找个位置,放置一段报错代码
<template>
  <div>
    <!-- 随便找个图片添加一个点击事件 -->
    <img @click="touchImg" alt="Vue logo" src="../assets/logo.png">
  </div>
</template>
<script setup>
import * as Sentry from "@sentry/vue"
// 点击输出
function touchImg () {
  // 输出一个不存在的对象,强制报错
  // 1、检测到报错会自动上报
  // console.log(window.a.b)
  // 2、检测到报错,手动上报
  try {
    console.log(window.a.b)
  } catch (error) {
    Sentry.captureException(error)
  }
}
</script>
  • 查看错误日志,下面这两个地方都能查看到错误日志


    能准确定位到某行代码:

五、项目打包后测试

补充

  • 如果线上报错无法定位到具体代码, 可以通过 @sentry/cli 解决,新增 .sentryclirc 配置文件进行配置。附:@sentry/cli 使用流程

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
5月前
|
监控 Ubuntu Docker
Sentry 监控 Docker 方式部署
Sentry 监控 Docker 方式部署
409 0
|
5月前
|
监控 前端开发 JavaScript
Sentry 监控部署与使用(详细流程)
Sentry 监控部署与使用(详细流程)
725 0
|
监控 Ubuntu Unix
Sentry 监控 Docker 方式部署
Sentry 监控 Docker 方式部署
625 0
|
人工智能 监控 前端开发
大型网站重构指南 第1.3部分:前端监控和小程序监控 Sentry
大型网站重构指南 第1.3部分:前端监控和小程序监控 Sentry
970 0
|
监控 前端开发 JavaScript
前端项目接入Sentry监控系统
本文适合项目需要接入错误监控的小伙伴阅读
前端项目接入Sentry监控系统
|
监控 Go 开发工具
|
消息中间件 存储 缓存
Sentry 企业级数据安全解决方案 - Relay 监控 & 指标收集
Sentry 企业级数据安全解决方案 - Relay 监控 & 指标收集
312 0
|
编解码 监控 前端开发
Sentry 监控 - Alerts 告警
Sentry 监控 - Alerts 告警
660 0
Sentry 监控 - Alerts 告警
|
存储 SQL 监控
Sentry 监控 - Snuba 数据中台架构(Data Model 简介)
Sentry 监控 - Snuba 数据中台架构(Data Model 简介)
236 0
Sentry 监控 - Snuba 数据中台架构(Data Model 简介)
|
存储 消息中间件 监控
Sentry 监控 - 私有 Docker Compose 部署与故障排除详解
Sentry 监控 - 私有 Docker Compose 部署与故障排除详解
2583 0
Sentry 监控 - 私有 Docker Compose 部署与故障排除详解
下一篇
无影云桌面