030- Front-end error log reporting and Website Statistics (Sentry + Matomo)

This is the 30th article in the technical Writing Project (including translation). Set a small goal of 999, at least 2 articles per week.

This article explains how to build and configure the log error reporting framework Sentry and the website statistical analysis framework Matomo and access vue(iView-admin is taken as an example in this article) with Rancher1.6 (a test cluster at hand has not been upgraded to the latest 2.x).

The background is briefly

• During the running of Sentry project, it is inevitable that there will be bugs. Unlike the back-end, the front-end can easily collect project logs (such as LOG4j + ELK), resulting in time-consuming and laborious restoration of the accident site after every failure. In addition, with the rise of Vue and other projects, the construction of the project into min.js, undoubtedly increased the difficulty of front-end positioning. Sentry is a framework that focuses on error collection and supports common mainstream languages
  

  

  Collect, aggregate, and push error messages. Note that sentry is not a logging platform (e.g. log4j + elk), nor is it a monitoring platform. Sentry focuses on the collection, aggregation, and alerting of Error information in projects.

• Matomo, formerly Pwiki, is an open source web site analysis tool. Similar to Google Analytics. See Premium Web Analytics for features such as page mapping, recording sessions, access funnels, A/B tests, etc. (all paid add-on features).

Note: this article assumes you already have a rancher1.6 environment

matomo

Rancher create matomo

On the Rancher mainframe

Create the necessary folders
mkdir -p /data/matomo/{config,logs,php,maxmind}/

Install the maxMind IP databaseWget - P/TMP/https://github.com/maxmind/geoipupdate/releases/download/v4.0.3/geoipupdate_4.0.3_linux_amd64.deb DPKG -i / TMP/geoipupdate_4. 0.3 _linux_amd64. Deb mv/etc/GeoIP. Conf {, bak} cat < < EOF | sudo tee-a /etc/GeoIP.conf
AccountID 0
LicenseKey 000000000000
EditionIDs GeoLite2-Country GeoLite2-City GeoLite2-ASN
DatabaseDirectory /data/matomo/maxmind
EOF

## Download the latest MaxMind databaseDrwxr-xr-x 2 root root 4.0k 7月 7 17:25. drwxr-xr-x 6 root root 4.0k July 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. MMDBUpdate the IP database periodically
cat << EOF | sudo tee -a /etc/cron.d/geoipupdate
50 2 * * 4 root /usr/bin/geoipupdate
EOF

# # set PHP ini
cat << EOF | sudo tee -a /data/matomo/php/php.ini
upload_max_filesize = 128M
post_max_size = 128M
max_execution_time = 200
memory_limit = 256M
EOF
Copy the code

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
Copy the code

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
Copy the code

Configuration matomo

Select Chinese

Rancher create 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
Copy the code

Note that replace SENTRY_SECRET_KEY with the actual secret key of Sentry

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
Copy the code

Docker-comemage. yml is saved to the server to initialize the DB and create the account

docker-compose run --rm web upgrade
Would you like to create a user account now? [Y/n]: y
Email: [email protected]
Password: 
Repeat for confirmation: 
Should this user be a superuser? [y/N]: y
## until output
Migrated:
 - sentry
 - sentry.nodestore
 - sentry.search
 - social_auth
 - sentry.tagstore
 - sentry_plugins.hipchat_ac
 - sentry_plugins.jira_ac
Creating missing DSNs
Correcting Group.num_comments counter
# # and exit
Copy the code

Configuration Sentry

Configure the vue

This section uses iview-admin as an example

git clone https://gitee.com/anjia/iview-admin.git
cd iview-admin
Copy the code

npm install --save @sentry/integrations
npm install --save @sentry/browser
Copy the code

// 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';
// There should be no mocks in the actual packaging
/* 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 register admin built-in plugin */
installPlugin(Vue)
/** * @description Production environment shutdown prompt */
Vue.config.productionTip = false
/** * @description Global registration application configuration */
Vue.prototype.$config = config
/** * register instruction */
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://[email protected]/xxx'.integrations: [
    new Integrations.Vue({
      Vue,
      attachProps: true,})]});Copy the code

npm install
npm run dev
Copy the code

Open http://localhost:8080/error_store/error_store_page click on the two buttons respectively, simulation error

If you need to generate the source – the map, you can refer to the official documentation docs. The sentry. IO/platforms/j…

matomo

npm install --save vue-matomo
Copy the code

Modify the 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'

// There should be no mocks in the actual packaging
/* 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 register admin built-in plugin */
installPlugin(Vue)
/** * @description Production environment shutdown prompt */
Vue.config.productionTip = false
/** * @description Global registration application configuration */
Vue.prototype.$config = config
/** * register instruction */
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://[email protected]/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
});
 
 
// or
window._paq.push
 
// or through
window.Piwik.getTracker
Copy the code

Go to http://localhost:8080, visit a few random menus, and open Matomo