Add error handling for loadPlugins

GMOD · Jan 26, 2023 · 6c94962 · 6c94962
1 parent aa45fc8
commit 6c94962
Showing 1 changed file with 20 additions and 13 deletions.
diff --git a/products/jbrowse-react-linear-genome-view/stories/JBrowseLinearGenomeView.stories.tsx b/products/jbrowse-react-linear-genome-view/stories/JBrowseLinearGenomeView.stories.tsx
@@ -596,6 +596,7 @@ export const Hg38Exome = () => {
   return <JBrowseLinearGenomeView viewState={state} />
 }
 export const WithExternalPlugins = () => {
+  const [error, setError] = useState<unknown>()
   // usage with buildtime plugins
   // this plugins array is then passed to the createViewState constructor
   //
@@ -610,20 +611,20 @@ export const WithExternalPlugins = () => {
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     ;(async () => {
-      const loadedPlugins = await loadPlugins([
-        {
-          name: 'UCSC',
-          url: 'https://unpkg.com/jbrowse-plugin-ucsc@^1/dist/jbrowse-plugin-ucsc.umd.production.min.js',
-        },
-      ])
-      setPlugins(loadedPlugins)
+      try {
+        const loadedPlugins = await loadPlugins([
+          {
+            name: 'UCSC',
+            url: 'https://unpkg.com/jbrowse-plugin-ucsc@^1/dist/jbrowse-plugin-ucsc.umd.production.min.js',
+          },
+        ])
+        setPlugins(loadedPlugins)
+      } catch (e) {
+        setError(e)
+      }
     })()
   }, [setPlugins])
 
-  if (!plugins) {
-    return null
-  }
-
   const state = createViewState({
     assembly: {
       name: 'hg19',
@@ -657,7 +658,7 @@ export const WithExternalPlugins = () => {
         },
       },
     },
-    plugins: plugins.map(p => p.plugin),
+    plugins: plugins?.map(p => p.plugin),
     tracks: [
       {
         type: 'FeatureTrack',
@@ -711,7 +712,13 @@ export const WithExternalPlugins = () => {
       },
     },
   })
-  return <JBrowseLinearGenomeView viewState={state} />
+  return error ? (
+    <div style={{ color: 'red' }}>{`${error}`}</div>
+  ) : !plugins ? (
+    <div>Loading plugins...</div>
+  ) : (
+    <JBrowseLinearGenomeView viewState={state} />
+  )
 }
 
 export const WithInternetAccounts = () => {