一些关于前端、技术，和我的生活的文字

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

Webpack 4最后兼容的loader

## What is OpenSearch

OpenSearch是一个通用的搜索协议，主要是为了给浏览器提供“搜索引擎”探知，也就是说，支持了这个功能的网站，可以在较为新的浏览器地址栏添加搜索引擎或者直接进行搜索，如Gtihub和npm。

## Example

我们接下来以npmjs.com举例说明。

查看页面源代码，我们可以找到一行meta标签信息：

```html
<link data-react-helmet="true" href="https://static.npmjs.com/osd.xml" rel="search" title="npm package search" type="application/opensearchdescription+xml"/>
```

其中`type="application/opensearchdescription+xml"`声明了这是一条对OpenSearch支持的元信息，`rel="search"`，链接到了一个xml文档，我们打开可以看到：

```xml
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
<ShortName>npm</ShortName>
<Description>Search for packages on npm</Description>
<InputEncoding>UTF-8</InputEncoding>
<Image width="16" height="16" type="image/x-icon">https://static.npmjs.com/favicon-16x16.png</Image>
<Url type="text/html" method="get" template="https://www.npmjs.com/search?q={searchTerms}"/>
</OpenSearchDescription>
```

非常简单，首先最外层及OpenSearch协议标准，使用ShortName字段定义一个名称，可以带有描述、Icon，其中最主要的是Url字段。

这个字段提供了搜索需要的请求地址以及方法，在浏览器地址栏搜索时，会使用用户输入的字符替换`{searchTerms}`，并按照xml配置的方法进行请求，因此我们在自己实现时，主要需要将其修改为我们页面的搜索请求接口。

如何让网站支持OpenSearch

> 当前npm版本7.21.1，yarn使用classic版本，解决方案可能只适用于Linux环境下，请知晓。

### npm

#### npm install -g 各种权限问题

在初始化安装好node和npm后执行以下命令，设置对应目录的权限为当前用户：

```bash
sudo chown -R $USER ~/.npm
sudo chown -R $USER /usr/lib/node_modules
# For npm version smaller than v7, the path may be `/usr/local/lib`
# sudo chown -R $USER /usr/local/lib/node_modules
```

#### npm lifecycle warning

```
npm WARN lifecycle The node binary used for scripts is /var/folders/g_/dslq6ff90pn_wyjv5g6578qm0000gn/T/yarn—1577473189287-0.1962072526914138/node but npm is using /usr/local/Cellar/node/13.5.0/bin/node itself. Use the `—scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
```

警告中已经提示了，需要执行 `npm config set scripts-prepend-node-path true` 解决。

### Yarn (Classic)

> npm遇到的主要是global安装的问题，主要涉及了相关的目录，以下[Yarn官方推荐的方案](https://classic.yarnpkg.com/en/docs/cli/global)也可以类比配置到npm已解决global安装问题。

#### Yarn全局安装到指定位置

```bash
yarn global add nodemon --prefix /usr/local
```

这样的好处是不必修改环境变量path，对于一到两个全局命令比较实用。

#### Yarn设置全局安装位置

```bash
yarn global bin
```

会回显目前的全局安装的可执行文件的系统链接位置，如果不希望设置到`/usr`相关的目录，则可以通过：

```bash
yarn config set prefix ~/.yarn
```

> `yarn global dir`会显示全局包的实际安装路径，如果磁盘容量有限可以考虑修改。

设置到其他目录，如果这样配置需要在全局环境变量增加yarn的全局位置，以bash为例，在文件最后添加一行：

```bash
export PATH="$(yarn global bin):$PATH"
```

npm/Yarn(v1)问题解决方案一览

在日常与 ~~黑洞~~ NPM Package 打交道的过程中，我们可以使用Github Dependent Bot等工具，检测项目中的哪些依赖可能存在隐患，对应什么等级，如果是使用npm，可以通过`npm audit fix`尝试自动修复，但是Yarn只提供了`yarn audit`检测，并没有合适的fix方法。

## [yarn-audit-fix](https://www.npmjs.com/package/yarn-audit-fix)

通过这个第三方包，可以间接实现`yarn audit fix`，详细使用请看文档，最简单的情况可以直接：

```bash
npm_config_yes=true npx yarn-audit-fix
```

## Can't find patched version that satisfies glob-parent@^3.1.0 in >=5.1.2

如果遇到类似的，无法跳版本升级的情况，可以通过下面的方式，强制跳版本更新，强烈建议更新后进行全面的测试。

```bash

