Fix Misk Web tab load failure UI

GitOrigin-RevId: 501ea9b27230d2fbef182f5321e9e6db1656b8df

misk-admin/src/main/kotlin/misk/web/v2/DashboardIFrameTabAction.kt

@@ -22,6 +22,7 @@ import misk.web.proxy.WebProxyAction
 import misk.web.resources.StaticResourceAction
 import okhttp3.HttpUrl.Companion.toHttpUrl
 import wisp.deployment.Deployment
+import wisp.logging.getLogger
 
 /**
  * Builds dashboard UI and loads IFrame tab.
@@ -49,53 +50,64 @@ internal class DashboardIFrameTabAction @Inject constructor(
 
  val iframeTab = entry?.loader as? DashboardTabLoader.IframeTab
 
- div("container mx-auto p-8") {
- if (iframeTab != null) {
- // If the tab is found, render the iframe
+ if (iframeTab != null) {
+ // If the tab is found, render the iframe
 
-  if (iframeTab.iframePath.startsWith(MiskWebTabIndexAction.PATH)) {
-  // If tab is Misk-Web, do extra validation to show a more helpful error message
+ if (iframeTab.iframePath.startsWith(MiskWebTabIndexAction.PATH)) {
+ // If tab is Misk-Web, do extra validation to show a more helpful error message
 
-  val slug = iframeTab.urlPathPrefix.split("/").last { it.isNotBlank() }
-  val dashboardTab = dashboardTabs.firstOrNull { slug == it.slug }
+ val slug = iframeTab.urlPathPrefix.split("/").last { it.isNotBlank() }
+ val dashboardTab = dashboardTabs.firstOrNull { slug == it.slug }
 
- if (dashboardTab == null) {
+ if (dashboardTab == null) {
+ div("container mx-auto p-8") {
  AlertError("No Misk-Web tab found for slug: $slug. Check your install bindings or Misk-Web build.")
- } else {
- // TODO remove this hack when new Web Actions tab lands and old ones removed, v1 and v2 are in the same web-actions tab
- val normalizedSlug =
- if (dashboardTab.slug == "web-actions-v1") "web-actions" else dashboardTab.slug
- val tabEntrypointJs = "/_tab/${normalizedSlug}/tab_${normalizedSlug}.js"
+ }
+ } else {
+ // TODO remove this hack when new Web Actions tab lands and old ones removed, v1 and v2 are in the same web-actions tab
+ val normalizedSlug =
+ if (dashboardTab.slug == "web-actions-v1") "web-actions" else dashboardTab.slug
+ val tabEntrypointJs = "/_tab/${normalizedSlug}/tab_${normalizedSlug}.js"
 
- // If tab is Misk-Web do additional checks and show separate development and real errors
- if (deployment.isLocalDevelopment) {
- // If local development, check web proxy action and show fuller development 404 message
- val tabEntrypointJsResponse =
- webProxyAction.getResponse(("http://localhost/" + tabEntrypointJs).toHttpUrl())
- if (tabEntrypointJsResponse.statusCode != 200) {
+ // If tab is Misk-Web do additional checks and show separate development and real errors
+ if (deployment.isLocalDevelopment) {
+ // If local development, check web proxy action and show fuller development 404 message
+ val tabEntrypointJsResponse =
+ webProxyAction.getResponse(("http://localhost" + tabEntrypointJs).toHttpUrl())
+ if (tabEntrypointJsResponse.statusCode != 200) {
+ div("container mx-auto p-8") {
  AlertError("Failed to load Misk-Web tab: ${dashboardTab.menuCategory} / ${dashboardTab.menuLabel}")
  AlertInfo("In local development, this can be from not having your local dev server (ie. Webpack) running or not doing an initial local Misk-Web build to generate the necessary web assets. Try running in your Terminal: \$ gradle buildMiskWeb OR \$ misk-web ci-build -e.")
  }
- } else if (deployment.isReal) {
- // If real environment, only check static resource action and show limited 404 message
- val tabEntrypointJsResponse =
- staticResourceAction.getResponse(("http://localhost/" + tabEntrypointJs).toHttpUrl())
- if (tabEntrypointJsResponse.statusCode != 200) {
+ }
+ } else if (deployment.isReal) {
+ // If real environment, only check static resource action and show limited 404 message
+ val tabEntrypointJsResponse = staticResourceAction
+ .getResponse(("http://localhost" + tabEntrypointJs).toHttpUrl())
+ if (tabEntrypointJsResponse.statusCode != 200) {
+ logger.info("Failed to load Misk-Web tab: ${dashboardTab.menuCategory} / ${dashboardTab.menuLabel} Responsse: $tabEntrypointJsResponse")
+ div("container mx-auto p-8") {
  AlertError("Failed to load Misk-Web tab: ${dashboardTab.menuCategory} / ${dashboardTab.menuLabel}")
  AlertInfo("In real environments, this is usually because of a web build failure in CI. Try checking CI logs and report this bug to your platform team. If the CI web build fails or is not run, the web assets will be missing from the Docker context when deployed and fail to load.")
  }
  }
  }
  }
+ }
 
- // Always still show iframe so that full load errors show up in browser console
- iframe(classes = "h-full w-full") {
- src = "${iframeTab.iframePath}$suffix"
- }
- } else {
+ // Always still show iframe so that full load errors show up in browser console
+ iframe(classes = "h-full w-full") {
+ src = "${iframeTab.iframePath}$suffix"
+ }
+ } else {
+ div("container mx-auto p-8") {
  // If tab is not found show alert error
  AlertError("""Dashboard tab not found at $fullPath""")
  }
  }
  }
+
+ companion object {
+ private val logger = getLogger<DashboardIFrameTabAction>()
+ }
 }

misk/src/main/kotlin/misk/web/proxy/WebProxyAction.kt

@@ -74,7 +74,7 @@ class WebProxyAction @Inject constructor(
  return try {
  optionalBinder.proxyClient.newCall(proxyRequest).execute().toMisk()
  } catch (e: IOException) {
- staticResourceAction.getResponse(httpCall.url)
+ staticResourceAction.getResponse(proxyUrl)
  }
  }
 

misk/src/main/kotlin/misk/web/resources/StaticResourceAction.kt

@@ -55,8 +55,8 @@ class StaticResourceAction @Inject constructor(
  }
 
  fun getResponse(url: HttpUrl): Response<ResponseBody> {
- val staticResourceEntry =
- resourceEntryFinder.staticResource(url) as StaticResourceEntry?
+ val staticResourceEntry = resourceEntryFinder
+ .staticResource(url) as StaticResourceEntry?
  ?: return NotFoundAction.response(url.encodedPath.drop(1))
  return MatchedResource(staticResourceEntry).getResponse(url)
  }