写点什么

如何使用 Rancher 1.6 搭建日志错误上报框架及网络统计框架

  • 2020-05-16
  • 本文字数:5489 字

    阅读完需:约 18 分钟

如何使用Rancher 1.6搭建日志错误上报框架及网络统计框架

本文将配合 Rancher 1.6 讲解如何搭建并配置日志错误上报框架 Sentry 及网站统计分析框架 matomo 的搭建及接入 vue(本文以 iview-admin 为例)项目。

背景简述

sentry 项目运行过程中,难免出现 bug,前端不像后端可以很方便的采集项目日志(比如,log4j + elk),导致每次出问题后还原车祸现场费时费力。另外,随着 vue 等框架的兴起,构建项目时打成 min.js,无疑又加大了前端定位问题的难度。而 sentry 是一款专注于错误采集的框架,支持常见的主流语言(如下图所示):



可以采集,聚合,并推送错误信息。注意,sentry 并不是日志平台(e.g. log4j + elk),也不是监控平台,sentry 专注于项目中的 Error 信息的采集,聚合,报警。


matomo 的前身是 Pwiki,这是一款开源的 web 网站分析利器。类似于 Google Analytics。其具体的特性,参见 Premium Web Analytics ,比如绘制页面热力图,录制会话,访问漏斗,A/B Test 等(这几样都是收费插件功能)。


注意:本文假设你已经有 rancher1.6 的环境

安 装

matomo

rancher 创建 matomo


在 rancher 主机上


## 创建必要文件夹mkdir -p /data/matomo/{config,logs,php,maxmind}/
## 安装maxmind ip数据库wget -P /tmp/ https://github.com/maxmind/geoipupdate/releases/download/v4.0.3/geoipupdate_4.0.3_linux_amd64.debdpkg -i /tmp/geoipupdate_4.0.3_linux_amd64.debmv /etc/GeoIP.conf{,.bak}cat << EOF | sudo tee -a /etc/GeoIP.confAccountID 0LicenseKey 000000000000EditionIDs GeoLite2-Country GeoLite2-City GeoLite2-ASNDatabaseDirectory /data/matomo/maxmindEOF
## 下载最新maxmind数据库geoipupdatels -lah /data/matomo/maxmind/总用量 67Mdrwxr-xr-x 2 root root 4.0K 7月 7 17:25 .drwxr-xr-x 6 root root 4.0K 7月 7 17:23 ..-rw------- 1 root root 0 7月 7 17:25 .geoipupdate.lock-rw-r--r-- 1 root root 6.3M 7月 7 17:25 GeoLite2-ASN.mmdb-rw-r--r-- 1 root root 57M 7月 7 17:25 GeoLite2-City.mmdb-rw-r--r-- 1 root root 3.7M 7月 7 17:25 GeoLite2-Country.mmdb
## 定时更新ip数据库cat << EOF | sudo tee -a /etc/cron.d/geoipupdate50 2 * * 4 root /usr/bin/geoipupdateEOF
## 设置php.inicat << EOF | sudo tee -a /data/matomo/php/php.iniupload_max_filesize = 128Mpost_max_size = 128Mmax_execution_time = 200memory_limit = 256MEOF
复制代码


docker-compose.yaml


version: '2'services:  matomo:    image: matomo:latest    stdin_open: true    volumes:    - /data/matomo/config:/var/www/html/config    - /data/matomo/logs:/var/www/html/logs    - /data/matomo/php/php.ini:/usr/local/etc/php/php.ini    - /data/matomo/maxmind/GeoLite2-City.mmdb:/var/www/html/misc/GeoLite2-City.mmdb    - /data/matomo/maxmind/GeoLite2-Country.mmdb:/var/www/html/misc/GeoLite2-Country.mmdb    - /data/matomo/maxmind/GeoLite2-ASN.mmdb:/var/www/html/misc/GeoLite2-ASN.mmdb    tty: true    ports:    - 80:80/tcp    - 443:443/tcp
复制代码


rancher-compose.yaml


