ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

client side error boundary

This commit is contained in:
keyan 2023-02-08 15:56:43 -06:00
parent 4cae1ae230
commit 74df0db035
5 changed files with 61 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
components/error-boundary.js Normal file
View File

@ -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

1
lib/validate.js
View File

@ -112,7 +112,6 @@ export function pollSchema (client, numExistingChoices) {
title: titleValidator,
options: Yup.array().of(
Yup.string().trim().test('my-test', 'required', function (value) {
console.log(this.path)
return (this.path !== 'options[0]' && this.path !== 'options[1]') || value
}).max(MAX_POLL_CHOICE_LENGTH,
({ max, value }) => `${Math.abs(max - value.length)} too many characters`

37
pages/_app.js
View File

@ -13,6 +13,7 @@ import { useEffect } from 'react'
import Moon from '../svgs/moon-fill.svg'
import Layout from '../components/layout'
import { ShowModalProvider } from '../components/modal'
import ErrorBoundary from '../components/error-boundary'
function CSRWrapper ({ Component, apollo, ...props }) {
const { data, error } = useQuery(gql`${apollo.query}`, { variables: apollo.variables, fetchPolicy: 'cache-first' })
@ -82,23 +83,25 @@ function MyApp ({ Component, pageProps: { session, ...props } }) {
<Head>
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
</Head>
<PlausibleProvider domain='stacker.news' trackOutboundLinks>
<Provider session={session}>
<ApolloProvider client={client}>
<MeProvider me={me}>
<PriceProvider price={price}>
<LightningProvider>
<ShowModalProvider>
{data || !apollo?.query
? <Component {...props} />
: <CSRWrapper Component={Component} {...props} />}
</ShowModalProvider>
</LightningProvider>
</PriceProvider>
</MeProvider>
</ApolloProvider>
</Provider>
</PlausibleProvider>
<ErrorBoundary>
<PlausibleProvider domain='stacker.news' trackOutboundLinks>
<Provider session={session}>
<ApolloProvider client={client}>
<MeProvider me={me}>
<PriceProvider price={price}>
<LightningProvider>
<ShowModalProvider>
{data || !apollo?.query
? <Component {...props} />
: <CSRWrapper Component={Component} {...props} />}
</ShowModalProvider>
</LightningProvider>
</PriceProvider>
</MeProvider>
</ApolloProvider>
</Provider>
</PlausibleProvider>
</ErrorBoundary>
</>
)
}

BIN
public/crying.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 501 KiB

BIN
public/floating.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 984 KiB