專案沒發版卻出現了bug,原來是chrome春節前下毒
highlight: a11y-dark theme: fancy
前言
- 農曆: 臘月二十五
- 陽曆: 2023-01-16
過年和年獸
已經臨近過年,公司的迭代版本也已經封版,大家都在一片祥和又摻雜焦慮的氣氛中等待春節的到來。 當然,等待的人群裡面也有我,吼吼哈嘿。
突然企業微信的一聲響,我習慣性的擡頭瞅了一眼螢幕,嗯? 來至線上bug群?。
不過因為最近咱前端專案也沒有發版,心裡多少有點底氣的。
於是懷著好奇的心情點開了群訊息, 準備看看是什麼情況。
結果進群看到是某前端頁面元素拖拽功能的位置失效了。晴天霹靂啊,我們有一個類似給運營做自定義活動頁面,說是無法拖拽了。然後需要做活動比較緊急,需要儘快修復。
這活脫脫就是跟著春節來的年獸啊。我還沒放煙花打年獸,年獸就先朝我衝過來了,那說什麼也得較量較量了。
專案背景
我們這個功能是屬於一個基礎功能,通過npm私有倉庫維護版本
這個基礎功能呢,很多專案中都在使用。
如果基礎功能發了新版本,業務部門不進行升級安裝,那麼這個業務線的專案也是不會出問題的。所以只要線上出了問題,那麼要滿足兩個條件
1、基礎功能進行了釋出了npm新版本,且這個版本有問題,
2、業務部門進行了升級,使用了這個新版本
排查問題
一般來說:造成問題的可能性有 1. 有人發過新迭代版本 2. 是不是存在莫名的快取 3. 有人在以前的版本里面下毒了,然後現在發作了(可能性不大)
經過粗略排查
| 猜測 | 結果 | | --- | --- | | 1、發版導致? | 近期兩週,該服務部分未更新,排除 | | 2、快取導致 | 已經清理,沒用,排除 | | 3、下毒了 | 看了相關程式碼,沒什麼問題,排除 |
問題初見端倪
接著發生了兩件事情
1、然後我本地跑了一下專案的時候,在操作的時候,存在報錯。
2、一個測試兄弟反饋說他那兒可以正常操作
這他麼莫不是瀏覽器相容問題了吧。
我去他那看了一下,都是chrome瀏覽器(這個專案我們只支援到chrome就可以)
這時的我感覺可能問題有點大了,莫不是chrome又調整了吧
點開測試兄弟的版本看了下,是108,而且處於重啟就會升級的狀態。 我趕緊回到我的工位,開啟電腦發現是109。
在看了下那個報錯, event.path為undefined, 這裡先介紹下path是個什麼玩意,他是一個數組,裡面記錄著從當前節點冒泡到頂層window的所有node節點。我們藉助這個功能做了一寫事情。。。
這直接被chrome釜底抽薪了。(path屬於非標準api, 這些非標準api慎用,說不定什麼時候就嘎了)
解決問題
1、問題一
既然是event.path沒了,那麼我們怎麼辦呢,首先得找到代替path的方法, 上面我們也說了,path裡面記錄的是從當前節點冒泡到頂層window的所有node節點(我們是拖拽事件)
那麼我們可以自己遍歷一下當前節點+他的父節點+父節點的父節點+...+window
js
let path = [];
let target = event.target;
while(target.parentNode !== null){
path.push(target);
target = target.parentNode;
}
path.push(document, window);
return path;
在專案裡面試了一下,emm,很穩定。
1、問題二
但是我們又遇到了第二個問題,使用到event.path的專案還比較多,這就日了狗了 如果沒有更好的方法,那麼我只能挨個專案改,然後測試,然後逐個專案發版
這種原始的方法我們肯定是不會採用的,換個思路,既然event下的path被刪除了,那麼我們在event物件下追加個一個path屬性就可以了
當然我們要記得判斷下path屬性是否存在,因為有部分使用者的chrome是老版本的,我們只對升級後的版本做一些相容就可以了
if (!Event.prototype.hasOwnProperty("path")){
Object.defineProperties(Event.prototype, {
path: {
get: function(){
var target = this.target;
console.log('target', target)
var path = [];
while(target.parentNode !== null){
path.push(target);
target = target.parentNode;
}
path.push(document, window);
return path;
}
},
composedPath: {
value: function(){
return this.path;
},
writable: true
}
});
}
這樣,我們只需要在每個專案的根html,通過script引入這個js檔案就可以了
反思
如題,這個事情怪chrome嗎?其實不能怪的。 1、chrome在之前就已經給出了更新通知,只是我們沒有去關注這個事情 2、本身event.path不是標準屬性,我們卻使用了(其實其他瀏覽器是沒有這個屬性的,只是chrome提供了path屬性, 雖然現在他刪除了) 3、總之還是自己不夠警惕,同時使用了不標準的屬性,以此為戒,共勉