```

修复Yarn.lock中的vulnerability

## 1. input聚焦导致页面缩放

老生常谈的问题，这里只做一个备注：

```html
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
```

## 2. iOS 自动填充密码

如果你的form表单符合iOS的预期，那么会触发自动填充，如果你在表单处做了自定义事件那么可要当心了。

1. iOS自动填充无视表单submit事件

那么我们就需要为其补上原生的method和action，来完成其跳转

> 请注意，这里提交的为“application/x-www-form-urlencoded”，需要在请求处理时注意，一个比较简单的方法：`Object.fromEntries(new URLSearchParams(searchStr).entries());`

## 3. POST重定向后到达的页面仍然是POST请求

请查询 [MDN 重定向](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Redirections) 使用3xx状态码需要保持方法一致，只有303是个例外，会转为GET请求。

有关移动端表单输入与提交的二三事

```html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
```

在使用媒体查询时，请务必确认页面内的meta标签是否含有viewport，如果没有，则不能生效。

媒体查询生效的必要条件

## 前言

前端开发时经常会遇到用户需要同意协议才能进行提交的操作，此时，如果原本使用的就是表单的方式，那么在用户未同意时disable提交按钮是最为稳妥的方案。

> 当然，还是那句老话，前端所有的验证仅仅是为了“用户体验”， 如果涉及其他考量，请务必后端再判断一次！

然而，disable的元素，是不能够触发事件的，也就是说，没有办法在click与submit时友好地进行提示，这与我们的预期不符，因此，这里推荐几种hack方案。

<iframe height="265" style="width: 100%;" scrolling="no" title="disabled-button" src="https://codepen.io/arctome/embed/yLMKxqm?height=265&theme-id=light&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/arctome/pen/yLMKxqm'>disabled-button</a> by arctome
  (<a href='https://codepen.io/arctome'>@arctome</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## 1. CSS大法好

```css
input[disabled] {pointer-events:none}
```

仅此一行，解决问题，什么原理呢？

> `pointer-events:none`元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

也就是说，我们将其事件“转移”，disable触发不了，让他上级处理，能够达到一样的效果；

<iframe height="265" style="width: 100%;" scrolling="no" title="disabled-button-css" src="https://codepen.io/arctome/embed/JjWLaQN?height=265&theme-id=light&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/arctome/pen/JjWLaQN'>disabled-button-css</a> by arctome
  (<a href='https://codepen.io/arctome'>@arctome</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>


让disable的元素“动”起来

随着全球IPv4资源的枯竭，VPS商家衍生了一种新的IPv6 only VPS，由于不占用商家的IPv4资源，因此可以压低价格。然而，VPS上面如果希望运行一些服务，那么势必需要IPv4的接入，我们可以通过Cloudflare的CDN让只有IPv4的用户访问，但如果机器需要访问如Github等，只有IPv4的网站该怎么办呢？一些大佬想到了使用Cloudflare的[Warp服务](https://1.1.1.1/)来实现，本文介绍自己在配置的成功方案。

## STEP 1. 安装Wireguard

> 执行`uname -a`查看内核，内核版本5+可以使用wireguard-tools, 否则请使用 [wireguard-go](https://github.com/WireGuard/wireguard-go)

确认内核版本后，如果选择升级至5+，请执行：

```bash
sudo apt -t $(lsb_release -sc)-backports install linux-image-$(dpkg --print-architecture) linux-headers-$(dpkg --print-architecture) --install-recommends -y
```

内核在5+后，执行下列命令，安装Wireguard：

```bash
sudo apt install net-tools resolvconf -y
sudo apt install wireguard-tools --no-install-recommends
# If can't find `wiregurad-tools`, execute this and retry
echo "deb http://deb.debian.org/debian $(lsb_release -sc)-backports main" | sudo tee /etc/apt/sources.list.d/backports.list
```

## STEP 2. 安装第三方工具wgcf

> [wgcf](https://github.com/ViRb3/wgcf) is an unofficial, cross-platform CLI for Cloudflare Warp

### wgcf 自动安装

执行命令，下载wgcf工具：

```bash
curl -fsSL git.io/wgcf.sh | sudo bash
```

### wgcf 手工安装

> 如果服务器起始状态就没有IPv4，那么访问git.io也是不可能的，我这里提供一个v2.2.10版本的文件给大家临时使用

```
wget -O /usr/local/bin/wgcf "https://cdn.arc-light.fun/pg2Edc/wgcf_2.2.10_linux_amd64"
chmod -x /usr/local/bin/wgcf
```

### 开始使用

完成后，首先进行注册：

```bash
wgcf register
```

过程中需要同意Cloudflare Warp协议，选择“Yes”，

成功生成后，再执行：

```bash
wgcf generate
```

执行成功，会在当前目录生成一个`wgcf.conf`，我们将它复制到Wireguard目录下：

```bash
cp wgcf.conf /etc/wireguard/wgcf.conf
```

## STEP 3. 修改wgcf.conf

编辑`wgcf.conf`文件，使其与下面的例子相似：

    [Interface]
    PrivateKey = YOUR_GENERATED_KEY_HERE
    Address = *.*.*.*/32
    #Address = *:*:*:*:*:*:*:*/128
    DNS = 2001:4860:4860::8888
    MTU = 1280
    PostUp = ip -6 rule add from [ipv6 addr] lookup main
    PostDown = ip -6 rule delete from [ipv6 addr] lookup main
    [Peer]
    PublicKey = YOUR_GENERATED_KEY_HERE
    AllowedIPs = 0.0.0.0/0
    #AllowedIPs = ::/0
    Endpoint = [2606:4700:d0::a29f:c001]:2408

> 2001:4860:4860::8888 可以替换为 Google DNS 或 Cloudflare 的IPv6 DNS服务器。

## STEP 4. 利用Crontab让Wireguard与ssh服务按顺序启动

如果启用了Wireguard的自启动，ssh服务就不能正常开启，因此，使用crontab，增加重启时自动启动Wireguard和SSH

```bash
crontab -e
```

增加以下配置：

    @reboot mkdir -p -m0755 /run/sshd
    @reboot systemctl start wg-quick@wgcf # wgcf是配置文件的名称
    @reboot /etc/init.d/ssh start

## Finish

重启，之后我们可以测试一下能否ping通Github，如果能ping通，意味着Warp配置成功，服务器能够正常访问IPv4 only的地址。

使用Cloudflare Warp为IPv6 only的机器添加IPv4

> 跨域,一个说腻了的话题,今天遇到一个新的情况,单独拎出来说说;

## 情景再现

b.site有一个ajax请求a.site的某一个地址,post请求+自定义header(假设,header头为`X-Application-Token`),ok,妥妥的跨域,那么自然加上以下代码(以express.js为例):

```javascript
app.options('*', (req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Headers", "X-Application-Token")
    // call the path service
})
app.post('/a-cors-request-path', (req, res) => {
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Headers", "X-Application-Token")
    // call the path service
})
```

反复确认了相关配置已经设置好,但浏览器仍报错:

> Access to XMLHttpRequest at 'a.site' from origin 'b.site' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

## 排查

1. 返回说"not have HTTP ok status"

那么说明option请求没有返回200,打开postman发送请求尝试看看,成功返回...

1. 自己启动一个Express Server,尝试复现

已经能够确认,option不通过和状态码有关,那么为什么浏览器内非200,而postman发送option请求正常返回200 ?

打印headers,一口老血...

![cors-with-verify-header](https://cdn.arc-light.fun/BeGtIi/cors-with-verify-header.png)

## 结论

除了常见的跨域问题,也要考虑实现时的业务逻辑,比如本情境下,错误的在option中也调用相关服务验证了`X-Application-Token`,而option请求在浏览器内是不会携带额外的header信息的,这才导致了浏览器内 _not HTTP ok status_,而postman正常的原因.

## 额外

后来利用老的Microsoft Edge浏览器(Edge legacy)调试,发现会清楚的返回400 Bad Request,所以如果option请求能够返回精确的HTTP code,也会更利于开发人员排查问题,后续修改后完美解决.

跨域这个问题还得单独揪出来说一下

## Sentry是什么？

### 2021-05 更新

经过自己的反复部署，多VPS部署……仍认为9.2是最适合个人项目使用的版本，虽然已经不能和Github正常联动，但是整体资源和部署难度都比较低，而且也不会遇见大量的严重Bug。

## ==== 分割线 ====

> Sentry helps all software teams create the best software, faster.

Sentry是一个SaaS服务，提供了多种语言、多种环境的错误收集提示等自动化处理功能。

它的优势主要有以下几点：

* 接入简单，node & flutter都是在主入口几行搞定;
* 支持平台和语言极广，几乎涵盖了市面上常见的语言和框架，能够为整个开发团队提供错误收集能力;
* 支持扩展，能够快速扩展到Gitlab、Github、Trello、Slack等平台，国内也有非常好的支持，飞书等平台也有对应的助手或Bot能够方便的扩展到日常开发上;
* 支持私有部署（虽然有坑……），这一点是最为重要的，能够让小团队快速利用Docker和官方命令进行部署，极快地为开发赋能。

SaaS版本我也曾使用过，但是如果没有配置好或者网络环境一般，可能会付出比较高的成本（定时器未清除导致的报错会瞬间烧光你的免费额度……），因此强烈推荐私有部署，相关教程也比较丰富。

> getsentry: [Github](https://github.com/getsentry/onpremise)

> 飞书官方的Sentry助手，[文档](https://getfeishu.cn/hc/zh-cn/articles/360041217373-%E6%9C%BA%E5%99%A8%E4%BA%BA-%E5%A6%82%E4%BD%95%E5%9C%A8%E9%A3%9E%E4%B9%A6%E4%B8%AD%E9%85%8D%E7%BD%AE-Sentry-%E5%8A%A9%E6%89%8B-)，如果其他平台没有原生支持也可以使用Webhook等方式“曲线救国”。

## 简单说说私有部署

其实按照官方的仓库指导，很容易能够部署，只需要一些docker的基础知识并且能够利用docker-compose工具就可以运行起来，但是有很多细节比如Nginx反代Sentry，以及邮箱配置等还是需要对其他相关的东西有一些了解。

### 配置

官方推荐的配置为2400MB内存起步，但是可以通过修改[install.sh](https://github.com/getsentry/onpremise/blob/master/install.sh)，调整最低内存，可以完成安装，但是不保证运行效率，如果较大量的请求可能会导致内存100%。

    MIN_RAM=2400 # MB

### 一些运行设置

以邮件配置举例，目前版本(onpremise, Sentry 10.1.0.dev09b99a3b)如果希望配置生效首先需要找到sentry目录下的config.yml文件（如果没有说明是全新安装，可以从config.example.yml复制一份进行修改），利用环境变量先配置对应的参数。

更新配置后，执行以下命令：

```bash
# docker-compose.yml 目录下
docker-compose stop
docker-compose run --rm web upgrade
docker-compose up -d
```

如果相关程序启动成功，则可以到系统管理界面查看是否应用配置，并发送测试邮件。

### 更新版本

随着一些API的变更，官方会更新相应的版本，私有部署的可以通过执行以下命令来进行升级。

```bash
# 避免onpremise版本安装脚本问题，建议手工拉取最新镜像tag，同时将onpremise仓库升级到对应tag
# docker pull getsentry/sentry:xx.xx.xx && git checkout xx.xx.xx
docker-compose build && docker-compose run --rm web upgrade && docker-compose up -d
```

> 目前已知Github集成存在API被废弃，相关[链接](https://developer.github.com/changes/2020-04-15-replacing-create-installation-access-token-endpoint/) ，目前onpremise 10.0.0版本存在此问题，10.0.1未确认，官方修正于20.7.0，鉴于私有部署版本更新过于激进，暂时不进行升级等待10版本后续更新。

## 坑

私有部署依赖于Sentry和它的很多镜像，以及一些第三方镜像。由于Sentry 20的自建版本仍在 __非常积极地__ 开发迭代中，强烈推荐使用docker的原始源进行安装，成功率较高，如果使用镜像，可能存在Bug导致无法安装，需要注意。

强烈建议将postgres数据和sentry-data挂载到机器目录上，可以较好的保存持久化的信息。

## Sentry依赖的一堆容器，究竟做了什么？

这里强烈推荐看[官方开发博客](https://blog.sentry.io/)了解每一个组件背后的由来。


Spark1e

Category: frontend