JS errors to r

DESCRIPTION

@@ -19,7 +19,7 @@ Description: A Grammar-based Toolkit for Scalable and Interactive Genomics Data
 License: LGPL-3
 Encoding: UTF-8
 Roxygen: list(markdown = TRUE)
-RoxygenNote: 7.2.1
+RoxygenNote: 7.2.3
 biocViews: ShinyApps, Genetics, Visualization
 Imports:
     htmltools,
@@ -29,7 +29,8 @@ Imports:
     shiny.react,
     fs,
     digest,
-    rjson
+    rjson,
+    cli
 Suggests:
     config,
     covr,

NAMESPACE

@@ -33,4 +33,6 @@ export(visual_channel_x)
 export(visual_channel_y)
 export(zoom_to)
 export(zoom_to_extent)
+importFrom(cli,cli_alert_danger)
 importFrom(shiny,getDefaultReactiveDomain)
+importFrom(shiny,observeEvent)

R/utils.R

@@ -1,3 +1,52 @@
+#' Gets the main Shiny parent session
+#' @importFrom shiny getDefaultReactiveDomain
+#' @noRd
+get_main_session <- function() {
+  session <- getDefaultReactiveDomain()
+  test <- FALSE
+  max_depth <- 100
+  depth <- 0
+  while (!test) {
+    test <- "ShinySession" %in% class(session)
+    if (!test) {
+      session <- .subset2(session, "parent")
+    }
+    depth <- depth + 1
+    if (depth >= max_depth) {
+      session <- getDefaultReactiveDomain()
+      test <- TRUE
+      warning("Max depth reached when running get_main_session")
+    }
+  }
+  session
+}
+
+#' Adds an observer to print error messages coming from the JS console
+#' @importFrom cli cli_alert_danger
+#' @importFrom shiny observeEvent
+#' @noRd
+add_js_error_observer <- function() {
+  # Catching error messages coming from the browser
+  session <- get_main_session()
+  if (!is.null(session)) {
+    input <- session$input
+    if (is.null(session$userData$error_observer)) {
+      session$userData$error_observer <- observeEvent(
+        input$shiny_gosling_js_logs, {
+          error_message <- paste(
+            "shiny.gosling - JS console error: ",
+            session$input$shiny_gosling_js_logs$name,
+            "\nMessage: ",
+            input$shiny_gosling_js_logs$message,
+            " | Inspect the browser's console for more information about this error"
+          )
+          cli_alert_danger(error_message)
+        }
+      )
+    }
+  }
+}
+
 #' Remove null from list
 #'
 #' @param r_list An r list with NULL values
@@ -419,11 +468,13 @@ print.gosling <- function(x, ...) {
 #'
 #'   shinyApp(ui, server)
 #' }
-#'
 #' @return Gosling component for rendering on R shiny apps
 #' @export
 #'
 gosling <- function(component_id, composed_views, clean_braces = TRUE) {
+
+  add_js_error_observer()
+
   structure(
     GoslingComponent(
       component_id = component_id,

js/src/customGosling.js

@@ -1,6 +1,27 @@
 import React, { useRef, useEffect } from "react";
 import { GoslingComponent } from 'gosling.js';
 
+/**
+ * A component to handle errors
+ */
+class ErrorBoundary extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidCatch(error, errorInfo) {
+    const errorObject = {
+      'name': error.name,
+      'message': error.message,
+    };
+    Shiny.setInputValue("shiny_gosling_js_logs", errorObject, {priority: 'event'});
+  }
+  render() {
+    return this.props.children; 
+  }
+}
+
 /**
  * An extension of the GoslingComponent from gosling.js
  * @param {*} props
@@ -15,7 +36,9 @@ export const customGosling = (props) => {
 
   return(
     <div>
-      <GoslingComponent ref = {goslingReference} {...props}/>
+      <ErrorBoundary>
+        <GoslingComponent ref = {goslingReference} {...props}/>  
+      </ErrorBoundary>
     </div>
   );
 };
@@ -78,7 +101,7 @@ class GoslingComponents {
         );
       }
     } else {
-      warnign(`You should provide a viewId to call this method:
+      console.warn(`You should provide a viewId to call this method:
       See the docs at http://gosling-lang.org/docs/js-api#zoomtoextent)`);
     }
   };
@@ -99,7 +122,7 @@ class GoslingComponents {
         );
       }
     } else {
-      warnign(`You should provide a viewId to call this method:
+      console.warn(`You should provide a viewId to call this method:
       See the docs at http://gosling-lang.org/docs/js-api#zoomto`);
     }
   };
@@ -115,7 +138,7 @@ class GoslingComponents {
         component.current.api.exportPng(parameters.transparentBackground);
       }
     } else {
-      warnign(`You should provide a component_id to call this method.`);
+      console.warn(`You should provide a component_id to call this method.`);
     }
   };
   /**
@@ -130,7 +153,7 @@ class GoslingComponents {
         component.current.api.exportPdf(parameters.transparentBackground);
       }
     } else {
-      warnign(`You should provide a component_id to call this method.`);
+      console.warn(`You should provide a component_id to call this method.`);
     }
   }
 }