# [错误边界](https://zh-hans.reactjs.org/docs/error-boundaries.html)

过去，组件内的 JavaScript 错误会导致 React 的内部状态被破坏，并且在下一次渲染时 产生 可能无法追踪的 错误。这些错误基本上是由较早的其他代码（非 React 组件代码）错误引起的，但 React 并没有提供一种在组件中优雅处理这些错误的方式，也无法从错误中恢复。

## 错误边界（Error Boundaries）

部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界。

错误边界是一种 React 组件，这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误，并打印这些错误，同时展示降级 UI，而并不会渲染那些发生崩溃的子组件树。错误边界可以捕获发生在整个子组件树的渲染期间、生命周期方法以及构造函数中的错误。

> 注意
>
> 错误边界无法捕获以下场景中产生的错误：
>
> * 事件处理（了解更多）
> * 异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
> * 服务端渲染
> * 它自身抛出来的错误（并非它的子组件）

如果一个 class 组件中定义了 static getDerivedStateFromError() 或 componentDidCatch() 这两个生命周期方法中的任意一个（或两个）时，那么它就变成一个错误边界。当抛出错误后，请使用 static getDerivedStateFromError() 渲染备用 UI ，使用 componentDidCatch() 打印错误信息。

```javascript
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {    // 更新 state 使下一次渲染能够显示降级后的 UI    return { hasError: true };  }
  componentDidCatch(error, errorInfo) {    // 你同样可以将错误日志上报给服务器    logErrorToMyService(error, errorInfo);  }
  render() {
    if (this.state.hasError) {      // 你可以自定义降级后的 UI 并渲染      return <h1>Something went wrong.</h1>;    }
    return this.props.children; 
  }
}
```

然后你可以将它作为一个常规组件去使用：

```javascript
<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>
```

错误边界的工作方式类似于 JavaScript 的 catch {}，不同的地方在于错误边界只针对 React 组件。只有 class 组件才可以成为错误边界组件。大多数情况下, 你只需要声明一次错误边界组件, 并在整个应用中使用它。

注意错误边界仅可以捕获其子组件的错误，它无法捕获其自身的错误。如果一个错误边界无法渲染错误信息，则错误会冒泡至最近的上层错误边界，这也类似于 JavaScript 中 catch {} 的工作机制。

[https://zh-hans.reactjs.org/docs/error-boundaries.html](https://zh-hans.reactjs.org/docs/error-boundaries.html)

分享一个解决react项目bug导致白屏的优化方案

![](https://content.hackertalk.net/pub/Zo4ZE7-a6DVXp5)

求助：我公司电脑一直要求我激活windows，怎么解决

后端返回数据 id 长度为19，

```
 "data": {
        "records": [
            {
                "id": 1579345553824235521,
                ...
```

前端拿到数据后直接精度失真了

![](https://content.hackertalk.net/pub/NeyN67-0p3X98E)

想请教一下，可不可以不用后端改数据类型，前端解决的方案？

关于前端拿到后端长整数数据精度失真问题

https://www.photopea.com/

是真的牛，网页级应用越来越厉害了，想想以前下载个ps软件各种找破解版，而且软件包也大，关键还吃电脑配置，现在网页版感觉好流畅

Photoshop网页版

这段时间在玩nextjs，生产发布时发现想实现ssr并且动态获取数据并增加静态页面文件；

了解到了next的ISR（Incremental Static Regeneration）方案：增量静态再生成，运行时定期重新生成静态 HTML；

现在基本可以实现静态文件生成，且能定期获取动态数据；

但是有个问题，我在地址栏内输入一个随意的id也会自动生产一个我不需要的静态文件，看图

![](https://content.hackertalk.net/pub/KdJYnJ-x4w5YNG)

我在想，如果有人恶意输入，无限在地址栏输入，导致我生产了很多无效静态文件，这是不是很危险；

我发现咱hackertalk也可随意输入url的id，就不知道会不会在服务器内产生相应的无效文件

![](https://content.hackertalk.net/pub/NBNVmo-6W28vgN)

站长 Superman 大佬，你这块怎么解决的呢？

关于NextJs静态文件再生成问题

问题：

当我打算使用富文本插件时，最开始使用方式是跟react项目常规使用方式一致直接import进来当作组件使用，如下

```
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
```

在正常的react项目中是完全可以的，但是我在nextJs中使用时就出现如下错误：ReferenceError: Element is not defined

网上搜了一圈说是用 next/dynamic 解决

```
import dynamic from 'next/dynamic';

const  { Editor, Toolbar }  = dynamic(import("@wangeditor/editor-for-react"), {
  ssr: false,
  loading: () => <p>Loading ...</p>, 
});
```

这种调用方式虽然没有报错，但是Editor等组件直接undefined了

最后尝试自定义组件内components/Editor/index.js使用import导入组件使用后再export暴露，

再通过next/dynamic加载自定义组件结合使用，这个时候功能正常了。

```
const ReactWEditor = dynamic(import("../components/Editor"), {
  ssr: false,
  loading: () => <p>Loading ...</p>, 
});
```

现在基本功能需求是实现了的，也没有报错。但是想明白这是个什么原理？

关于NextJs第三方组件引用问题

vue/react hash模式下，URL中存在'#'，用'history'模式就能解决这个问题。但是history模式会出现刷新页面后，页面出现404。解决的办法是用nginx配置一下。

在nginx的配置文件中修改

方法一：

```javascript
location /{
    root   /data/nginx/html;
    index  index.html index.htm;
    if (!-e $request_filename) {
        rewrite ^/(.*) /index.html last;
        break;
    }
}
```

方法二：

[vue.js官方教程](https://link.segmentfault.com/?enc=h1inAIfbY4GrYUVF4v8f0g%3D%3D.qU5LNFdF4QClybI8KEGG6PJPC3WXNeWtfaerBw279qxTvuN6pMHa90MEiBRIEJqgMlYMcFVd4MBJwamEH1xoqQ%3D%3D)

```
 server {
        listen       8081;#默认端口是80，如果端口没被占用可以不用修改
        server_name  myapp.com;
        root        D:/vue/my_app/dist;#vue项目的打包后的dist
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #.......其他部分省略
  }
```

react/vue 路由history模式刷新页面出现404问题

查看，true 代表默认是不区分大小写的

```bash
git config --get core.ignorecase

//true
```

设置区分大小写

```powershell
git config core.ignorecase false
```



git 文件名是否区分大小写问题

像洛谷这样，签到之后能显示今日运势——单纯签到加积分感觉有点干瘪……![](https://image.hackertalk.net/images/02a15653-d9fd-4676-8914-4cd7eb2c155f)![](https://image.hackertalk.net/images/a1e0d9e3-8247-4427-9f96-39dbfe18efff)

感觉站长可以给签到加个功能

空间和时间复杂度都是 `O(1)`，好像还鲜有人知的算法：

```cpp
inline auto log_2(uint64_t x) { // also unsigned long long
    uint64_t rst = 0;
    if (x & 0xffff'ffff'0000'0000ULL) rst += 32, x >>= 32;
    if (x & 0x0000'0000'ffff'0000ULL) rst += 16, x >>= 16;
    if (x & 0x0000'0000'0000'ff00ULL) rst +=  8, x >>=  8;
    if (x & 0x0000'0000'0000'00f0ULL) rst +=  4, x >>=  4;
    if (x & 0x0000'0000'0000'000cULL) rst +=  2, x >>=  2;
    if (x & 0x0000'0000'0000'0002ULL) rst +=  1          ;
    return rst;
}
inline auto log_2(uint32_t x) { // also unsigned int
    uint32_t rst = 0;
    if (x & 0xffff'0000U) rst += 16, x >>= 16;
    if (x & 0x0000'ff00U) rst +=  8, x >>=  8;
    if (x & 0x0000'00f0U) rst +=  4, x >>=  4;
    if (x & 0x0000'000cU) rst +=  2, x >>=  2;
    if (x & 0x0000'0002U) rst +=  1          ;
    return rst;
}
inline auto log_2(uint16_t x) { // also unsigned short
    uint16_t rst = 0;
    if (x & 0x0000'ff00U) rst += 8, x >>= 8;
    if (x & 0x0000'00f0U) rst += 4, x >>= 4;
    if (x & 0x0000'000cU) rst += 2, x >>= 2;
    if (x & 0x0000'0002U) rst += 1         ;
    return rst;
}
inline auto log_2(uint8_t x) { // also unsigned char
    uint8_t rst = 0;
    if (x & 0x00f0U) rst += 4, x >>= 4;
    if (x & 0x000cU) rst += 2, x >>= 2;
    if (x & 0x0002U) rst += 1         ;
    return rst;
}
```

快速log2取整算法

**免费gpt4推荐 https://a.x-code.fun**

免费gpt4推荐 https://a.x-code.fun

最近在定位内存泄漏的问题，发现 Postman 已经支持并发调试了，可以替代 Jmeter（界面太老太难用了），performance test 的效果如下图，界面很好看，数据清晰：

![](https://image.hackertalk.net/images/0fa77da6-35c6-4cd1-b206-e58361bf1c21)

还可以模拟同时在线人数，做压力测试，设置流量增长曲线或者突发：

![](https://image.hackertalk.net/images/c769f49d-72f2-411c-ab47-29cecc34dbf6)

JProfile 是 Java 的调试可视化工具，不用命令行 dump 再分析，配合 Run GC 功能可以很快定位到内存泄漏的来源，除了看内存，还能看 CPU、Thread、JDBC 等通用接口指标。缺点是这个软件有点贵，如果有开源项目可以免费申请 License：

![](https://image.hackertalk.net/images/c02c3caf-104e-4372-a92e-b3f2c7d73f05)

Postman + JProfile 调试真方便

在队内简单训练过两次比赛后直接上场国际赛事, 最终成绩如下所示:

![](https://image.hackertalk.net/images/5549b2b5-0174-42d5-8c3c-86f315daaa33)

在249支出战战队中一支成立不久, 还带着刚招的新人的战队, 能拿到这个排名某种意义上也挺不错了. 下面是本次[sakana战队](sakana_ctf.gitee.io/sakana)带队队长**sudopacman**在这次比赛中的个人总结, 出战选手为: **sudopacman**, **H4nn4h**(新成员), **REP**(新成员), **liangmo**,**zy4024**(新成员).

## 连接部分

saarctf分为两种连接模式, 即云托管(即使用ssh直接连接)和自托管(使用oracle vm virtualbox). 本次比赛中本队使用了云托管进行参赛, 连接方式为:

* 将下载的*saarctf-cloud.conf*文件修改为*saarctf-cloud.ovpn*, 使用3.4.2版本对应工具直接连接.
* ping [战队IP], 确认丢包率不为100%即为虚拟环境连接成功.
* 提交ssh密钥后完成准备阶段.

![](https://image.hackertalk.net/images/5ba5b05c-ad4b-44a6-ae4a-149afa8d40a3)

以下将详细介绍ssh连接部分:

### openssh工具使用

战队使用openssh工具, 对于archlinux可以直接使用`sudo pacman -S openssh`进行下载, 密钥使用指令`ssh-keygen -t rsa`进行生成, 默认情况公钥和私钥将存放在.ssh文件夹中, 在文件中可以找到两个文件:*[私钥名]*与*[私钥名].pub*, 之前我们有人误将私钥当作公钥提交, 在这里提醒大家:*私钥名].pub*文件是公钥, *[私钥名]*是私钥, 不要随意把自己的私钥丢给大家.

## 竞赛过程

竞赛分为两个过程, 前面会留一小段时间进行代码审计与加固, 然后开始攻击时间, 本次比赛攻击轮次高达240轮, 每轮结束后将直接计算分值, 然后开始下一轮, 从晚上9点打到第二天凌晨6点, 加上在这之前还有一场凌晨2点持续24小时的常规ctf, 实在有点扛不住高强度消耗.

### 加固部分

感觉和网上说的差距会稍微有点大, 之前我们看教程主要说了点php的什么一件不死马, 弱口令......, 实际上好像也没这些乱七八糟的东西, 说一下我感觉重要的部分.

1. `scp`指令: 拉文件其实是一件很重要的操作, 比赛开始可以直接拉取题目数据到本地分析, down掉以后还能本地自己还原, 而不是直接扣大分还原服务器.
2. `ps -ef`&`kill`指令: `ps -ef`能检测后台运行的程序, `kill [指令号]`可以结束掉危险指令的进程.
3. 修改危险指令: 不建议直接删除, 我当时把很多重要工具进行改名, 结果防住了一些注入操作, 成功保住了几道赛题. 如果直接删除的话之后可能会有需要用到的地方, 像我之前出现了一个严重错误, 还好没有把指令直接删掉, 紧急修复了回去.
4. 代码审计: 删改掉一些危险代码, 和常规ctf比赛不同的是awd中的代码会很多很长, 导致无法全部复制到大模型中, 只能人工审计, 这部分以后慢慢考虑.

![](https://image.hackertalk.net/images/50a2f02b-545b-483e-a943-686419232a49)

### 攻击部分

相比防御, 攻击部分会显得稍像ctf, 可惜本次比赛我们战队的pwn手与web手全部翘掉了, 导致密码学玩家高强度坐牢. 我们试着打了一下没有结果, 最后干脆一心一意弄防御, 所以攻击部分就不细说误人子弟了, 简单聊一下自己的理解就好.

* 不同于训练赛, saarctf中不需要扫描ip, 玩家可以直接在排行榜找到对手的ip.
* 服务器中的代码一般是可以直接在网上找到的, 看历史issues应该可以帮到大忙, 但是我懒, 没有去看.
* 攻击的方式是审计与工具乱扫, 万一不小心扫出点什么呢, 很可惜, 我只在队内赛扫出点名堂.
* 值得一提的是对于大部分web新手来说主要学习php语言入坑, 但是以我这段时间的经历来看现在python, golang这类语言的比重在大幅提升,还有c语言的沙盒类题目比重也越来越高, emmmm, 大家看情况学吧.

![](https://image.hackertalk.net/images/19b038c0-8861-4854-84ac-0dc1443522ea)

## 杂谈

既然不是面向战队, 这篇文字就只介绍个大概吧, 对于awd, 个人感觉实战的体验和基本功会更加珍贵, 看教程学到的终究只能图一乐, 在越正式的比赛中基础会变得越重要, 反而只有那些简单的小比赛才会出现什么弱口令登录服务器和一键获取flag之类的东西吧.

[sakana战队]saarctf之攻防赛个人经验

[poetry](https://python-poetry.org/)的使用体验和稳定性怎么样？可以上生产环境吗？

感觉社区对poetry的评价很高，但在实际项目中很少看到有人使用。

在Jetbrains的[2022年Python开发者调查](https://lp.jetbrains.com/zh-cn/python-developers-survey-2022/)里占比也不高。

![poetry占比](https://image.hackertalk.net/images/e4caa4a1-7659-42b5-bdc9-d8a832349b53)

有用过的小伙伴可以谈谈体验吗？

poetry的使用体验和稳定性怎么样？可以上生产环境吗？

kubernetes 上的日志收集方案很多，有从容器主动发送到日志中心的，有和 OpenTelemetry 配合 LoKi 中心化的，最近发现 [fluentbit](https://fluentbit.io/) 这个轻量的方案很 nice。

![](https://image.hackertalk.net/images/b1eebf52-f5ec-47e1-9370-7429e325dbe5)

fluentbit 用 c 写的，内存占用极小，是 fluentd 的替代方案，配置能力很强，可以用 regex 写 log parser，支持 multiline parser，能很方便把日志（包括异常堆栈）给结构化成 json，自动发送到日志中心，比如 aws cloudwatch，效果像这样：

```json
{
    "level": "INFO",
    "application": "hackertalk-monster",
    "traceId": "65521cff9b7428726e36bb4568ac24d8",
    "spanId": "b285f431045afe34",
    "thread": "http-nio-8080-exec-9",
    "class": "a.p.hackertalk.controller.TestController",
    "message": "Hello World!",
    "kubernetes": {
        "pod_name": "app-deployment-777cc12778-l6bcd",
        "namespace_name": "hackertalk",
        "container_name": "monster",
        "container_image": "hackertalk/monster:2023-11-13-12-18-11"
    }
}
```

单行日志解析为 json，配合 aws x-ray 可以方便实现分布式链路跟踪。

Note：fluentbit 默认会收集全部容器日志，需要配置 INPUT 避免 nginx 等无用日志收集。