rrweb:打开 web 页面录制与回放的黑盒子

1,320 阅读7分钟

Continuation 在 JS 中的应用

React 新近发布的 Hooks、Suspense、Concurrent Mode 等新功能让人眼前一亮,甚至惊叹 JS 居然有如此魔力。同时,这几个功能或多或少附带一些略显奇怪的规则,没有更深层次理解的话难以把握。其实这里面并没有什么“黑科技”,就大的趋势来讲,前端整体上还是在不断借鉴计算机其它领域的优秀实践,来帮助我们更方便地解决人机交互问题。本文着眼于支撑这些功能的一个底层编程概念 Continuation(译作“续延”),期望能够在了解它之后,大家对这几个功能有进一步的理解和掌握。当然,Continuation 在 React 之外也有很多的应用,可以一眼窥豹。

zhuanlan.zhihu.com/p/94611888

推荐:王明全 左现金 郑明远


前端越管越宽,腾讯Now直播如何把监控体系做到极致?

NOW 直播成立三年以来,前端团队涵盖的业务范围越来越广阔。从最初的 Hybrid App,到 React Native 再到如今的小程序,单维度的监控手段已经不足以帮助开发人员及时发现与定位问题。IVWEB 团队在不断的业务实践中,沉淀出了一套比较完善的监控方案。

mp.weixin.qq.com/s/aqO55IyVC…

推荐:王明全 左现金


Deno 1.0: What you need to know

After almost two years, the wait is nearly over. The API has been frozen, and the countdown to Deno 1.0, officially scheduled for release on May 13, has begun.

Due to its famous creator and forward-thinking vision, Deno is sure to be the most exciting and controversial JavaScript-related release in recent memory.

Deno is a general-purpose JavaScript/TypeScript programming environment. It brings together many of the best open-source technologies and offers a comprehensive solution in one small executable file.

blog.logrocket.com/deno-1-0-wh…

推荐:叶明豪


学习 sentry 源码整体架构,打造属于自己的前端异常监控SDK

本文通过梳理前端错误监控知识、介绍sentry错误监控原理、sentry初始化、Ajax上报、window.onerror、window.onunhandledrejection几个方面来学习sentry的源码。通过搭建小程序错误监控方案。使用了开源的Sentry 小程序 SDKsentry-miniapp。 顺便研究下sentry-javascript仓库 的源码整体架构。

zhuanlan.zhihu.com/p/89539449

推荐:杜宏俊


精读《React 性能调试》

在数据中台做 BI 工具经常面对海量数据的渲染处理,除了组件本身性能优化之外,经常要排查整体页面性能瓶颈点,尤其是维护一些性能做得并不好的旧代码时。React 性能调试是面对这种问题的必修课,借助 Profiling React.js Performance 这篇文章一起学习一下这个技能吧。

mp.weixin.qq.com/s/0ou2CBheE…

推荐:闪朔


前端进阶算法:常见算法题及完美题解

本文包含部分前端常见算法的题解及应用。其中涉及到数组、链表、栈、队列以及字符串相关的常见算法,有助于提高代码的思维能力和数学水平。

juejin.cn/post/684490…

推荐:陈宁


rrweb:打开 web 页面录制与回放的黑盒子

前段时间开源了我们的 web 录制、回放基础库 rrweb,它可以将⻚⾯中的 DOM 以及⽤户操作保存为可序列化的数据,以实现远程回放。

研发这⼀⼯具起初是为了解决我们在客户环境 debug 时遇到的⼀些问题。

我们的产品通常部署在客户的内⽹环境中,因此⼀旦出现问题只能通过各类远程操作⼯具登⼊客户环境中进⾏debug,操作的空间和时间都⾮常有限。如果不幸遇到⼀些偶发性的问题,复现就变得难上加难,debug 更是⽆从谈起。

在这种情况下,前端的异常监控及对应数据的收集显得⾮常重要,但是传统的收集错误栈信息的⽅式并不能给我们提供⾜够的信息⽤于定位问题。

在进⼀步调研的过程中我们发现了 LogRocket 这样的⼯具能够提供像素级的录制与回放,⾮常适⽤于我们的场景。但该类产品通常为 SAAS 服务,客户的内⽹环境很可能⽆法连接,因此也⽆法被使⽤。

最终我们决定⾃⾏实现 web 录制与回放这⼀套功能,在开发的过程中我们发现它还可以被应⽤于很多场景,例如:

  • 记录⽤户使⽤产品的⽅式并加以分析,进⼀步优化产品。
  • 采集⽤户遇到 bug 的操作路径,予以复现。
  • 记录 CI 环境中的 E2E 测试的执⾏情况。
  • 录制体积更⼩、清晰度⽆损的产品演⽰。

所以我们把其中最通⽤的部分作为独⽴的代码仓库开源,⽅便其他开发者使⽤。

下⽂中将具体说说 rrweb 设计的演进过程以及其中的关键技术细节。

zhuanlan.zhihu.com/p/60639266

推荐:陈宁


从零搭建中后台框架的核心流程

随着 React 生态的快速发展,社区基于 React 的状态管理方案层出不穷,这意味着很多方案开发者依然要做很多选择,没有约定的团队,沟通成本和跨团队协作成本,以及长期的维护是非常高的,这时候统一一套开发模式就显得尤为重要。本文将介绍如何从零开始搭建一个高可复用的后台框架,让每一个人都能轻松搭出自己的后台,深入了解自己的框架。

juejin.cn/post/684490…

推荐:梁诗棋


网易严选企业级微前端解决方案与落地实践

微前端架构是一种设计方法,其中,前端应用被分解为多个松散而协同工作的半独立“微应用”。微前端的思想来源于微服务,其名称也遵循了微服务的命名方式。那么,微前端到底如何落地呢?来自网易的资深前端开发工程师张浩为大家解读了网易严选企业级微前端的解决方案与落地实践。www.infoq.cn/article/3AZ…

推荐:李红亮


React 16.8.6 版本存在内存泄露

本文作者在持续运行的直播页中发现了问题,直播页用的 react 版本是 16.8.6。到了早上跳到这个页面的时候,控制台有点卡,怀疑是有内存泄露,作者由此开始分析这个直播页面,发现此版本可能存在内存泄露。

juejin.cn/post/684490…

推荐:陈宇


Flutter 1.17重磅发布:多个新增特性及增强,2020年首个稳定版

Flutter 1.17解决了自 1.12 稳定版本以来报告的 6,339 个问题。问题总量净减少了约 800 个。从 231 位贡献者那里合并了 3,164 个 PR,修复了大批错误。文中重点介绍了移动端性能和文件大小改进、Metal支持将大幅度提升IOS端性能、Material小部件、Flutter文本主题现代化、可访问性和国际化、Dart开发工具的移植等。

mp.weixin.qq.com/s/5O7I3irCU…

推荐:张戈


深入探索Typescript的高阶用法

「前言」:这里的标题看起来是 "高级用法",不少同学可能就表示被劝退了。其实 Typescript 作为一门 强类型 编程语言,最具特色的就是他的类型表达能力,这是很多完备的后端语言都难以媲美的 说的很对,但PHP是最好的语言,所以如果你搞懂了他的类型系统,对将来的日常开发一定是大有裨益的,但过于灵活的类型系统也注定了 Typescript 无法成为一门纯粹的静态语言,不过每一行代码都有代码提示他不香嘛?

mp.weixin.qq.com/s/lgwS59zY4…

推荐:杨灯


2020前端性能优化清单之六

某些优化可能超出了您的工作或预算范围,或者考虑到您必须处理的遗留代码,这些优化可能过于简单。没关系!将此清单用作一般(希望是全面的)指南,并创建适用于您的情况的问题清单。但最重要的是,在优化之前测试和测量您自己的项目以确定问题。祝大家 2019 年有好成绩!

mp.weixin.qq.com/s/GHUMw2RFK…

推荐:蔡璐麒