反应：捕获失败的导入答案

【问题标题】：React: Catch a failed import反应：捕获失败的导入
【发布时间】：2019-05-11 16:42:46
【问题描述】：

我有一个组件会在设备离线时使我的应用程序崩溃。这是因为它使用需要互联网连接的谷歌地图。我想捕捉这个失败的谷歌地图导入并显示一条错误消息（因为现在我的应用程序只显示一个空白屏幕）。这是一个例子：

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

【问题讨论】：

怎么样：import * as google from 'react-google-maps'
那会完成什么？如果有什么能给我更多失败的模块@PlayMa256
你说了两个矛盾的话。首先，您说它发生在您的应用程序脱机时（表示运行时错误），但随后您提到这是一个构建错误。您无法在构建时捕获运行时错误，也无法在运行时捕获构建错误。请注意，您显示的错误看起来像是运行时错误，并且与 this question... 几乎完全相同
您正在尝试使用google，可能是一个全球性的，但不存在。您应该研究如何通过全局变量或import 使其可用。

标签： reactjs typescript google-maps webpack react-google-maps

【解决方案1】：

尝试自己设置一个google 常量。这将防止运行时错误。然后你可以根据 google 的存在有条件地渲染你的在线/离线组件。

const google = window.google || null;

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

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

【讨论】：