Front-end error log monitoring-Sentry installation

Front-end error log monitoring-installation of sentry

Digression

As the end closest to the user, the front end has a very important responsibility. The response needs to be fast, the operation needs to be smooth, etc. However, the single-threaded design of JS and the design that dom cannot render at the same time will make your JS stuck there in minutes after an error is reported. simply put:体验贼差

What to do if there is an error? For debugging, you can read many debugging articles published before:

The main push is spy-debugger. What I use most daily is alsospy-debugger

• Use weinre/spy-debugger to debug the mobile page

  • advantage:
    1. Easy to operate, automatic injection,
    2. You can debug JS and css, view requests, etc.
  • Disadvantages:
    1. Proxy required for debugging
    2. If it is https, you need to install a certificate.

• chrome debug mobile webpage

  • Advantages: native chrome console. Native! ! This console is invincible and can't fault it

  • Disadvantages:

    1. If there is a wall, it is very likely that it will not be connected (the new edge also supports debugging, which seems to be directly connected, not afraid of the wall).
    2. A data cable is needed, and the connection is unstable (the cable is loose).
    3. Also need to support mobile phone chrome, can not debug other browsers

• PC debugging mobile terminal H5 vue-devtools+weinre+fiddler

  • The advantages and disadvantages of nothing purely on vue-devtoolsa curious exploration. The right fiddlerone

---

The above tools are very practical, but they also have drawbacks: the mobile phone that must reproduce the bug is right by your side, you have to connect the data cable, or open agents for various operations. For market users, this is basically impossible, and so many scenarios cannot be reproduced at all.

Finally, I can only say one thing: no problem on my computer/mobile phone

So we need more monitoring, the front-end burying point that is often said, here is a direct introduction sentry

The advantages of senrry

• Open source (there is a paid version, of course you choose to build it yourself)
• Complete tools
• Multi-terminal integration
• Support SourceMap (necessary to reproduce bugs)
• Quick use (I really don’t have time to write a set of burying points, maybe it’s not like that)

Topic: senrry installation

Installation method

• Python installation

• Docker installation 接下来是介绍在centeos 用 docker 安装

Precautions

• The memory of the server is at least 2G, otherwise there will be problems when executing the sentry upgrade command
• Docker version should be in17.05.0+
• Compose version should be in1.23.0+

Install docker

There is a pit here, if you don’t want to step on it, you can read the following screenshot first

# 安装docker
yum install docker -y

# pip安装docker-compose
pip install docker-compose

• 1. pip failed to install docker-compose

Cannot uninstall ‘requests’. It is a distutils installed project and thus we cannot accurately determine which files belong to it which would lead to only a partial uninstall.

Problem analysis:

The old version has many dependencies and cannot be clearly deleted. At this time, the old version upgrade should be ignored, which is as follows

Solution:

sudo pip install docker-compose --ignore-installed requests

• 2. I didn't notice at first, the docker version of yum source is too low. . .

My docker version is only 1.13.3

Solution: upgrade the docker version

# 删除旧的docker
yum remove docker  docker-common docker-selinux docker-engine

# 安装需要的软件包
## yum-util 提供yum-config-manager功能，另外两个是devicemapper驱动依赖的
sudo yum install -y yum-utils device-mapper-persistent-data lvm2

# 设置Docker yum源
sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

# 查看所有仓库中所有docker版本
yum list docker-ce --showduplicates | sort -r

# 安装docker。默认装最新的
sudo yum install docker-ce

# 如果需要指定版本安装（版本号上面的命令有的看）
sudo yum install docker-ce-18.06.1.ce

View docker version

After the installation is complete. The preparation of docker is almost complete, start docker

systemctl start docker

Download the installation script

It is the Git address of docker written above. Find a place to get git down

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

You will see a onpremisefolder. The subsequent operations are in this folder, so

cd onpremise

# 执行安装
./install.sh

If encountered 没有那个文件或目录. Because of the line break problem, the sh script pulled down by git uses CRLFline breaks, resulting in a lot of extra symbols that affect the script

Solution:

1. Edit install.sh. Modify the line break:

vim install.sh

# 然后点击 esc 。输入
:set ff=unix
# 然后保存退出

2. The install.shpulled vscode in. Modify line breaks directly
   

Tap CRLF to change to LF. Just upload to the server again

The newline character is fixed, then continue to execute the script

Modify the image

There are pits, first look at the instructions:

Then you will find the Fetching and updating Docker imageswait did not respond centuries! It's too slow, so we need to change to Alibaba Cloud's image and execute the install command

Go to Alibaba Cloud to get the latest mirror address (to get the mirror address, you need to register with Alibaba Cloud, just register it at will)

https://promotion.aliyun.com/ntms/act/kubernetes.html

Search docker

Check the mirror accelerator. The document on the side is also very clear:

sudo tee /etc/docker/daemon.json <<-‘EOF’
{
“registry-mirrors”: [“https://hkoa9dfz.mirror.aliyuncs.com”]
}
EOF

It's a command, just copy it in

Or use the commonly used vi.vim. The
{ "Registry-Mirrors": [ "https://hkoa9dfz.mirror.aliyuncs.com"] } paste the effect is the same

sudo mkdir -p /etc/docker
sudo tee /etc/docker/daemon.json <<-'EOF'
{
    
    
  "registry-mirrors": ["https://hkoa9dfz.mirror.aliyuncs.com"]
}
EOF
sudo systemctl daemon-reload
sudo systemctl restart docker

The mirror is also found. Formally run ./install.shthe installation, wait a few minutes. Seeing this is the installation is complete

Create initial account

Ask if you want to create an account, just enter your email address, and you will be asked to enter a password later, confirm again

I accidentally clicked n. What should I do?

Re-run the following command, you will be asked to enter an account

docker-compose run --rm web upgrade

Run sentry

docker-compose up -d

Then the browser visits http://{ip}:9000. Change the IP to the ip address of your own server. The default is port 9000

It's half done~

The account password is the account password just filled in. If it is not generated, please review the steps above

The installation here has come to an end. The article is too long. There are still many things to remember about the use of sentry, so I will elaborate on the next article!

One last word

docker is awesome! Sentry has so many reliances on one mirror. Although the mirror source card is changed, overall it is much easier to install than before relying on one by one.