64a16373c5
* * add error boundary immediately above page component * send error logs to server via LoggerContext * display error stack and component stack in copyable text area * wrap every context provider in an error boundary * memoize context values to fix error boundary propagation issue * Wrap page component in an error boundary so we can use our context utilities for a better experience, like toast and logger Still have a top-level error boundary that catches things from the context providers, just in case. Don't display the whole error stack, just because it's ugly, but make it copyable
30 lines
797 B
JavaScript
30 lines
797 B
JavaScript
import { createContext, useContext, useMemo } from 'react'
|
|
import { useQuery } from '@apollo/client'
|
|
import { SSR } from '../lib/constants'
|
|
import { BLOCK_HEIGHT } from '../fragments/blockHeight'
|
|
|
|
export const BlockHeightContext = createContext({
|
|
height: 0
|
|
})
|
|
|
|
export const useBlockHeight = () => useContext(BlockHeightContext)
|
|
|
|
export const BlockHeightProvider = ({ blockHeight, children }) => {
|
|
const { data } = useQuery(BLOCK_HEIGHT, {
|
|
...(SSR
|
|
? {}
|
|
: {
|
|
pollInterval: 30000,
|
|
nextFetchPolicy: 'cache-and-network'
|
|
})
|
|
})
|
|
const value = useMemo(() => ({
|
|
height: data?.blockHeight ?? blockHeight ?? 0
|
|
}), [data, blockHeight])
|
|
return (
|
|
<BlockHeightContext.Provider value={value}>
|
|
{children}
|
|
</BlockHeightContext.Provider>
|
|
)
|
|
}
|