version: '2'services:  matomo:    scale: 1    start_on_create: true    health_check:      response_timeout: 2000      healthy_threshold: 2      port: 80      unhealthy_threshold: 3      initializing_timeout: 60000      interval: 2000      strategy: recreate      reinitializing_timeout: 60000
复制代码



配置 matomo


选择中文



系统检查



配置数据库



自动建表完成



创建管理员用户


设置分析网站(可以随便创建,后边再进行修改),注意跟进实际情况修改时区



复制跟踪代码



配置 matomo



登录


Sentry

rancher 创建 Sentry


docker-compose.yml


version: '2'services:  cron:    image: sentry:9    environment:      SENTRY_MEMCACHED_HOST: memcached      SENTRY_REDIS_HOST: redis      SENTRY_POSTGRES_HOST: postgres      SENTRY_EMAIL_HOST: smtp      SENTRY_SECRET_KEY: SENTRY_SECRET_KEY_XXX    stdin_open: true    volumes:    - /data/sentry-data:/var/lib/sentry/files    - /data/sentry-data/config.yml:/etc/sentry/config.yml    tty: true    command:    - run    - cron  memcached:    image: memcached:1.5-alpine  web:    image: sentry:9    environment:      SENTRY_MEMCACHED_HOST: memcached      SENTRY_REDIS_HOST: redis      SENTRY_POSTGRES_HOST: postgres      SENTRY_EMAIL_HOST: smtp      SENTRY_SECRET_KEY: SENTRY_SECRET_KEY_XXX    stdin_open: true    volumes:    - /data/sentry-data:/var/lib/sentry/files    - /data/sentry-data/config.yml:/etc/sentry/config.yml    tty: true    ports:    - 9000:9000/tcp  worker:    image: sentry:9    environment:      SENTRY_MEMCACHED_HOST: memcached      SENTRY_REDIS_HOST: redis      SENTRY_POSTGRES_HOST: postgres      SENTRY_EMAIL_HOST: smtp      SENTRY_SECRET_KEY: SENTRY_SECRET_KEY_XXX    stdin_open: true    volumes:    - /data/sentry-data:/var/lib/sentry/files    - /data/sentry-data/config.yml:/etc/sentry/config.yml    tty: true    command:    - run    - worker  redis:    image: redis:3.2-alpine  postgres:    restart: unless-stopped    image: postgres:9.5    volumes:    - /data/postgresql/data:/var/lib/postgresql/data    ports:    - 5432:5432/tcp
复制代码


注意把 SENTRY_SECRET_KEY 换成 sentry 的实际 secret key


rancher-compose.yml


version: '2'services:  cron:    scale: 1    start_on_create: true  memcached:    scale: 1    start_on_create: true  web:    scale: 1    start_on_create: true    health_check:      response_timeout: 2000      healthy_threshold: 2      port: 9000      unhealthy_threshold: 3      initializing_timeout: 60000      interval: 2000      strategy: recreate      reinitializing_timeout: 60000  worker:    scale: 1    start_on_create: true  redis:    scale: 1    start_on_create: true  postgres:    scale: 1    start_on_create: true    health_check:      response_timeout: 2000      healthy_threshold: 2      port: 5432      unhealthy_threshold: 3      initializing_timeout: 60000      interval: 2000      strategy: recreate      reinitializing_timeout: 60000
复制代码


先将 docker-compose.yml 保存到服务器上,用来初始化 db 和创建账号


docker-compose run --rm web upgradeWould you like to create a user account now? [Y/n]: yEmail: anjia0532@gmail.comPassword: Repeat for confirmation: Should this user be a superuser? [y/N]: y## 直到输出Migrated: - sentry - sentry.nodestore - sentry.search - social_auth - sentry.tagstore - sentry_plugins.hipchat_ac - sentry_plugins.jira_acCreating missing DSNsCorrecting Group.num_comments counter## 并退出
复制代码


配置 Sentry








配置 vue

如开头所提及的,本文以 iview-admin 为例进行讲解


git clone https://gitee.com/anjia/iview-admin.gitcd iview-admin
复制代码

sentry

