Реагировать: поймать неудачный импорт - PullRequest
Новая
       40

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

0 голосов
/ 10 декабря 2018

У меня есть компонент, который вылетает из моего приложения, когда устройство отключается.Это потому, что он использует 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

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

1 Ответ

0 голосов
/ 12 декабря 2018

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

const google = window.google || null;

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

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

...