Web前端最全初识Sentry前端监控，浅谈前端消息机制原理

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Compose 1.23.0+

至少需要2400MB RAM

1. 拉取镜像

docker pull sentry

docker pull redis

docker pull postgres

2. 启动服务

docker run -d --name sentry-redis --restart=always redis

docker run -d --name sentry-postgres -e POSTGRES_PASSWORD=secret -e POSTGRES_USER=sentry --restart=always postgres

3. 生成sentry秘钥

docker run --rm sentry config generate-secret-key

4. 数据库及账户初始化及

docker run -it --rm -e SENTRY_SECRET_KEY=‘(om)y06(q=hf–s3(8922m01n@t@ldcmgucr-!8!nnkmq(72’ --link sentry-postgres:postgres --link sentry-redis:redis sentry upgrade

5. 启动sentry的web服务

docker run -d -p 9000:9000 --name my-sentry -e SENTRY_SECRET_KEY=‘(om)y06(q=hf–s3(8922m01n@t@ldcmgucr-!8!nnkmq(72’ --link sentry-redis:redis --link sentry-postgres:postgres --restart=always sentry

6.启动sentry-cron/work服务

docker run -d --name sentry-cron -e SENTRY_SECRET_KEY=‘(om)y06(q=hf–s3(8922m01n@t@ldcmgucr-!8!nnkmq(72’ --link sentry-postgres:postgres --link sentry-redis:redis sentry run cron

docker run -d --name sentry-worker-1 -e SENTRY_SECRET_KEY=‘(om)y06(q=hf–s3(8922m01n@t@ldcmgucr-!8!nnkmq(72’ --link sentry-postgres:postgres --link sentry-redis:redis sentry run worker

7. 登陆sentry后台

http://ip:9000/

安装SDK上报数据

1. 创建项目

登陆后我们会进入我们的监控项目的界面，如：

点击右上角的 add new project ，我们可以创建一个新的项目。

选择Vue，再做简单设置，project创建成功后会跳转到SDK安装方法。

2. SDK引用与配置

npm i @sentry/browser @sentry/integrations

import Vue from ‘vue’

import * as Sentry from ‘@sentry/browser’;

import * as Integrations from ‘@sentry/integrations’;

Sentry.init({

dsn: ‘http://[email protected]:9000/3’,

integrations: [

new Integrations.Vue({

Vue,

attachProps: true

}

)]

})

分享

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】