2024-4-2 事故报告

794TD

TOGAPhotos网站管理

2024年4月17日凌晨，在团队内部交流的过程中，我们注意到了一个严重的问题——图片底部的版权条没有被正确的生成。由于事关重要，我们连夜更新了补丁,但这依然对超过一百张图片造成了影响。

现在是时候来向大家说明这一切是如何发生以及我们将采取怎样的措施来避免这类问题发生。

在一切发生之前

TOGAPhotos和所有其他航空图库一样，在图片底部添加了一个与图片宽度相同高度为20px的版权条，用以明确图片的版权。受限于服务器性能，我们采取了任务前置的策略，及尽可能将复杂的图片处理过程在用户端完成，减轻服务器的压力。

我们在前端使用canvas组件进行图像处理工作，添加水印和版权条。

ctx.fillText(
    `图片版权归属 © ${userInfo['username']}`,
    IMAGE.width-180, 
    IMAGE.height + 15, 
    175
  );

在过去，这行代码很好的完成了自己的任务，在图片底部添加一个最长为175px的版权声明。

问题初现

随着注册用户的逐渐增加和在项目上逐渐积累的经验，我们注意到了一个问题。当用户名称过长时，其版权声明部分所需的长度可能会超过175px。但由于在绘制时限制了最长长度为175px,这意味着文字将被横向压缩。同时用户名较短时，可能会导致右侧留白过多。 这个对比清晰的展示了长短文本的不一致表现。尽管这不是一个严重的问题，但是我还是决定在之后对其进行修复。

在4月初，我们向开发版引入了一段用于计算文本长度的代码

  const copyrightWidth = ctx.measureText(copyrightCtx).width;
  ctx.fillText(
    copyrightCtx,
    IMAGE.width - (copyrightWidth+5), 
    IMAGE.height + 15, 
    copyrightWidth
  );

这段代码会计算版权声明所需要的长度，并且动态调整版权声明所在的位置。 我们在4月12日将这段代码合并进入了主分支（及生产环境，这是用户实际使用的版本）。

BUG！！！

由于在代码合并时缺乏检查，这导致新老两行代码同时存在于主分支之中，版权声明被合成了两次。

我们2024-4-2的更新中删除了老版本的代码，问题随即解决。

  ctx.fillText( 
    copyrightCtx, 
    IMAGE.width - (copyrightWidth+5),  
    IMAGE.height + 15, 
    copyrightWidth 
  ); 
  
  ctx.fillText( 
    `图片版权归属 © ${userInfo['username']}`, 
    IMAGE.width-180, 
    IMAGE.height + 15, 
    175
  );

我们未来会做什么

• 改进前端代码质量
• 在发布正式版本之前进行更严格的检查
• 部署独立的测试版本

这个问题并不复杂，几乎在看到那些问题图片的同时，我就想到了出现问题的原因。但这个问题在正式发布的生产版本存在了超过5天才被发现，导致其依然对相当数量的图片产生了影响。所以团队必须采取措施来防止此类问题。