Fix error handling of feature detail formatter jexl callbacks

packages/core/BaseFeatureWidget/BaseFeatureDetail.tsx

@@ -657,8 +657,11 @@ export function FeatureDetails(props: {
 }
 
 export default observer(function ({ model }: BaseInputProps) {
-  const { featureData } = model
+  const { error, featureData } = model
 
+  if (error) {
+    return <ErrorMessage error={error} />
+  }
   if (!featureData) {
     return null
   }

packages/core/BaseFeatureWidget/index.ts

@@ -48,6 +48,9 @@ export default function stateModelFactory(pluginManager: PluginManager) {
       trackId: types.maybe(types.string),
       trackType: types.maybe(types.string),
     })
+    .volatile(() => ({
+      error: undefined as unknown,
+    }))
     .actions(self => ({
       setFeatureData(featureData: Record<string, unknown>) {
         self.unformattedFeatureData = featureData
@@ -62,37 +65,45 @@ export default function stateModelFactory(pluginManager: PluginManager) {
         self.trackId = trackId
         self.trackType = type
       },
+      setError(e: unknown) {
+        self.error = e
+      },
     }))
     .actions(self => ({
       afterCreate() {
         addDisposer(
           self,
           autorun(() => {
-            self.setExtra(self.track?.type, self.track?.configuration.trackId)
-            const { unformattedFeatureData, track } = self
-            const session = getSession(self)
-            if (unformattedFeatureData) {
-              const feature = clone(unformattedFeatureData)
+            try {
+              self.setExtra(self.track?.type, self.track?.configuration.trackId)
+              const { unformattedFeatureData, track } = self
+              const session = getSession(self)
+              if (unformattedFeatureData) {
+                const feature = clone(unformattedFeatureData)
 
-              const combine = (
-                arg2: string,
-                feature: Record<string, unknown>,
-              ) => ({
-                ...getConf(session, ['formatDetails', arg2], { feature }),
-                ...getConf(track, ['formatDetails', arg2], { feature }),
-              })
+                const combine = (
+                  arg2: string,
+                  feature: Record<string, unknown>,
+                ) => ({
+                  ...getConf(session, ['formatDetails', arg2], { feature }),
+                  ...getConf(track, ['formatDetails', arg2], { feature }),
+                })
 
-              if (track) {
-                // eslint-disable-next-line no-underscore-dangle
-                feature.__jbrowsefmt = combine('feature', feature)
-                const depth = getConf(track, ['formatDetails', 'depth'])
-                formatSubfeatures(feature, depth, sub => {
+                if (track) {
                   // eslint-disable-next-line no-underscore-dangle
-                  sub.__jbrowsefmt = combine('subfeatures', sub)
-                })
-              }
+                  feature.__jbrowsefmt = combine('feature', feature)
+                  const depth = getConf(track, ['formatDetails', 'depth'])
+                  formatSubfeatures(feature, depth, sub => {
+                    // eslint-disable-next-line no-underscore-dangle
+                    sub.__jbrowsefmt = combine('subfeatures', sub)
+                  })
+                }
 
-              self.setFormattedData(feature)
+                self.setFormattedData(feature)
+              }
+            } catch (e) {
+              console.error(e)
+              self.setError(e)
             }
           }),
         )

plugins/linear-genome-view/src/BaseLinearDisplay/models/serverSideRenderedBlock.ts

@@ -64,19 +64,23 @@ const blockState = types
       afterAttach() {
         const display = getContainingDisplay(self)
         setTimeout(() => {
-          makeAbortableReaction(
-            self as any,
-            renderBlockData,
-            renderBlockEffect, // reaction doesn't expect async here
-            {
-              name: `${display.id}/${assembleLocString(self.region)} rendering`,
-              delay: display.renderDelay,
-              fireImmediately: true,
-            },
-            this.setLoading,
-            this.setRendered,
-            this.setError,
-          )
+          if (isAlive(self)) {
+            makeAbortableReaction(
+              self as any,
+              renderBlockData,
+              renderBlockEffect, // reaction doesn't expect async here
+              {
+                name: `${display.id}/${assembleLocString(
+                  self.region,
+                )} rendering`,
+                delay: display.renderDelay,
+                fireImmediately: true,
+              },
+              this.setLoading,
+              this.setRendered,
+              this.setError,
+            )
+          }
         }, display.renderDelay)
       },
       setStatus(message: string) {

products/jbrowse-web/src/tests/util.tsx

@@ -175,9 +175,12 @@ export async function doSetupForImportForm(val?: unknown) {
   )
   const input = (await findByPlaceholderText(
     'Search for location',
+    {},
+    { timeout: 10000 },
   )) as HTMLInputElement
 
-  // this will be the input that is obtained after opening the LGV from the import form
+  // this will be the input that is obtained after opening the LGV from the
+  // import form
   const getInputValue = () =>
     (getByPlaceholderText('Search for location') as HTMLInputElement).value