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, 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`

3
pages/_app.js
View File

@ -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>
</> </>
) )
} }

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