Django应用JS本地运行正常 部署Heroku仅部分执行问题排查

这个问题和JS本身跨环境执行差异无关，核心是Heroku部署环境返回的接口数据、页面DOM结构和本地环境不一致，叠加代码本身的逻辑漏洞和静默吞错设计，导致执行到alert('presssed')后没有命中任何有效分支，直接静默结束，所以控制台不会抛错，后续逻辑完全不执行。

你当前的代码存在几个必然导致该问题的设计缺陷：

• 所有fetch请求只处理了成功回调，没有加.catch()捕获网络/接口返回异常，出错时没有任何提示
• 条件判断分支没有覆盖全场景，一旦变量值和本地测试的预期不符，所有if条件都不命中，代码直接走完不执行任何操作
• DOM取值、类型转换没有做合法性校验，一旦Heroku上模板渲染的元素内容/属性和本地不一致，取到null/NaN时不会触发显式报错，只会让后续条件判断全部失效

最高概率触发的场景：你本地测试时路线刚好剩1个空位，符合代码里写死的diff_p ==1判断逻辑，功能正常；但Heroku上对应路线剩2个及以上空位，刚好你的Join逻辑只写了diff_p ==1的分支，其他空位数量的场景完全没处理，点击按钮自然没有任何反应。

1. 先定位具体异常值 #

在Heroku环境打开浏览器开发者工具，在alert('presssed')所在代码行打断点，逐行执行核对以下变量的实际值，1分钟就能定位具体差异：

• 核对/route/${route_id}接口返回值：本地返回的no_pass（最大乘客数）是数字类型，Heroku上可能返回字符串/null/字段名不匹配
• 核对DOM取值：#thepassengercounter_${route_id}的内容在Heroku上可能带多余空格/非数字字符，导致parseFloat转换后得到NaN
• 核对元素存在性：#fin_${route_id}元素可能因为模板渲染逻辑差异没在页面上生成，导致fin取值为null，后续字符串全等判断失效
• 核对按钮属性：按钮的element.title可能因为静态资源缓存/模板渲染差异，不是你预期的Join/Leave值，导致分支不命中

2. 给所有fetch加错误捕获，避免静默吞错 #

所有fetch请求补上状态校验和catch逻辑，出错时第一时间能看到明确提示，以第一个route请求为例：

fetch(`/route/${route_id}`)
  .then((response) => {
    if(!response.ok) throw new Error(`接口请求失败，状态码：${response.status}`)
    return response.json()
  })
  .then((route) => {
    // 原有业务逻辑
  })
  .catch(err => {
    console.error('请求异常：', err)
    alert(`操作失败：${err.message}`)
  })

join_route/leave_route/est_cost里的fetch请求都按这个格式补全错误捕获。

3. 修正条件判断的逻辑漏洞 #

你当前no_pass < max_pass分支里多余的diff_p ==1判断是核心bug，会导致路线剩2个及以上空位时Join按钮点击完全无响应，去掉这个多余判断，调整满员提示的触发逻辑即可：

if (no_pass < max_pass) {
  // 移除diff_p ==1的多余限制，只要没满员就允许Join
  if (element.title == 'Join') {
    element.style.color = '#B22222';
    element.style.border = '1px solid #B22222';
    element.title = 'Leave';
    element.innerHTML = 'Leave';
    const passengerCounter = document.querySelector(`#thepassengercounter_${route_id}`)
    passengerCounter.innerHTML = Number(passengerCounter.innerHTML) + 1;
    // 加入后刚好满员才显示满员提示
    if(max_pass - Number(passengerCounter.innerHTML) === 0) {
      document.querySelector(`#closedjs_${route_id}`).style.display = 'block';
    }

    alert(
      'Congrats you just saved ' +
      co2.toFixed(2) +
      ' kg of CO2 by Carpooling'
    );
    join_route(route_id);
    est_cost(route_id);
  } else if (element.title == 'Leave') {
    console.log(element);
    element.title = 'Join';
    element.innerHTML = 'Join';
    element.style.color = '#228B22';
    element.style.border = '1px solid  #228B22';
    const passengerCounter = document.querySelector(`#thepassengercounter_${route_id}`)
    passengerCounter.innerHTML = Number(passengerCounter.innerHTML) - 1;
    leave_route(route_id);
    est_cost(route_id);
  }
}

4. 增加变量合法性校验 #

在alert('presssed')之后先加一层校验，避免非法值导致判断失效：

// 变量合法性校验
if(isNaN(no_pass) || isNaN(max_pass) || !document.querySelector(`#fin_${route_id}`)) {
  console.error('变量取值异常', {no_pass, max_pass, route_id})
  alert('页面数据加载异常，请刷新后重试')
  return
}
const fin = document.querySelector(`#fin_${route_id}`).innerHTML;

5. 部署后清理缓存 #

Heroku部署完成后，强制刷新浏览器（Ctrl+F5 / Cmd+Shift+R），避免旧版JS静态资源缓存导致的逻辑异常。

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