Chrome/Chromium升级后出现Uncaught TypeError: insertData is not a function求助

问题背景 #

• 错误发生在已正常运行的线上生产代码中
• Chrome升级至119.0.6045.159后出现此问题，测试Chromium 121.0.6151.0版本同样存在该问题

示例代码 #

...
// RDatabase构造函数定义:
RDatabase()
{
    const SCHEMA = 'CREATE TABLE IF NOT EXISTS trajPnts(...);';
    ...
    const PRESTM = 'INSERT INTO trajPnts(x1,x2,x3,...) VALUES(?,?,?,...);';
    try
    {
        this.db = openDatabase(...);
        this.createSchema = function ()
        { 
            ...
        }
        this.insertData = function (traj)    // <--- 这里定义的insertData方法!!!
        {
            ...
        }
        this.createSchema();
    }
    catch(e)
    {
        ...
    }

}
...
// 创建数据库实例:
var dbr = new RDatabase();
// 注册处理函数记录传入数据:
Handler.RegisterTrajHandler(
    function(traj)
    {
        dbr.insertData(traj);
    }
);
...

报错信息 #

Uncaught TypeError: insertData is not a function

原因分析 #

问题根源在RDatabase的构造函数逻辑：insertData和createSchema方法是在try块内部赋值的。如果openDatabase或者后续的createSchema调用抛出异常，catch块会捕获错误，但此时this.insertData还没完成赋值（或者赋值流程被中断），导致最终创建的dbr实例上不存在insertData方法，后续调用就会触发类型错误。

Chrome新版本可能调整了Web SQL的行为（比如openDatabase的异常触发条件、存储权限规则），之前未触发的异常现在被触发，才导致这个隐藏问题暴露出来。

解决方案 #

方案1：将方法定义移到try块外部

确保不管数据库初始化是否成功，实例都会拥有方法定义：

RDatabase()
{
    const SCHEMA = 'CREATE TABLE IF NOT EXISTS trajPnts(...);';
    const PRESTM = 'INSERT INTO trajPnts(x1,x2,x3,...) VALUES(?,?,?,...);';
    
    // 把方法定义移到try块外，确保实例始终具备这些方法
    this.createSchema = function ()
    { 
        ...
    }
    this.insertData = function (traj)
    {
        ...
    }

    try
    {
        this.db = openDatabase(...);
        this.createSchema();
    }
    catch(e)
    {
        ...
        // 在这里处理数据库初始化失败的逻辑，比如记录错误日志、提示用户
    }
}

方案2：调用前做存在性检查

在调用insertData前先验证方法是否存在，避免直接调用报错：

Handler.RegisterTrajHandler(
    function(traj)
    {
        if (typeof dbr.insertData === 'function') {
            dbr.insertData(traj);
        } else {
            // 处理方法不存在的情况，比如记录错误日志
            console.error('insertData方法未初始化');
        }
    }
);

方案3：排查初始化异常原因

检查openDatabase或createSchema抛出异常的具体原因，比如新版本浏览器的Web SQL存储配额限制、权限变化等，针对性修复数据库初始化逻辑。

内容的提问来源于stack exchange，提问作者javase