前端监控方案
常见监控方案 Sentry：一个开源的、实时的错误监控平台。功能全面、一站式解决方案、多端支持。强烈推荐！！！ Web-See：前端监控 SDK，可用来收集代码报错、性能数据、页面录屏、用户行为、白屏检测等个性化指标数据并上报。支持多种错误还原方式：定位源码、播放录屏、记录用户行为 WebTracing：一个基于 JavaScript 的埋点 SDK。为你的前端项目提供【 行为、性能、异常、请求、资源、路由、曝光、录屏 】监控手段 演示地址项目实践思路 优先看 Web-See 文档 使用 Vite + React 创建项目，复刻 Web-See-Vue-Demo 不上报错误，把报错信息存储到 IndexDB 中，通过 idb-keyval 操作 IndexDB 线上出现问题时，下载 IndexDB 中的数据，在后台管理平台中导入并查看问题 项目介绍 从 项目地址 拉取示例代码，通过 pnpm install 安装依赖 核心文件是 src/monitor，里面封装了写入数据到 IndexDB 的方法，以及下载数据到本地的方法 由于 IndexDB...
Vite 模板语法
场景 当一套代码，需要发布到两个环境（ A环境 和 B环境 ）中时，A环境 下需要系统管理页面，B环境 下不需要系统管理页面。这时，我们可以通过后端返回的菜单控制。 但是如果 A环境 和 B环境 的登录页面也不一样呢？这时，我们就可能需要模板语法来控制。 需要自定义一个 vite 插件，在打包前，读取环境变量，然后使用 blueimp-tmpl 的模板语法对代码进行判断并替换。 项目地址实践安装依赖 blueimp-tmpl 模板语法 1npm install blueimp-tmpl cross-env 跨环境执行命令 1npm install cross-env -D 获取环境变量 在 package.json 文件中添加 scripts 脚本 12345678"scripts": { "dev": "npm run dev:A", "dev:A": "cross-env platform=A vite", "dev:B":...
Qiankun 常见问题
Qiankun-Vite 插件 Qiankun 默认不能接入 Vite ，需要使用 vite-plugin-qiankun 插件，但是这个插件目前不支持 Qiankun的样式隔离 和 React的热更新 推荐使用 vite-plugin-qiankun-lite 插件，解决了上面的问题，并且简化了配置 Node 版本问题 Node 16 使用 vite-plugin-qiankun 插件启动时会报错 ReferenceError: ReadableStream is not defined，需要更改 cheerio 的版本（注意不要带 ^ 符号），详见：cheerio upgrade problem 123"devDependencies": { "cheerio": "1.0.0-rc.12"} Node 16 使用 Vite 时，也需要更改版本（其他版本也可自行尝试） 123"devDependencies": { "vite":...
React 原理浅析
前言 强烈推荐这篇文档 Build your own React ！！！有动画和解释，能更好地理解 React 的原理 Github 仓库地址 也可以参考：React 核心原理浅析 参考文章：【鸣谢】 Build your own React React 核心原理浅析
Docker Compose 部署单机版 Nacos
Docker Compose 安装 前提准备版本说明 mysql:8.0.31 nacos/nacos-server:v2.2.2 spring-boot 2.6.13 spring-cloud 2021.0.5 spring-cloud-alibaba 2021.0.5.0 目录结构 获取 nacos 配置文件 拉取镜像 1docker pull nacos/nacos-server:v2.2.2 启动服务（这个服务能运行就行，主要是为了拷贝文件） 1docker run -d --name nacos -e mode=standalone -d -p 8848:8848 nacos/nacos-server:v2.2.2 从容器中复制所需文件到宿主机中 1234567# docker cp 容器名:文件 宿主机文件# 拷贝 logs 文件docker cp nacos:/home/nacos/logs/ /opt/docker/nacos/# 拷贝 conf 文件夹docker cp nacos:/home/nacos/conf/...
