Реагировать: поймать неудачный импорт

Question

У меня есть компонент, который вылетает из моего приложения, когда устройство отключается. Это потому, что он использует Google Maps, который требует подключения к интернету. Я хотел бы поймать этот неудачный импорт Google Maps и показать сообщение об ошибке (как сейчас мое приложение просто показывает пустой экран). Вот пример:

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

Сообщение об ошибке Map.tsx:13 Uncaught ReferenceError: google is not defined когда я запускаю это в автономном режиме. Я не уверен, что это за способ "React", и я искал что-то вроде "React catch fail import import", но ничего не нашел. Я думаю, что в идеале я бы хотел что-то вроде

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

---

Обновление № 1

Я попытался перехватить после того, как импортировал потенциально разрушающий компонент:

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

это не сработало. Ошибка происходит во время сборки. Не тогда, когда компонент отображается.

---

Обновление № 2

Я пытался использовать React's componentDidCatch а также ErrorBoundary как видно в этом блоге. Но я думаю, что эта ошибка происходит во время сборки, а не во время рендеринга. Итак, как я могу отловить ошибки сборки и показать сообщение об ошибке?

Answer 1

Попробуйте установить google постоянно себя Это защитит от ошибок во время выполнения. Затем вы можете условно визуализировать ваши онлайн / офлайн компоненты на основе присутствия Google.

const google = window.google || null;

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

Стоит отметить, что вам придется охранять все, что использует google так что он вызывается только когда <Online /> Компонент отображается.