fix(Log): Fix fatal error caused by iOS (less than 13.4) which is not…

… support `ResizeObserver` interface. (issue #610)

CHANGELOG.md

@@ -5,6 +5,7 @@ English | [简体中文](./CHANGELOG_CN.md)
 - `Feat(Netwrk)` Add new option `network.ignoreUrlRegExp` to skip some requests. (PR #623)
 - `Fix(Core)` Fix prototype pollution in `vConsole.setOption()`. (issue #616 #621)
 - `Fix(Log)` Reset group state when `console.clear()` is called. (issue #611)
+- `Fix(Log)` Fix fatal error caused by iOS (less than 13.4) which is not support `ResizeObserver` interface. (issue #610)
 - `Fix(Network)` Fix possible "Cannot read property" error by `sendBeacon`. (issue #615)
 
 

CHANGELOG_CN.md

@@ -5,6 +5,7 @@
 - `Feat(Netwrk)` 新增配置项 `network.ignoreUrlRegExp` 以跳过一些请求。 (PR #623)
 - `Fix(Core)` 修复 `vConsole.setOption()` 中可能存在的原型污染问题。 (issue #616 #621)
 - `Fix(Log)` 修复调用 `console.clear()` 时没有重置 group 层级的问题。 (issue #611)
+- `Fix(Log)` 修复因 iOS（小于 13.4）不支持 `ResizeObserver` 接口导致的致命错误 (issue #610)
 - `Fix(Network)` 修复可能由 `sendBeacon` 引发的 "Cannot read property" 错误。 (issue #615)
 
 

src/component/recycleScroller/recycleItem.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
+  import { ResizeObserverPolyfill } from './resizeObserver';
 
   export let show: boolean;
   export let top: boolean;
@@ -14,7 +15,7 @@
     if (show) {
       onResize(item.getBoundingClientRect().height);
     }
-    observer = new ResizeObserver((entries) => {
+    observer = new ResizeObserverPolyfill((entries) => {
       const entry = entries[0];
       if (show) onResize(entry.contentRect.height)
     });

src/component/recycleScroller/recycleScroller.svelte

@@ -4,6 +4,7 @@
   import ScrollHandler from './scroll/scrollHandler';
   import TouchTracker from './scroll/touchTracker';
   import Style from './recycleScroller.less';
+  import { ResizeObserverPolyfill } from './resizeObserver';
   import createRecycleManager from './recycleManager';
 
   // props
@@ -177,7 +178,7 @@
       if (elem) {
         heightUpdater(elem.getBoundingClientRect().height);
         if (observer) observer.disconnect();
-        observer = new ResizeObserver((entries) => {
+        observer = new ResizeObserverPolyfill((entries) => {
           const entry = entries[0];
           heightUpdater(entry.contentRect.height);
         });

src/component/recycleScroller/resizeObserver.ts

@@ -0,0 +1,23 @@
+/**
+ * A ResizeObserver polyfill.
+ * ResizeObserver is not support in iOS 13.3
+ */
+class EmptyResizeObserver {
+  constructor(callback: (entries: any[], observer?: EmptyResizeObserver) => void) {
+    // do nothing
+  }
+
+  public disconnect() {
+    // do nothing
+  }
+
+  public observe(target: Element | SVGElement, options?: any) {
+    // do nothing
+  }
+
+  public unobserve(target: Element | SVGElement) {
+    // do nothing
+  }
+}
+
+export const ResizeObserverPolyfill = window.ResizeObserver || EmptyResizeObserver;