client side error boundary
This commit is contained in:
parent
4cae1ae230
commit
74df0db035
|
@ -0,0 +1,41 @@
|
||||||
|
import React from 'react'
|
||||||
|
import LayoutError from './layout-error'
|
||||||
|
import styles from '../styles/404.module.css'
|
||||||
|
|
||||||
|
class ErrorBoundary extends React.Component {
|
||||||
|
constructor (props) {
|
||||||
|
super(props)
|
||||||
|
|
||||||
|
// Define a state variable to track whether is an error or not
|
||||||
|
this.state = { hasError: false }
|
||||||
|
}
|
||||||
|
|
||||||
|
static getDerivedStateFromError () {
|
||||||
|
// Update state so the next render will show the fallback UI
|
||||||
|
return { hasError: true }
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidCatch (error, errorInfo) {
|
||||||
|
// You can use your own error logging service here
|
||||||
|
console.log({ error, errorInfo })
|
||||||
|
}
|
||||||
|
|
||||||
|
render () {
|
||||||
|
// Check if the error is thrown
|
||||||
|
if (this.state.hasError) {
|
||||||
|
// You can render any custom fallback UI
|
||||||
|
return (
|
||||||
|
<LayoutError>
|
||||||
|
<Image width='500' height='375' src='/floating.gif' fluid />
|
||||||
|
<h1 className={styles.fourZeroFour} style={{ fontSize: '48px' }}>something went wrong</h1>
|
||||||
|
</LayoutError>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Return children components in case of no error
|
||||||
|
|
||||||
|
return this.props.children
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ErrorBoundary
|
|
@ -112,7 +112,6 @@ export function pollSchema (client, numExistingChoices) {
|
||||||
title: titleValidator,
|
title: titleValidator,
|
||||||
options: Yup.array().of(
|
options: Yup.array().of(
|
||||||
Yup.string().trim().test('my-test', 'required', function (value) {
|
Yup.string().trim().test('my-test', 'required', function (value) {
|
||||||
console.log(this.path)
|
|
||||||
return (this.path !== 'options[0]' && this.path !== 'options[1]') || value
|
return (this.path !== 'options[0]' && this.path !== 'options[1]') || value
|
||||||
}).max(MAX_POLL_CHOICE_LENGTH,
|
}).max(MAX_POLL_CHOICE_LENGTH,
|
||||||
({ max, value }) => `${Math.abs(max - value.length)} too many characters`
|
({ max, value }) => `${Math.abs(max - value.length)} too many characters`
|
||||||
|
|
|
@ -13,6 +13,7 @@ import { useEffect } from 'react'
|
||||||
import Moon from '../svgs/moon-fill.svg'
|
import Moon from '../svgs/moon-fill.svg'
|
||||||
import Layout from '../components/layout'
|
import Layout from '../components/layout'
|
||||||
import { ShowModalProvider } from '../components/modal'
|
import { ShowModalProvider } from '../components/modal'
|
||||||
|
import ErrorBoundary from '../components/error-boundary'
|
||||||
|
|
||||||
function CSRWrapper ({ Component, apollo, ...props }) {
|
function CSRWrapper ({ Component, apollo, ...props }) {
|
||||||
const { data, error } = useQuery(gql`${apollo.query}`, { variables: apollo.variables, fetchPolicy: 'cache-first' })
|
const { data, error } = useQuery(gql`${apollo.query}`, { variables: apollo.variables, fetchPolicy: 'cache-first' })
|
||||||
|
@ -82,6 +83,7 @@ function MyApp ({ Component, pageProps: { session, ...props } }) {
|
||||||
<Head>
|
<Head>
|
||||||
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
|
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
|
||||||
</Head>
|
</Head>
|
||||||
|
<ErrorBoundary>
|
||||||
<PlausibleProvider domain='stacker.news' trackOutboundLinks>
|
<PlausibleProvider domain='stacker.news' trackOutboundLinks>
|
||||||
<Provider session={session}>
|
<Provider session={session}>
|
||||||
<ApolloProvider client={client}>
|
<ApolloProvider client={client}>
|
||||||
|
@ -99,6 +101,7 @@ function MyApp ({ Component, pageProps: { session, ...props } }) {
|
||||||
</ApolloProvider>
|
</ApolloProvider>
|
||||||
</Provider>
|
</Provider>
|
||||||
</PlausibleProvider>
|
</PlausibleProvider>
|
||||||
|
</ErrorBoundary>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 501 KiB |
Binary file not shown.
After Width: | Height: | Size: 984 KiB |
Loading…
Reference in New Issue