in function main错误_错误质量监控系统 Sentry 部署和接入

最新推荐文章于 2023-02-10 15:38:13 发布

weixin_39897392

最新推荐文章于 2023-02-10 15:38:13 发布

阅读量952

点赞数

文章标签： in function main错误

本文链接：https://blog.csdn.net/weixin_39897392/article/details/112089201

版权

1. 使用官方服务

1.1 官网

https://sentry.io/，在官网创建你自己的账号，组织，以及项目吧。

1.2 接入步骤

错误上报 SDK 接入文档^[1]

以下示例代码是最基础的三个步骤，主要看你项目是什么技术栈，文档都有相应的接入方式。

// #1 引入上报 SDK
"https://browser.sentry-cdn.com/5.10.2/bundle.min.js" 
    integrity="xxxxxx" 
    crossorigin="anonymous">


// #2 初始化上报 SDK，填入上报地址
Sentry.init({ 
    dsn: 'https://XXX@sentry.io/111'
});

// #3 捕捉错误，比如在 window.onerror 
Sentry.captureException(err)

2. 搭建私有 Sentry 服务

❝
使用 Docker 部署 Sentry 服务。
❞

用 Docker 搭建你的第一个 Node 项目到服务器^[2]，带你简单入门 Docker。

2.1 安装 Docker

Docker 官网^[3]，可以根据自身环境选择适合的安装方式，我这里是 macOS。

2.2 搭建和部署

获取 onpremise

onpremise 仓库地址^[4]， onpremise 是官方提供的部署私有 Sentry 服务的镜像，可以将仓库项目 clone 到本地，开始造。

❝
注意版本，不同版本可能部署遇到的问题不同
❞

git clone https://github.com/getsentry/onpremise.git

创建服务端服务

# 进入项目
cd onpremise

# 新建本地数据库和 Sentry 配置的目录
docker volume create --name=sentry-data && docker volume create --name=sentry-postgres

# 创建环境变量配置文件
cp -n .env.example .env

# 构建 Docker Services
# 如果报 SENTRY_IMAGE 相关的错，就加上 --build-arg SENTRY_IMAGE=sentry:9.1.2
docker-compose build

# 生成秘钥
docker-compose run --rm web config generate-secret-key

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

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

# 查看容器
docker-compose ps

# 端口映射，将本地端口 9090 映射到容器端口 6060
docker run -d -p 9090:6060

在本地的话，浏览器访问 localhost:9090 就可以访问以上启动的服务。而访问服务器部署的服务，注意下 Docker 端口映射。

2.3 更多 Docker 命令

❝
大都会在服务部署时会使用到
❞

# 查看服务
docker-compose ps

# 停止运行
docker-compose down

# 查看日志
docker-compose logs

# 查看所有容器
docker ps -a

# 查看运行容器
docker ps

# 停用所有容器
docker stop $(docker ps -q)

# 删除所有容器
docker rm $(docker ps -aq)

# 启动某个容器
docker start container_id

# 查看数据卷
docker volume ls

# 删除所有数据卷
docker volume rm $(docker volume ls -q)

# 端口映射，将本地端口 9090 映射到容器端口 6060
docker run -d -p 9090:6060

2.4 接入步骤

❝
跟 1.2 中的基本一样，更多例子可参考 1.2 中的文档。
❞

比如是 React 项目：

// npm
npm install --save @sentry/react

// JavaScript
import React from "react";
import ReactDOM from "react-dom";
import * as Sentry from "@sentry/react";
import App from "./App";

// 初始化
Sentry.init({ dsn: "https://examplePublicKey@o0.ingest.sentry.io/0" });

ReactDOM.render(, document.getElementById("root"));

// 捕捉错误
"An error has occurred"}>;

3. Source map

❝
完成 Sentry 服务部署和客户端错误上报 SDK 接入的步骤，在本地触发个错误，基本上可以在系统上中看到上报的错误信息了。由于生产环境中前端代码都是会做混淆，这时候就要结合 Releases^[5]，做 Source map^[6] 解析，帮助我们得到源码的错误栈，快速定位问题。
❞

3.1 Source map 文件访问

可以通过两种方式管理 Source map 文件:

上传到 Sentry 系统
使用 HTTP 访问

方式 2 会泄露 Source map 文件，进而泄露源代码，是不建议在生产环境中暴露 Soruce map 文件的，所以我更推荐选择较为可控的方式 1 。

3.2 上传到 Sentry 系统

上传方式分为以下两种：

sentry-webpack-plugin^[7]
Sentry CLI^[8]

