前端监控不可或缺，深度解析Docker+Sentry搭建可行方案

2023-09-27 23:07:59

前端监控基础篇 — Docker + Sentry 搭建前端监控系统

前言

前端监控一直是开发生产中不可或缺的一环，无论是错误监控、性能监控还是用户体验监控。在小公司节约成本的情况下，收费的监控方案就不考虑了，本文采用的是免费方案中最主流的 Sentry。此外，本文将采用 Docker 来搭建 Sentry，以便于在不同的环境中轻松部署和管理。

搭建 Sentry + Docker 前端监控系统

安装 Docker

# 安装 Docker 引擎
curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh

# 启动 Docker 服务
sudo systemctl start docker

# 查看 Docker 状态
docker info

安装并运行 Sentry

# 从 Docker Hub 拉取 Sentry 镜像
docker pull sentry

# 运行 Sentry 容器
docker run -d -p 9000:9000 \
--name sentry \
-v /srv/sentry/data:/var/lib/sentry \
sentry:latest

配置 Sentry

# 打开浏览器，访问 http://localhost:9000
# 创建一个新的组织和项目
# 记下你的组织和项目的名称，稍后你需要用到它们

集成 Sentry 到你的前端代码

// 安装 Sentry SDK
npm install @sentry/browser

// 在你的代码中导入 Sentry SDK
import * as Sentry from '@sentry/browser';

// 初始化 Sentry SDK
Sentry.init({
  dsn: 'YOUR_DSN',
  release: 'YOUR_RELEASE_VERSION',
  environment: 'YOUR_ENVIRONMENT',
});

// 捕获并发送错误到 Sentry
Sentry.captureException(new Error('My Error Message'));