今天的事件發生在前端的vue
在local開發好端端的
推上去stage後
整個div都不見了
跟變魔術一樣

前情提要一下
這次的需求是做一個問卷
請使用者幫新介面評分
在使用者進入頁面十秒後
自動跳出問卷

local測試OK後
就推上去stage環境測試
但不要說十秒
等了十分鐘
問卷的div都沒跳出來

一開始先懷疑佈版失敗
但是查看gitlab的CI/CD是成功的
pod裡面image的sha256
也和gitlab的紀錄一樣
所以不是這個問題

之前比較常遇到的問題是跑版
但整個div不見還是第一次
本來以為是帳號問題
切換好幾個帳號也沒用
更何況同一個帳號
在local測試是可以的

用元素的id在去做專案裡搜尋
也沒有看到什麼蛛絲馬跡
真的是奇哉怪也

打開F12
看起來也沒有什麼錯誤
正當準備關掉F12時
突然瞄見有東西怪怪的

瀏覽器的console視窗中
有一條黃色警告顯示:
xxx has been removed

打開印出這條log的js
赫然發現竟然是其他人的js
把我們的div幹掉

故事的來龍去脈是
我們在同一個網頁
有兩個vue實體在運作
一個是網頁的header/footer
一個是網頁的主體內容

但因為最近header/footer改版
導致css汙染問題嚴重
其他部門的同事
直接用js把我們的div幹掉
(當然僅限於stage環境)

看到的當下
真的是嘆為觀止
沒想到js還可以這樣用
著實開了眼界

還好他們有留下一行log.warn
不然怎麼死的都不知道
拔掉那段js後
問卷就成功在stage顯示出來了
結束這次Bug事件

下回預告
俗話說不做不錯
沒有改動的程式碼
卻突然壞掉了
難道是乖乖被偷吃了?

下一回
後台登出bug事件