如果你的项目是用 Webpack 构建的，那更好了，使用 sentry-webpack-plugin，一把梭到位。

3.2.1 Webpack 构建

需要新建 .sentryclirc 配置文件，配置相关信息

[auth]
// 可以在 Sentry 系统 Setting 里的 AUTH TOKEN 找到值
token=xxx

[defaults]
project=xx // 你的项目名
url=sentry server url // 你的 Sentry 系统的 url
org=xx  // 你项目所在的组织

Webpack 配置

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

module.exports = {
  plugins: [
    new SentryWebpackPlugin({
      include: '.', // 待上传文件的目录，可以是字符串和数组
      ignoreFile: '.sentrycliignore',
      ignore: ['node_modules', 'webpack.config.js'],
      configFile: 'sentry.properties',
      release: `${version}`, // 需要和 sdk 初始化时的 release 值保持一致
      urlPrefix: '~/' // 默认为 ~/，注意跟你项目的文件前缀一不一致，如果不一致会导致 Source map 无法被解析
    })
  ]
};

这样配置，构建完就可以自动上传文件了。

❝
注意：记得不要将 .map 文件暴露在生产环境，可以在构建结束后删除 .map 文件。我比较粗暴解决，直接删除，再将资源 push 到远端。
❞

const rimraf = require('rimraf');
rimraf('./dist/**/*.js.map', function (err) {
    console.log(err);
});

错误上报 SDK 接入，假设我们用的 Vue 技术栈：

import('@sentry/browser').then((Sentry) => {
  import('@sentry/integrations').then((Integrations) => {
      if (typeof Sentry === 'object' && typeof Integrations === 'object') {
          Sentry.init({
              dsn: 'xxx', // 可以在你 Sentry 系统创建的项目下的 setting => Client Keys 中找到
              integrations: [new Integrations.Vue({ Vue, attachProps: true })], // Integrations.Vue 会帮我们劫持 Vue.config.errorHandler，从而上报错误
              release: `${version}` // 这里记得跟上面 Webpack 配置的 release 的值保持一致，才会使捕捉到的错误上报到该 release 下，从而寻找到相应的 Source map 文件
          });
      }
  });
});

3.2.2 Sentry CLI

如果项目不支持 Webapck 构建的，那还可以通过 CLI 上传 Source map 文件、比如：

sentry-cli releases files v1.1.1 upload-sourcemaps /path/to/sourcemaps / --url-prefix '~/static/js'
 
// 或者
sentry-cli releases${' -o ' + org} ${' -p ' + project} files ${release} upload-sourcemaps ./ --url-prefix "~/static/j"

可以在文档找到 -o,-p 等具体含义。着重强调 -url-prefix 的重要性，与 SentryWebpackPlugin 中的 urlPrefix 一样，如果跟你项目的文件前缀不一致，会导致 Source map 无法被解析，从而无法还原源代码。

❝
以上，介绍了 Sentry 系统的部署，错误上报 SDK 接入，以及 Source map 自动化上传和解析。Sentry 功能完备，且方便，大家快用起来吧。
❞

更多参考：

Sentry 前端错误监控服务搭建: https://www.chenng.cn/post/sentry-in-practice.html
Sentry前端部署拓展篇(sourcemap关联、issue关联、release控制): https://segmentfault.com/a/1190000014683598

Reference

[1]

接入文档: https://docs.sentry.io/error-reporting/quickstart/?platform=browser。

[2]

用 Docker 搭建你的第一个 Node 项目到服务器: https://mp.weixin.qq.com/s/wAse8okFnT8fA8G93nPnRg。

[3]

Docker 官网: https://docs.docker.com/install/。

[4]

onpremise 仓库地址: https://github.com/getsentry/onpremise.git。

[5]

Releases: https://docs.sentry.io/workflow/releases.

[6]

Source map: https://docs.sentry.io/platforms/javascript/sourcemaps/。

[7]

sentry-webpack-plugin: https://github.com/getsentry/sentry-webpack-plugin.

[8]

Sentry CLI: https://docs.sentry.io/cli/.

weixin_39897392

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
in function main错误_错误质量监控系统 Sentry 部署和接入

1. 使用官方服务1.1 官网https://sentry.io/，在官网创建你自己的账号，组织，以及项目吧。1.2 接入步骤错误上报 SDK 接入文档[1]以下示例代码是最基础的三个步骤，主要看你项目是什么技术栈，文档都有相应的接入方式。//#1引入上报SDK"https://browser.sentry-cdn.com/5.10.2/bundle.min.js"int...
复制链接

扫一扫