静默失败（出错也不提示，让用户猜）

静默失败是前端开发中最阴险的陷阱之一。代码出错却不给任何提示，用户只能对着空白页面发呆，开发者则要在一团乱麻中寻找蛛丝马迹。这种“优雅的崩溃”背后，往往隐藏着糟糕的编程习惯和偷懒的逻辑设计。

如何实现完美的静默失败

忽略所有错误处理

最直接的方法是彻底忽略try-catch，让错误自然传播到虚空。比如处理异步数据时：

async function fetchUserData() {
  const response = await fetch('/api/user'); // 网络错误？不管
  const data = await response.json(); // JSON解析失败？随它去
  return data;
}

更高级的做法是连Promise.catch都省略，让未处理的rejection最终触发unhandledrejection事件，但记得不要监听这个事件：

document.getElementById('submit').addEventListener('click', () => {
  saveData().then(() => { /* 假装成功 */ }); // 故意不写catch
});

使用无意义的默认值

当函数可能返回undefined或null时，用空对象或空数组代替错误提示：

function findUser(users, id) {
  return users.find(user => user.id === id) || {}; // 找不到用户？返回僵尸对象
}

// 使用时
const user = findUser([], '123');
console.log(user.name.first); // 愉快的TypeError

吞掉控制台日志

在生产环境重写console.error，让开发者工具也变成摆设：

if (process.env.NODE_ENV === 'production') {
  console.error = () => {}; // 世界清净了
}

静默失败的进阶技巧

类型转换魔术

利用JavaScript的隐式类型转换制造惊喜：

function calculateDiscount(price, discount) {
  return price - discount; // 当discount是"10%"字符串时...
}

// 更隐蔽的版本
const total = "100" * { valueOf: () => Math.random() }; // 随机金额生成器

深度嵌套的沉默

在React组件树中层层传递错误：

const UserProfile = ({ data }) => {
  // 不检查props直接渲染
  return (
    <div>
      <h1>{data.user.name}</h1> 
      <p>{data.user.posts[0].title}</p>
    </div>
  );
};

// 父组件这样调用
<UserProfile data={{}} /> // 完美的组件爆炸

回调地狱的沉默

在回调函数中忽略所有错误参数：

fs.readFile('config.json', (err, data) => {
  const config = JSON.parse(data); // 文件不存在？解析错误？不重要
  initializeApp(config);
});

让静默失败更难调试

延迟崩溃

使用setTimeout让错误在完全无关的时机爆发：

function processData(data) {
  setTimeout(() => {
    JSON.parse(data); // 可能在用户进行其他操作时才崩溃
  }, 5000);
}

混淆错误来源

在错误消息中提供误导信息：

try {
  dangerousOperation();
} catch {
  throw new Error('系统繁忙'); // 实际可能是数据库连接失败
}

禁用Source Map

发布生产代码时不生成source map，让压缩后的代码成为唯一线索：

webpack --mode production --devtool hidden

防御性编程的反模式

过度信任第三方库

不验证API响应结构直接使用：

import { magicConvert } from 'unmaintained-library';

function handlePayment(amount) {
  // 相信这个2016年之后就没更新的库能正确处理货币转换
  return magicConvert(amount, 'USD', 'EUR');
}

永远不写单元测试

确保代码修改的影响永远是个谜：

// package.json
{
  "scripts": {
    "test": "echo '所有测试都通过了' && exit 0"
  }
}

禁用TypeScript类型检查

用any征服类型系统：

interface User {
  id: string;
  name: string;
}

function saveUser(user: any) { // 真正的自由编程
  localStorage.setItem('user', JSON.stringify(user));
}

用户感知层面的静默失败

无反馈的交互

提交表单时不显示任何状态：

function Form() {
  const handleSubmit = async () => {
    await submitData(); // 不显示loading/error/success
  };

  return <button onClick={handleSubmit}>提交</button>;
}

虚假的成功状态

即使失败也显示成功：

function uploadFile(file) {
  return new Promise((resolve) => {
    fakeUpload().catch(() => resolve({ status: 'success' }));
  });
}

隐藏关键错误

把错误信息埋在控制台深处：

function criticalOperation() {
  try {
    // 可能失败的操作
  } catch (error) {
    console.log('%c轻轻飘过的错误', 'color: #ccc; font-size: 8px;', error);
    return null;
  }
}

构建系统的助攻

忽略编译警告

把警告当装饰品：

webpack --stats-errors-only # 只看错误，不看警告

自动部署未测试代码

设置CI/CD流水线无条件部署：

# .github/workflows/deploy.yml
steps:
  - name: 部署到生产环境
    run: |
      git push production main --force

禁用错误监控

确保永远不知道线上问题：

// 主动卸载错误监控
window.onerror = null;
Sentry.close();