記一次React線上問題排查

昨天運營報了乙個問題，之前一直正常執行的react專案突然頁面訪問不了了，通過排查發現頁面報錯了，錯誤如下：

uncaught typeerror: failed to set an indexed property on 'cssstyledeclaration': index property setter is not supported.

at object.setvalueforstyles (index.js?t=:82)

at m._updatedomproperties (index.js?t=:83)

at mountcomponent (index.js?t=:83)

at object.mountcomponent (index.js?t=:12)

at mountchildren (index.js?t=:83)

at m._createinitialchildren (index.js?t=:83)

at mountcomponent (index.js?t=:83)

at object.mountcomponent (index.js?t=:12)

at f.performinitialmount (index.js?t=:82)

at f.mountcomponent (index.js?t=:82)

我一頭霧水，這不對啊之前線上一直是穩定工作的呀，怎麼突然報這個，嘗試mac的safati瀏覽器是正常訪問的，谷歌和火狐最新版本會有訪問不了的問題，基本鎖定原因應該是瀏覽器公升級的問題，去react的git上看看有沒有類似的issue，果然不出所料，已經有人報了相同的issue：

看了之後恍然大悟是不是我的react頁面的style中使用了陣列或直接字串了，趕緊去看看，果不其然：

到此找到解決方式：使用react支援的樣式設定方式，問題完美解決。

總結問題原因：之所以之前版本的瀏覽器都沒有報錯那是因為最新版本的瀏覽器使用了最新的css標準，這就意味著最新版本中的cssstyledeclaration's的index屬性沒有了setter方法，所以才導致以上的錯誤。