Front-End Statistics: Sentry & Matomo

Today, the main two of the front-end statistical tools use, Sentry & Matomo. The following are mainly statistical code access, so the premise is that you have set up the sentry and Matomo servers on your own server

Sentry How to use statistics

Sentry is a more complete error statistics log system, can be a pure front-end call, in the error log will be logged errors, user client information and user error steps (this part of the function is missing in some cases), such as

As can be seen, sentry error information can be said to be very detailed statistics, which for the debug work is simply artifact, may be better and faster replication problems, and then quickly solve the problem. The use of Sentry is divided into two main steps

1, add the site, get statistics code

New Project on---server


---Get a tracking code DSN

This DSN is an encrypted statistical address, directly associated with the specific project, each address is unique. We can use the browser-based SDK for access, such as Raven-js

2. Add Statistics Code

The following takes Raven-js as an example

import Raven from 'raven-js'Raven.config('https://[email protected]/16', {    whitelistUrls: [/test\.com/, /atest\.com/],    ignoreErrors: [        /^Script error\.?$/,        /undefined is not an object$/,        /undefined is not a function$/,        'null is not an object evaluating \'document',        'TypeError: [object HTMLCollection] is not iterable!'    ]}).install()

The core is Raven.config (URL). Install (), and in the Config object, in addition to Url,raven also provides a series of parameters to enhance the implementation of statistical functions, such as we use the whitelist and error filter list and so on. Interested students can go over the Sentry website content, https://docs.sentry.io/clients/javascript/

Matomo/piwik Statistics Add method

Matomo is similar to Baidu statistics, friends of the league statistics of a user visit the statistical site. Mainly used for statistical user access logs, analysis of user behavior and other aspects, partial operation of auxiliary statistics, so that operators based on real-time user access to data to specify a more appropriate marketing strategy. The advantage is that the entire statistical site can be built on our own server, to avoid the user access to data stored on third-party servers and some security issues. The following is a brief description of the steps to add the Matomo statistics code, if you have already set up the basic services on your own server, mainly in two steps:

1. Create a website on Matomo

New Web site:

Edit Content

This project URL is you want to count the destination URL, statistics code after the beginning of all will be recorded to Matomo, added will produce the following site records, note that the ID behind the statistics code is used

2. Add Statistics Code

Vue's Way

import Vue from 'vue'import VueMatomo from 'vue-matomo'// matomo用户统计--类似于友盟Vue.use(VueMatomo, {    // 这里配置你自己的piwik服务器地址和网站ID    host: 'https://bayes.test.com/piwik',    siteId: 412,    // 根据router自动注册    router: router,    // 是否需要在发送追踪信息之前请求许可    // 默认false    requireConsent: false,    // 是否追踪初始页面    // 默认true    trackInitialView: true,    // 最终的追踪js文件名    // 默认 'piwik'    trackerFileName: 'piwik'})

The way of pure JS

<!-- Matomo --><script type="text/javascript">  var _paq = _paq || [];  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */  _paq.push(['trackPageView']);  _paq.push(['enableLinkTracking']);  (function() {    var u="//bayes.test.com/piwik/";    _paq.push(['setTrackerUrl', u+'piwik.php']);    _paq.push(['setSiteId', '412']); // 注意这里的setSiteId，后面的数字就是你的网站id，在matomo网站上可以查到    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);  })();</script><!-- End Matomo Code -->

In addition, Matomo also provides a lot of other ways, the students need to be able to turn over the official website integration part of the content: https://matomo.org/integrate/

The old saying goes: tools good things, its prerequisite, a good tool for improving the development efficiency is absolutely very useful, we also have what tools, welcome to communicate.

Today is an exchange group of friends Robin asked what good tools to recommend, just write these things, I will write a write about sentry and Matomo basic services to build the content, if you are interested can continue to pay attention to the following, impatient students first to turn over the official Internet Bar ~ ~

Front-End Statistics: Sentry & Matomo