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
31 lines
767 B
JavaScript
31 lines
767 B
JavaScript
import React, { useContext, useMemo } from 'react'
|
|
import { useQuery } from '@apollo/client'
|
|
import { ME } from '../fragments/users'
|
|
import { SSR } from '../lib/constants'
|
|
|
|
export const MeContext = React.createContext({
|
|
me: null
|
|
})
|
|
|
|
export function MeProvider ({ me, children }) {
|
|
const { data } = useQuery(ME, SSR ? {} : { pollInterval: 1000, nextFetchPolicy: 'cache-and-network' })
|
|
const futureMe = data?.me || me
|
|
|
|
const contextValue = useMemo(() => ({
|
|
me: futureMe
|
|
? { ...futureMe, ...futureMe.privates, ...futureMe.optional }
|
|
: null
|
|
}), [me, data])
|
|
|
|
return (
|
|
<MeContext.Provider value={contextValue}>
|
|
{children}
|
|
</MeContext.Provider>
|
|
)
|
|
}
|
|
|
|
export function useMe () {
|
|
const { me } = useContext(MeContext)
|
|
return me
|
|
}
|