LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Don't lazy-load components in ErrorBoundary

Browse source 
We currently handle major errors through ErrorBoundary. If the error is network related, ErrorBoundary ends up blank if it's components are lazy-loaded.

#codesplit
This commit is contained in:
infinite-persistence 2021-07-07 14:18:37 +08:00
parent 3fad222848
commit 3017155867
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
1 changed files with 24 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
ui/component/errorBoundary/view.jsx
View file

@ -1,15 +1,14 @@
// @flow // @flow
import type { Node } from 'react'; import type { Node } from 'react';
import React from 'react'; import React from 'react';
import Yrbl from 'component/yrbl';
import Button from 'component/button';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
import analytics from 'analytics'; import analytics from 'analytics';
import I18nMessage from 'component/i18nMessage';
import Native from 'native'; import Native from 'native';
import { Lbry } from 'lbry-redux'; import { Lbry } from 'lbry-redux';
const Button = React.lazy(() => import('component/button' /* webpackChunkName: "button" */));
const I18nMessage = React.lazy(() => import('component/i18nMessage' /* webpackChunkName: "i18nMessage" */));
const Yrbl = React.lazy(() => import('component/yrbl' /* webpackChunkName: "yrbl" */));
type Props = { type Props = {
children: Node, children: Node,
history: { history: {
@ -75,29 +74,27 @@ class ErrorBoundary extends React.Component<Props, State> {
if (hasError) { if (hasError) {
return ( return (
<div className="main main--full-width main--empty"> <div className="main main--full-width main--empty">
<React.Suspense fallback={null}> <Yrbl
<Yrbl type="sad"
type="sad" title={__('Aw shucks!')}
title={__('Aw shucks!')} subtitle={
subtitle={ <I18nMessage
<I18nMessage tokens={{
tokens={{ refreshing_the_app_link: (
refreshing_the_app_link: ( <Button
<Button button="link"
button="link" className="load-screen__button"
className="load-screen__button" label={__('refreshing the app')}
label={__('refreshing the app')} onClick={this.refresh}
onClick={this.refresh} />
/> ),
), }}
}} >
> There was an error. Try %refreshing_the_app_link% to fix it. If that doesn't work, try pressing
There was an error. Try %refreshing_the_app_link% to fix it. If that doesn't work, try pressing Ctrl+R/Cmd+R.
Ctrl+R/Cmd+R. </I18nMessage>
</I18nMessage> }
} />
/>
</React.Suspense>
{!errorWasReported && ( {!errorWasReported && (
<div className="error__wrapper"> <div className="error__wrapper">
<span className="error__text"> <span className="error__text">