reactjs - React: Fånga ett misslyckat import

Jag har en komponent som kraschar min app när en enhet går offline. Detta beror på att den använder Google Maps, vilket kräver en internetanslutning. Jag skulle vilja fånga detta misslyckade Google Maps-import och visa ett felmeddelande (just nu visar min app bara en tom skärm). Här är ett exempel:

import { GoogleMap, withGoogleMap, Marker, Polyline, Polygon } from 'react-google-maps'

interface IProps {
    center: google.maps.LatLng
    points: google.maps.LatLng[]
    location: google.maps.LatLng | null
    target: google.maps.LatLng[] | null
}

const MARKER_LABEL: google.maps.MarkerLabel = {
    color: '#fff',
    fontSize: '14px',
    text: 'Sample Marker Text'
}

// some more consts....

const MapComponent = (props: IProps): JSX.Element => (
    <GoogleMap center={props.center} defaultMapTypeId={google.maps.MapTypeId.HYBRID} zoom={22} options={OPTIONS}>
        <ZoomLayer maxZoom={22} />
        <Polyline options={POLYLINE_OPTIONS} path={props.points} />
        {props.target !== null && props.location !== null ? <Polyline options={POLYLINE_TO_CENTER_OPTIONS} path={[props.location, averagePoint(props.target)]} /> : null}
        <Marker label={MARKER_LABEL} position={props.location || props.center} icon={MARKER_ICON} />
        {props.target !== null && props.target.length === 1 ? <Marker position={props.center} icon={MARKER_TARGET_ICON} /> : null}
        {props.target !== null && props.target.length > 1 ? <Polygon path={props.target} options={POLYGON_TARGET_OPTIONS} /> : null}
    </GoogleMap>
)

const Map = compose<IProps, IProps>(
    withProps({
        loadingElement: <div className='loading' />,
        containerElement: <div className='map' />,
        mapElement: <div />
    }),
    withGoogleMap
)(MapComponent)

export default Map

Felmeddelandet är Map.tsx:13 Uncaught ReferenceError: google is not defined när jag kör detta offline. Jag är inte säker på vad det "React" sättet att hantera detta är, och jag har sökt saker som "React catch failed import" men har inte hittat något. Jag tror att jag helst skulle vilja ha något som

try {
    console.log("FIND GOOGLE: ", google)
} catch (error) {
    export default error
}

Uppdatering #1

Jag försökte fånga efter att jag importerat min potentiellt problematiska komponent:

try {
    return (
        <section id='path' className='loading-parent'>
            <Map center={center}
                points={points.map(point => new google.maps.LatLng(point.lat, point.lng))}
                location={location}
                target={target} />
            {content}
            {loading ? <div className='loading' /> : null}
        </section>
    )
} catch (e) {
    return(
        <div>
            Error loading map: {e}
        </div>
    )
}

detta fungerade inte. Felet uppstår vid byggtid. Inte när komponenten renderas.

Uppdatering #2

Jag försökte använda Reacts componentDidCatch och ErrorBoundary som ses i det här blogginlägget. Men jag tror att detta fel uppstår under en byggning, inte under en render. Så hur fångar jag byggfel och visar ett felmeddelande?

Svar #1

Försök att själv sätta en google-konstant. Detta kommer att skydda mot körtidsfel. Sedan kan du villkorligt rendera dina online/offline-komponenter baserat på förekomsten av google.

const google = window.google || null;

return google ? (
  <Online />
) : (
  <Offline />
);

En sak att notera är att du skulle behöva skydda allt som använder google-komponenten renderas.