Online Issue - Rendering Anomalies
Recently, the production environment monitoring system reported a frontend rendering error. I proceeded to analyze it, and here’s a summary record.
Error Information
this.service.apply(…).then(…).catch(…).finally is not a function
Error Environment
- Mac OS 10.14.6 Mojave
- Chrome 92.0.4515.131 Latest version
- WebKit 537.36
- ahooks v2.9.6
Analysis
Based on the error information, it appears to be related to compatibility issues, since Promise.finally is a function that returns a promise.
According to MDN compatibility information, Chrome should be fine, and the user reporting the error has the latest version of Chrome.
User Trajectory - Reproduction?
Following the user operations recorded in the tracking data, re-executing the operations did not reproduce the error.
ahooks
Based on the error, searching in the ahooks repository did find other users reporting the same error. The direct cause is that the ahooks module doesn’t provide compatibility support for promise.finally, so in unsupported browsers this error will occur, such as in WeChat on iOS, or if used in mini-programs.
The official fix was on 2021/7/22, so only versions after that would be fixed. The version currently used in my project is v2.9.6, which was released on 2021/2/1, so if this error occurs in unsupported browsers, it makes sense. But the current problem is that the user’s browser version is quite high, so theoretically this error shouldn’t occur.
Based on this, the exact cause of this error cannot be completely determined at this time. Currently, the only approach is to upgrade this module, perform regression testing, deploy, and then observe whether similar online errors still occur.
Final Thoughts
This problem is not entirely clear at the moment, but this is the only way to address it. After all, looking directly at the error, it does appear to be a compatibility issue. At the same time, this error has made me realize the importance of user operation tracking/client version environment and other tracking information.
