React 中的 JS 报错及容错方案

const enum = 1

const implements = 1 // ✅
"use strict";
const implements = 1; // caught SyntaxError: Unexpected strict mode reserved word

var 1life = 'foo';
// SyntaxError: identifier starts immediately after numeric literal
var foo = 1life;
// SyntaxError: identifier starts immediately after numeric literal

“This looks like a string”;
// SyntaxError: illegal character
42 – 13;
// SyntaxError: illegal character

JSON.parse('[1, 2, 3, 4, ]');
JSON.parse('{"foo" : 1, }');
// SyntaxError JSON.parse: unexpected character
// at line 1 column 14 of the JSON data

const foo = 'Tom's bar';
// SyntaxError: missing ; before statement

var foo = "Tom's bar";
var foo = 'Tom\'s bar';
var foo = `Tom's bar`; // 推荐这种方案

var array = [];
var array[0] = "there"; // SyntaxError missing ; before

const myobj = { arrayOrObjProp1: {}, arrayOrObjProp2: [42] };
const {
  arrayOrObjProp1: [value1],
  arrayOrObjProp2: [value2],
} = myobj; // TypeError: object is not iterable
const obj = { France: "Paris", England: "London" };
for (const p of obj) {
  // …
} // TypeError: obj is not iterable

const obj = {
  France: "Paris", England: "London",
  [Symbol.iterator]() {
    // 用原生的空数组迭代器来兼容
    return [][Symbol.iterator]();
  },
};
for (const p of obj) {
  // …
}

null.foo;
// 错误类型：null 没有这个属性
undefined.bar;
// 错误类型：undefined 没有这个属性
const foo = undefined;
foo.substring(1); // TypeError: foo is undefined

var value = null;
value && value.foo;

var value = null;
value?.foo;
// 但是他也不能用来赋值:
value?.foo = 1

obj.val?.prop
obj.val?.[expr]
obj.func?.(args)

var x = document.getElementByID("foo");
// TypeError: document.getElementByID is not a function
var x = document.getElementById("foo"); // 正确的函数

var obj = { a: 13, b: 37, c: 42 };
obj.map(function(num) {
  return num * 2;
});
// TypeError: obj.map is not a function

var foo = { baz: "bar" };
if('baz' in foo){
  // operation 
}

var foo = null;
"bar" in foo;
// TypeError: invalid 'in' operand "foo"
"Hello" in "Hello World";
// TypeError: invalid 'in' operand "Hello World"

const number = [2, 3, 4, 5];
3 in number // 返回 true.
2 in number // 返回 true.
5 in number // 返回 false，因为 5 不是数组上现有的索引，而是一个值;

String.fromCodePoint("_"); // RangeError
new Array(-1); // RangeError
new Date("2014-25-23").toISOString(); // RangeError
(2.34).toFixed(-100); // RangeError
(42).toString(1);
const b = BigInt(NaN);
// RangeError: NaN cannot be converted to a BigInt because it is not an integer

foo.substring(1); // ReferenceError: foo is not defined

foo?.bar = 123

decodeURIComponent('%')
// caught URIError: URI malformed
decodeURI("%")     
// Uncaught URIError: URI malformed at decodeURI

window.addEventListener('unhandledrejection', event =>
{
    console.log('unhandledrejection: ', event.reason); // 打印
});
let p = Promise.reject("oops");
// 打印 unhandledrejection:  oops
// caught (in promise) oops

throw new Error("出错了！"); // caught Error: 出错了！
throw new RangeError("出错了，变量超出有效范围！");
throw new TypeError("出错了，变量类型无效！");

// 模拟一个接口的返回
Promise.resolve({code: 3000, message: '这是一个报错！'}).then(res => {
  if (res.code !== 200) {
    throw new Error(`code 3000: ${res.message}`)
  }
  console.log(res); // 这里可以看做是执行正常操作, 抛出错误时, 此处就不会执行了
}).catch(err => {
  alert(err.message)
});

try {
  throw new TypeError(`This is an Error`)
} catch (e) {
  console.log(e.name); // TypeError
}

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}
try {
  throw new ValidationError(`This is an Error`)
} catch (e) {
  console.log(e.name);
  // 'ValidationError'
  if (e instanceof ValidationError) {
    alert("Invalid data: " + e.message); // Invalid data: This is an Error
  }
}

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  // 最新的官方推荐, 通过此 api 获取是否触发错误
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  // 旧方案是在此处 setState
  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logComponentStackToMyService(info.componentStack);
  }
  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

<ErrorBoundary fallback={<p>Something went wrong</p>}>
  <Profile />
</ErrorBoundary>

function Fallback({ error }) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{ color: "red" }}>{error.message}</pre>
    </div>
  );
}
<ErrorBoundary
  FallbackComponent={Fallback}
>
  <ExampleApplication />
</ErrorBoundary>;

function Fallback({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{ color: "red" }}>{error.message}</pre>
      <button onclick={resetErrorBoundary}></button>
    </div>
  );
}