注意,网上很多文档,以讹传讹的使用过时的工具,raven-js .从 5.x 后官方建议使用 @sentry/browser 和 @sentry/integrations


npm install --save @sentry/integrationsnpm install --save @sentry/browser
复制代码


修改 iview-admin\src\main.js


// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import store from './store'import iView from 'iview'import i18n from '@/locale'import config from '@/config'import importDirective from '@/directive'import { directive as clickOutside } from 'v-click-outside-x'import installPlugin from '@/plugin'import './index.less'import '@/assets/icons/iconfont.css'import TreeTable from 'tree-table-vue'import VOrgTree from 'v-org-tree'import 'v-org-tree/dist/v-org-tree.css'import * as Sentry from '@sentry/browser';import * as Integrations from '@sentry/integrations';// 实际打包时应该不引入mock/* eslint-disable */if (process.env.NODE_ENV !== 'production') require('@/mock')
Vue.use(iView, { i18n: (key, value) => i18n.t(key, value)})Vue.use(TreeTable)Vue.use(VOrgTree)/** * @description 注册admin内置插件 */installPlugin(Vue)/** * @description 生产环境关掉提示 */Vue.config.productionTip = false/** * @description 全局注册应用配置 */Vue.prototype.$config = config/** * 注册指令 */importDirective(Vue)Vue.directive('clickOutside', clickOutside)
/* eslint-disable no-new */new Vue({ el: '#app', router, i18n, store, render: h => h(App)})
Sentry.init({ dsn: 'https://xxx@xxx.xxx.com/xxx', integrations: [ new Integrations.Vue({ Vue, attachProps: true, }), ],});
复制代码


npm installnpm run dev
复制代码


打开 http://localhost:8080/error_store/error_store_page


分别点击两个按钮,模拟出错



打开 sentry 发现已经有错误上报了,并且对错误进行聚合。




点开查看详细内容。


如果需要生成 source-map ,请参考官方文档:


https://docs.sentry.io/platforms/javascript/sourcemaps/

matomo




npm install --save vue-matomo
复制代码


修改 iview-admin\src\main.js


// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import store from './store'import iView from 'iview'import i18n from '@/locale'import config from '@/config'import importDirective from '@/directive'import { directive as clickOutside } from 'v-click-outside-x'import installPlugin from '@/plugin'import './index.less'import '@/assets/icons/iconfont.css'import TreeTable from 'tree-table-vue'import VOrgTree from 'v-org-tree'import 'v-org-tree/dist/v-org-tree.css'import * as Sentry from '@sentry/browser'import * as Integrations from '@sentry/integrations'import VueMatomo from 'vue-matomo'
// 实际打包时应该不引入mock/* eslint-disable */if (process.env.NODE_ENV !== 'production') require('@/mock')
Vue.use(iView, { i18n: (key, value) => i18n.t(key, value)})Vue.use(TreeTable)Vue.use(VOrgTree)/** * @description 注册admin内置插件 */installPlugin(Vue)/** * @description 生产环境关掉提示 */Vue.config.productionTip = false/** * @description 全局注册应用配置 */Vue.prototype.$config = config/** * 注册指令 */importDirective(Vue)Vue.directive('clickOutside', clickOutside)
/* eslint-disable no-new */new Vue({ el: '#app', router, i18n, store, render: h => h(App)})
Sentry.init({ dsn: 'https://xxx@xxx.xxx.com/xxx', integrations: [ new Integrations.Vue({ Vue, attachProps: true, }), ],});Vue.use(VueMatomo, { // Configure your matomo server and site by providing host: '//xxxx.xxxx.com/', siteId: xx,
// Changes the default .js and .php endpoint's filename // Default: 'piwik' trackerFileName: 'matomo.js',
// Overrides the autogenerated tracker endpoint entirely // Default: undefined trackerUrl: '//xxxx.xxxx.com/matomo.php',
// Enables automatically registering pageviews on the router router: router,
// Enables link tracking on regular links. Note that this won't // work for routing links (ie. internal Vue router links) // Default: true enableLinkTracking: true,
// Require consent before sending tracking information to matomo // Default: false requireConsent: false,
// Whether to track the initial page view // Default: true trackInitialView: true,
// Whether or not to log debug information // Default: false debug: false});

// orwindow._paq.push
// or throughwindow.Piwik.getTracker
复制代码


打开 http://localhost:8080,随便访问几个菜单,然后打开 matomo




此时,路由已经有数据了



并且将用户的常规数据聚合起来。

更多

本文只对 sentry 和 matomo 进行了简单介绍。而这两者还有更深入的使用,比如 sentry 可用于推送邮件、文中一带而过的 sourcemap、单点登录(集成内部的权限认证)、自定义上报内容(将错误与用户 id 关联起来)以及敏感数据脱敏等;matomo 可用于每日发送分析报表、增加 kafka 插件、进行更深层次的挖掘、自定义上报内容(购物车等)、大数据量情况下的优化、优化用户设备指纹以及使用了 nginx 等反代软件后如何正确识别真实 ip、热力图、A/B test 以及漏斗图等。


作者介绍


赵安家,山东顺能网络全栈研发工程师。前端后端通吃,DevOps、安全、培训都有涉猎,负责了公司从单体服务迁移至微服务的项目。


2020-05-16 17:151079

评论

发布
暂无评论
发现更多内容

Docker学习路线9:运行容器

小万哥

c++ Docker 运维 后端 开发

PPT | 未来工厂与数字孪生

工赋开发者社区

案例 | 基于机理模型驱动的工业APP集成开发平台及应用实践

工赋开发者社区

AI开发软件环境

timerring

AI

【MySQL技术专题】「问题实战系列」深入探索和分析MySQL数据库的数据备份和恢复实战开发指南(系统底层优化篇)

码界西柚

MySQL 性能调优 技术分析 底层分析

酒有十千,棋有独步——本土大模型百花齐放,文心一言站稳领先者身位RlueEva-System大模型测评来了!你pick哪一家

TE智库

算网深度融合成趋势,天翼云让政企上云更安全、更便捷!

天翼云开发者社区

云计算 云平台

Code片段

Bert

使用 Python 处理 CSV 文件,附示例

前端毛小悠

Python

Code片段D

Bert

C++ 结合 opencv读取图片与视频

芯动大师

ZBC Staking 即将开启,全新利好来袭

股市老人

减少跨国传输大文件所需时间的技巧与工具

镭速

跨国传输大文件

阿里云瑶池 PolarDB 开源官网焕新升级

阿里云数据库开源

polarDB PolarDB-X PolarDB-PG 阿里云PolarDB

MegEngine Python 层模块串讲(上)

MegEngineBot

Python 深度学习 开源 Data

文心一言 VS 讯飞星火 VS chatgpt (64)-- 算法导论6.5 3题

福大大架构师每日一题

福大大架构师每日一题

时光“摆渡者”,让回忆“闪现”眼前

白洞计划

AI 存储

基于 Graviton2处理器构建容器化基因分析工作负载

亚马逊云科技 (Amazon Web Services)

云计算

演讲实录:指标平台+AI 的技术落地和未来展望

Kyligence

Kyligence Copilot

LLaVA:将视觉微调引入大模型

Zilliz

计算机视觉 LLM 大语言模型 模型微调

九科信息中标招商局集团流程挖掘项目

九科Ninetech

玩一玩编程式 AOP

江南一点雨

Java spring

[分词]基于Lucene8版本的混合分词器(分词合并)

alexgaoyh

中文分词 lucene Spring Boot 2 混合模型

飞桨AI for Science线下交流会:汇聚科学计算人才,携手共建繁荣社区

飞桨PaddlePaddle

人工智能 百度 paddle 飞桨 百度飞桨

喜报!天翼云电脑获“光华杯”大赛一等奖、最佳创意创新奖!

天翼云开发者社区

云计算 云电脑

虚幻引擎教程——生成云平台指定路径下的EXE文件

3DCAT实时渲染

虚幻引擎 ue UE虚幻引擎

如何使用Rancher 1.6搭建日志错误上报框架及网络统计框架_文化 & 方法_Rancher_InfoQ精选文章