Yanor.net/
Wiki
Blog
GitHub
Sandbox
開始行:
* Error Boundaryで捕捉されないエラー [#l0b258aa]
** Error Boundaryの例 [#w63a8699]
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.log(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <div>Error</div>;
}
return this.props.children;
}
}
*** 参考 [#kec3e87a]
https://ja.reactjs.org/docs/error-boundaries.html
** Error Boundaryで捕捉されないエラー [#c1d74d22]
const Component = () => {
setTimeout(() => { # (1)
throw new Error('Timeout');
}, 3000);
const handleClick = () => { # (2)
throw new Error('Clicked');
};
// throw new Error('Error'); # (3)
return (
<div>
Component
<br />
<button onClick={handleClick}>Click</button>
</div>
);
};
const App = () => {
return (
<ErrorBoundary>
<Component />
</ErrorBoundary>
);
};
- Componentコンポーネントの中で、(1)のような非同期処理、(...
- ちなみに、(3)のような処理は補足されて、画面にはErrorと...
** 補足されないエラーに対するエラー処理 [#ff855cbf]
const Component = () => {
const [hasError, setHasError] = useState(false);
setTimeout(() => {
try {
throw new Error('Timeout');
} catch (error) {
console.log(error);
setHasError(true);
}
}, 3000);
const handleClick = () => {
try {
throw new Error('Clicked');
} catch (error) {
console.log(error);
setHasError(true);
}
};
if (hasError) {
return <div>Error</div>;
}
（略）
}
- 上のように自前でエラー処理を書く
終了行:
* Error Boundaryで捕捉されないエラー [#l0b258aa]
** Error Boundaryの例 [#w63a8699]
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError() {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.log(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <div>Error</div>;
}
return this.props.children;
}
}
*** 参考 [#kec3e87a]
https://ja.reactjs.org/docs/error-boundaries.html
** Error Boundaryで捕捉されないエラー [#c1d74d22]
const Component = () => {
setTimeout(() => { # (1)
throw new Error('Timeout');
}, 3000);
const handleClick = () => { # (2)
throw new Error('Clicked');
};
// throw new Error('Error'); # (3)
return (
<div>
Component
<br />
<button onClick={handleClick}>Click</button>
</div>
);
};
const App = () => {
return (
<ErrorBoundary>
<Component />
</ErrorBoundary>
);
};
- Componentコンポーネントの中で、(1)のような非同期処理、(...
- ちなみに、(3)のような処理は補足されて、画面にはErrorと...
** 補足されないエラーに対するエラー処理 [#ff855cbf]
const Component = () => {
const [hasError, setHasError] = useState(false);
setTimeout(() => {
try {
throw new Error('Timeout');
} catch (error) {
console.log(error);
setHasError(true);
}
}, 3000);
const handleClick = () => {
try {
throw new Error('Clicked');
} catch (error) {
console.log(error);
setHasError(true);
}
};
if (hasError) {
return <div>Error</div>;
}
（略）
}
- 上のように自前でエラー処理を書く
ページ名:
