Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add a helpful message if there is a 404 on config.json error #2203

Merged
merged 2 commits into from Aug 13, 2021
Merged

Add a helpful message if there is a 404 on config.json error #2203

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f3da256
Add a helpful message for specific 404 on config.json error
cmdcolin Aug 10, 2021
4e9fced
Update help message for loader
elliothershberg Aug 11, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
97 changes: 61 additions & 36 deletions products/jbrowse-web/src/Loader.tsx
View file
Open in desktop
Expand Up @@ -33,13 +33,30 @@ import Loading from './Loading'
import corePlugins from './corePlugins'
import JBrowse from './JBrowse'
import JBrowseRootModelFactory from './rootModel'
import { makeStyles } from '@material-ui/core'
import packagedef from '../package.json'
import factoryReset from './factoryReset'

const SessionWarningDialog = lazy(() => import('./SessionWarningDialog'))
const ConfigWarningDialog = lazy(() => import('./ConfigWarningDialog'))
const StartScreen = lazy(() => import('./StartScreen'))

const useStyles = makeStyles(theme => ({
message: {
border: '1px solid black',
overflow: 'auto',
maxHeight: 200,
margin: theme.spacing(1),
padding: theme.spacing(1),
},

errorBox: {
background: 'lightgrey',
border: '1px solid black',
margin: 20,
},
}))

function NoConfigMessage() {
const links = [
['test_data/volvox/config.json', 'Volvox sample data'],
Expand Down Expand Up @@ -466,6 +483,45 @@ export function Loader({
)
}

const ErrorMessage = ({
err,
snapshotError,
}: {
err: Error
snapshotError?: string
}) => {
const classes = useStyles()
return (
<div>
<NoConfigMessage />
{err && err.message === 'HTTP 404 fetching config.json' ? (
<div className={classes.message} style={{ background: '#9f9' }}>
No config detected ({`${err}`})
<br />
<p>
If you want to learn how to complete your setup, visit our{' '}
<a href="https://jbrowse.org/jb2/docs/quickstart_web">
Quick start guide
</a>
</p>
</div>
) : (
<div className={classes.message} style={{ background: '#f88' }}>
{`${err}`}
{snapshotError ? (
<>
... Failed element had snapshot:
<pre className={classes.errorBox}>
{JSON.stringify(JSON.parse(snapshotError), null, 2)}
</pre>
</>
) : null}
</div>
)}
</div>
)
}

const Renderer = observer(
({
loader,
Expand All @@ -479,8 +535,9 @@ const Renderer = observer(
const [, setPassword] = useQueryParam('password', StringParam)
const { sessionError, configError, ready, shareWarningOpen } = loader
const [pm, setPluginManager] = useState<PluginManager>()
const [error, setError] = useState('')
const [error, setError] = useState<Error>()
const [snapshotError, setSnapshotError] = useState('')

// only create the pluginManager/rootModel "on mount"
useEffect(() => {
try {
Expand Down Expand Up @@ -614,10 +671,10 @@ const Renderer = observer(
// best effort to make a better error message than the default
// mobx-state-tree
if (match) {
setError(`Failed to load element at ${match[1]}`)
setError(new Error(`Failed to load element at ${match[1]}`))
setSnapshotError(match[2])
} else {
setError(e.message.slice(0, 10000))
setError(new Error(e.message.slice(0, 10000)))
}
console.error(e)
}
Expand All @@ -634,39 +691,7 @@ const Renderer = observer(
const err = configError || error

if (err) {
return (
<div>
<NoConfigMessage />
{err ? (
<div
style={{
border: '1px solid black',
overflow: 'auto',
maxHeight: 200,
padding: 2,
margin: 2,
backgroundColor: '#ff8888',
}}
>
{`${err}`}
{snapshotError ? (
<>
... Failed element had snapshot:
<pre
style={{
background: 'lightgrey',
border: '1px solid black',
margin: 20,
}}
>
{JSON.stringify(JSON.parse(snapshotError), null, 2)}
</pre>
</>
) : null}
</div>
) : null}
</div>
)
return <ErrorMessage err={err} snapshotError={snapshotError} />
}

if (loader.sessionTriaged) {
Expand Down