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。我不确定处理该问题的“反应”方式是什么，并且我一直在搜索“反应捕获失败导入”之类的内容，但未找到任何内容。我认为理想上我想要类似的东西

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的componentDidCatch和ErrorBoundary，如本blog post所示。但是我认为此错误是在构建过程中发生的，而不是在渲染过程中发生的。那么如何捕获构建错误并显示错误消息？

Answer 1

尝试自己设置一个google常量。这样可以防止运行时错误。然后，您可以根据google的存在情况有条件地呈现您的在线/离线组件。

const google = window.google || null;

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

要注意的一件事是，您必须保护使用google的任何内容，以便仅在呈现<Online />组件时才调用它。

反应：导入失败

更新＃1

更新＃2

1 个答案: