程序员崩溃瞬间：十大奇葩报错诊疗记-CSDN博客

本文链接：https://blog.csdn.net/supergaoshou2202/article/details/153054399

Debug大作战：奇葩报错诊疗所

在软件开发过程中，遇到奇葩报错是家常便饭。这些报错往往令人抓狂，但解决后却能带来极大的成就感。以下是一些常见奇葩报错的诊疗方案，附带代码示例。

报错一：Uncaught TypeError: Cannot read property 'xxx' of undefined

这种报错通常发生在尝试访问一个未定义对象的属性时。

const user = {
  name: 'Alice',
  address: {
    city: 'Wonderland'
  }
};

// 错误示例
console.log(user.address.street.name); // Uncaught TypeError: Cannot read property 'name' of undefined

// 解决方案
console.log(user.address.street?.name); // 使用可选链操作符

报错二：Unexpected token '<'

这种报错常见于前端开发，通常是因为服务器返回了HTML而不是预期的JSON数据。

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // 如果返回的是HTML，这里会抛出Unexpected token '<'
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// 解决方案：确保后端返回正确的Content-Type头

报错三：Maximum call stack size exceeded

这种报错通常是由于递归函数没有正确的终止条件导致的。

// 错误示例
function infiniteLoop() {
  infiniteLoop();
}
infiniteLoop(); // Maximum call stack size exceeded

// 解决方案：添加终止条件
function finiteLoop(n) {
  if (n <= 0) return;
  console.log(n);
  finiteLoop(n - 1);
}
finiteLoop(10);

报错四：Cannot access 'x' before initialization

这种报错发生在尝试在变量初始化前访问它时，特别是在使用let和const声明变量时。

// 错误示例
console.log(x); // Cannot access 'x' before initialization
let x = 10;

// 解决方案：确保变量在使用前已经初始化
let y = 20;
console.log(y); // 正确

报错五：Invalid hook call

这种报错是React特有的，通常是因为在非React函数组件中使用了hooks。

// 错误示例
function regularFunction() {
  const [state, setState] = useState(0); // Invalid hook call
  return <div>{state}</div>;
}

// 解决方案：确保只在React函数组件或自定义hooks中使用hooks
function MyComponent() {
  const [state, setState] = useState(0);
  return <div>{state}</div>;
}

报错六：ENOENT: no such file or directory

这种报错常见于Node.js环境，通常是因为尝试访问不存在的文件或目录。

const fs = require('fs');

// 错误示例
fs.readFile('./nonexistent.txt', 'utf8', (err, data) => {
  if (err) throw err; // ENOENT: no such file or directory
  console.log(data);
});

// 解决方案：检查文件路径或先检查文件是否存在
fs.access('./nonexistent.txt', fs.constants.F_OK, (err) => {
  if (err) {
    console.log('File does not exist');
    return;
  }
  fs.readFile('./nonexistent.txt', 'utf8', (err, data) => {
    if (err) throw err;
    console.log(data);
  });
});

报错七：Promise rejection not handled

这种报错发生在Promise被拒绝但没有相应的catch处理时。

// 错误示例
new Promise((resolve, reject) => {
  reject('Something went wrong');
}); // Unhandled promise rejection

// 解决方案：添加catch处理
new Promise((resolve, reject) => {
  reject('Something went wrong');
}).catch(error => console.error('Caught:', error));

报错八：Unexpected end of JSON input

这种报错通常发生在尝试解析不完整的JSON数据时。

// 错误示例
const jsonString = '{"name": "Alice"';
const obj = JSON.parse(jsonString); // Unexpected end of JSON input

// 解决方案：确保JSON数据完整
const validJsonString = '{"name": "Alice"}';
const validObj = JSON.parse(validJsonString);
console.log(validObj);

报错九：ERR_HTTP_HEADERS_SENT

这种报错发生在Node.js中，当尝试多次发送响应头时。

const express = require('express');
const app = express();

// 错误示例
app.get('/', (req, res) => {
  res.send('Hello');
  res.send('World'); // ERR_HTTP_HEADERS_SENT
});

// 解决方案：确保只发送一次响应
app.get('/correct', (req, res) => {
  res.send('Hello World');
});

报错十：Unknown provider: xProvider <- x

这种报错常见于AngularJS中，通常是因为依赖注入的问题。

// 错误示例
angular.module('myApp', [])
  .controller('MyCtrl', function(unknownProvider) {
    // Unknown provider: unknownProvider
  });

// 解决方案：确保注入的是已注册的服务
angular.module('myApp', [])
  .service('myService', function() {})
  .controller('MyCtrl', function(myService) {
    // 正确使用已注册的服务
  });