[skip ci] Add error handler example to storybook

products/jbrowse-react-linear-genome-view/stories/ErrorHandling.mdx

@@ -0,0 +1,18 @@
+import { Meta, Story } from '@storybook/blocks'
+import { WithErrorHandler } from './JBrowseLinearGenomeView.stories'
+
+<Meta title="Error handling" />
+
+# Error handling
+
+The default code for the embedded views do not have any 'error boundary', so you
+must create your own error handling. Because 'createViewState' can throw an
+error (which can be a complex mobx-state-tree error) we suggest using
+[`@jbrowse/core/ui/ErrorMessage`](https://github.com/GMOD/jbrowse-components/blob/main/packages/core/ui/ErrorMessage.tsx)
+component, which is a error message component (not a React error boundary) with
+specialized code for showing JBrowse related error messages.
+
+The example below will have a red box complaining about the BadTrack track type
+not validating
+
+<Story of={WithErrorHandler} />

products/jbrowse-react-linear-genome-view/stories/JBrowseLinearGenomeView.stories.tsx

@@ -18,6 +18,7 @@ export {
   WithWebWorker,
   WithTwoLinearGenomeViews,
   WithReact18,
+  WithErrorHandler,
 } from './examples'
 
 export default { title: 'Source code for examples' }

products/jbrowse-react-linear-genome-view/stories/examples/WithErrorHandler.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react'
+import { ErrorMessage } from '@jbrowse/core/ui'
+
+// in your code:
+// import {createViewState, JBrowseLinearGenomeView} from '@jbrowse/react-linear-genome-view'
+import { createViewState, JBrowseLinearGenomeView } from '../../src'
+
+import { getVolvoxConfig } from './util'
+
+type ViewState = ReturnType<typeof createViewState>
+
+export const WithErrorHandler = () => {
+  const { assembly } = getVolvoxConfig()
+  const [error, setError] = useState<unknown>()
+  const [viewState, setViewState] = useState<ViewState>()
+
+  useEffect(() => {
+    try {
+      const state = createViewState({
+        assembly,
+        tracks: [
+          {
+            type: 'BadTrack',
+            notProperTrack: 'error',
+            shouldHaveTrackIdAndStuff: 'test',
+          },
+        ],
+        location: 'ctgA:1105..1221',
+      })
+      setViewState(state)
+    } catch (e) {
+      setError(e)
+    }
+  }, [assembly])
+  return (
+    <div>
+      {error ? (
+        <ErrorMessage error={error} />
+      ) : viewState ? (
+        <JBrowseLinearGenomeView viewState={viewState} />
+      ) : (
+        'Loading...'
+      )}
+      <a href="https://github.com/GMOD/jbrowse-components/blob/main/products/jbrowse-react-linear-genome-view/stories/examples/WithErrorHandler.tsx">
+        Source code
+      </a>
+    </div>
+  )
+}

products/jbrowse-react-linear-genome-view/stories/examples/index.ts

@@ -17,3 +17,4 @@ export * from './WithReact18'
 export * from './WithShowTrack'
 export * from './WithWebWorker'
 export * from './WithTwoLinearGenomeViews'
+export * from './WithErrorHandler'