error loading a component in mobile insights

[doc-sheet]

Environment

self-hosted (https://develop.sentry.dev/self-hosted/)

Steps to Reproduce

Open /organizations/:orgId/insights/mobile/

Expected Result

Beautiful Mobile insights

Actual Result

There was an error loading a component.

Hello! I guess it first appeared in 24.4.0 maybe after I mess with some feature flags.

Could you help me fix my mobile insights page?

What I found is difference in columnTitles prop which looks like

0: Object { title: "transaction" }
​1: Object { title: "operation" }
​2: Object { title: "project" }
​3: Object { title: "tpm" }
​4: Object { title: "slow frame %" }
​5: Object { title: "ttid" }
​length: 6

And columnTitles array:

0: Object { title: "transaction" }
​1: Object { title: "operation" }
​2: Object { title: "project" }
​3: Object { title: "tpm" }
​4: Object { title: "slow frame %" }
​5: Object { title: "frozen frame %" }
​6: Object { title: "users" }
​7: Object { title: "user misery", tooltip: {…} }
​length: 8

This inconsistency leads to a runtime error:

TypeError: R is undefined renderHeadCell table.tsx:382 renderHeadCellWithMeta table.tsx:404

Because columns >=6 does not exist in titles array.

Product Area

Insights

Link

No response

DSN

No response

Version

25.5.1

[getsantry[bot]]

Assigning to @getsentry/support for routing ⏲️

[doc-sheet]

Well. As soon as I post it I realized there are old and new mobile overview pages with a organizations:insights-modules-use-eap switcher.

When I turned on feature flag page loads again.

But with no data:

No results found

[aldy505]

Can you list your current feature flags?

[doc-sheet]

Flags from related error

feature.organizations:performance-use-metrics false
feature.organizations:insights-modules-use-eap false
feature.organizations:performance-new-widget-designs true
feature.organizations:dashboards-metrics-transition false
feature.organizations:mep-rollout-flag false
feature.organizations:dynamic-sampling true
feature.organizations:performance-transaction-name-only-search false
feature.organizations:open-membership true
feature.organizations:global-views true
feature.organizations:insights-initial-modules true
feature.organizations:insights-addon-modules true
feature.organizations:insights-session-health-tab-ui false
feature.organizations:insights-entry-points true
feature.organizations:nextjs-insights false
feature.organizations:laravel-insights false
feature.organizations:performance-view true
feature.organizations:starfish-mobile-appstart true
feature.organizations:mobile-vitals true
feature.organizations:new-page-filter true
feature.organizations:team-roles true
feature.organizations:sentry-pride-logo-footer false
feature.organizations:chonk-ui false
feature.organizations:navigation-sidebar-v2 false
feature.organizations:onboarding false
feature.organizations:enforce-stacked-navigation false
feature.organizations:session-replay true
feature.organizations:issue-details-streamline-enforce false
feature.organizations:discover true
feature.organizations:user-feedback-ui false
feature.organizations:agents-insights false
feature.organizations:discover-basic true
feature.organizations:session-replay-ui true
feature.organizations:profiling true
feature.organizations:ourlogs-enabled false
feature.organizations:performance-trace-explorer true
feature.organizations:discover-query true
feature.organizations:devtoolbar false

[aldy505]

Can you list the ones on your sentry.conf.py instead please? So many flags are missing from what I see.

[doc-sheet]

Then I tried to turn on eap and then also some metrics.

Current flags (page loads, no data)

SENTRY_FEATURES["organizations:advanced-search"] = True
SENTRY_FEATURES["organizations:anr-analyze-frames"] = True
SENTRY_FEATURES["organizations:anr-improvements"] = True
SENTRY_FEATURES["organizations:anr-rate"] = True
SENTRY_FEATURES["organizations:breadcrumb-linked-event"] = True
SENTRY_FEATURES["organizations:commit-context"] = True
SENTRY_FEATURES["organizations:dashboards-mep"] = True
SENTRY_FEATURES["organizations:dashboards-releases"] = True
SENTRY_FEATURES["organizations:dashboards-rh-widget"] = True
SENTRY_FEATURES["organizations:device-classification"] = True
SENTRY_FEATURES["organizations:discover"] = True
SENTRY_FEATURES["organizations:dynamic-sampling"] = True
SENTRY_FEATURES["organizations:global-views"] = True
SENTRY_FEATURES["organizations:grouping-tree-ui"] = True
SENTRY_FEATURES["organizations:grouping-stacktrace-ui"] = True
SENTRY_FEATURES["organizations:grouping-title-ui"] = True
SENTRY_FEATURES["organizations:higher-ownership-limit"] = True
SENTRY_FEATURES["organizations:incidents"] = True
SENTRY_FEATURES["organizations:indexed-spans-extraction"] = True
SENTRY_FEATURES["organizations:insights-addon-modules"] = True
SENTRY_FEATURES["organizations:insights-entry-points"] = True
SENTRY_FEATURES["organizations:insights-initial-modules"] = True
SENTRY_FEATURES["organizations:insights-modules-use-eap"] = True
SENTRY_FEATURES["organizations:integrations-auto-repo-linking"] = True
SENTRY_FEATURES["organizations:integrations-issue-basic"] = True
SENTRY_FEATURES["organizations:integrations-issue-sync"] = True
SENTRY_FEATURES["organizations:integrations-codeowners"] = True
SENTRY_FEATURES["organizations:integrations-open-pr-comment"] = True
SENTRY_FEATURES["organizations:integrations-open-pr-comment-js"] = True
SENTRY_FEATURES["organizations:integrations-stacktrace-link"] = True
SENTRY_FEATURES["organizations:issue-details-inline-replay-viewer"] = True
SENTRY_FEATURES["organizations:issue-details-most-helpful-event"] = True
SENTRY_FEATURES["organizations:issue-details-most-helpful-event-ui"] = True
SENTRY_FEATURES["organizations:issue-details-new-experience-toggle"] = True
SENTRY_FEATURES["organizations:issue-details-owners"] = True
SENTRY_FEATURES["organizations:issue-details-replay-event"] = True
SENTRY_FEATURES["organizations:issue-details-tag-improvements"] = True
SENTRY_FEATURES["organizations:issue-platform"] = True
SENTRY_FEATURES["organizations:issue-stream-performance"] = True
SENTRY_FEATURES["organizations:issues-trace-timeline"] = True
SENTRY_FEATURES["organizations:mep-rollout-flag"] = True
SENTRY_FEATURES["organizations:mobile-ttid-ttfd-contribution"] = True
SENTRY_FEATURES["organizations:mobile-vitals"] = True
SENTRY_FEATURES["organizations:monitors"] = True
SENTRY_FEATURES["organizations:more-slow-alerts"] = True
SENTRY_FEATURES["organizations:new-page-filter"] = True
SENTRY_FEATURES["organizations:performance-calculate-score-relay"] = True
SENTRY_FEATURES["organizations:performance-consecutive-db-issue"] = True
SENTRY_FEATURES["organizations:performance-consecutive-http-detector"] = True
SENTRY_FEATURES["organizations:performance-issues-all-events-tab"] = True
SENTRY_FEATURES["organizations:performance-issues-compressed-assets-detector"] = True
SENTRY_FEATURES["organizations:performance-issues-render-blocking-assets-detector"] = True
SENTRY_FEATURES["organizations:performance-large-http-payload-detector"] = True
SENTRY_FEATURES["organizations:performance-n-plus-one-api-calls-detector"] = True
SENTRY_FEATURES["organizations:performance-new-widget-designs"] = True
SENTRY_FEATURES["organizations:performance-span-histogram-view"] = True
SENTRY_FEATURES["organizations:performance-slow-db-issue"] = True
SENTRY_FEATURES["organizations:performance-trace-details"] = True
SENTRY_FEATURES["organizations:performance-trace-explorer"] = True
SENTRY_FEATURES["organizations:performance-view"] = True
SENTRY_FEATURES["organizations:performance-vitals-inp"] = True
SENTRY_FEATURES["organizations:profiling"] = True
SENTRY_FEATURES["organizations:profiling-browser"] = True
SENTRY_FEATURES["organizations:profiling-view"] = True
SENTRY_FEATURES["organizations:project-stats"] = True
SENTRY_FEATURES["organizations:related-events"] = True
SENTRY_FEATURES["organizations:related-issues"] = True
SENTRY_FEATURES["organizations:related-issues-issue-details-page"] = True
SENTRY_FEATURES["organizations:release-committer-assignees"] = True
SENTRY_FEATURES["organizations:release-comparison-performance"] = True
SENTRY_FEATURES["organizations:rule-page"] = True
SENTRY_FEATURES["organizations:sdk-crash-detection"] = True
SENTRY_FEATURES["organizations:session-replay"] = True
SENTRY_FEATURES["organizations:session-replay-event-linking"] = True
SENTRY_FEATURES["organizations:set-grouping-config"] = True
SENTRY_FEATURES["organizations:sourcemaps-bundle-flat-file-indexing"] = True
SENTRY_FEATURES["organizations:source-maps-debugger-blue-thunder-edition"] = True
SENTRY_FEATURES["organizations:sourcemaps-upload-release-as-artifact-bundle"] = True
SENTRY_FEATURES["organizations:standalone-span-ingestion"] = True
SENTRY_FEATURES["organizations:starfish-browser-resource-module-image-view"] = True
SENTRY_FEATURES["organizations:starfish-browser-resource-module-ui"] = True
SENTRY_FEATURES["organizations:starfish-browser-webvitals"] = True
SENTRY_FEATURES["organizations:starfish-browser-webvitals-pageoverview-v2"] = True
SENTRY_FEATURES["organizations:starfish-browser-webvitals-replace-fid-with-inp"] = True
SENTRY_FEATURES["organizations:starfish-browser-webvitals-use-backend-scores"] = True
SENTRY_FEATURES["organizations:starfish-mobile-appstart"] = True
SENTRY_FEATURES["organizations:statistical-detectors-root-cause-analysis"] = True
SENTRY_FEATURES["organizations:streamline-targeting-context"] = True
SENTRY_FEATURES["organizations:team-workflow-notification"] = True
SENTRY_FEATURES["organizations:trace-view-v1"] = True
SENTRY_FEATURES["organizations:widget-viewer-modal-minimap"] = True
SENTRY_FEATURES["projects:auto-associate-commits-to-release"] = True
SENTRY_FEATURES["projects:custom-inbound-filters"] = True
SENTRY_FEATURES["projects:discard-groups"] = True
SENTRY_FEATURES["projects:extract-standalone-spans"] = True
SENTRY_FEATURES["projects:issue-priority"] = True
SENTRY_FEATURES["projects:plugins"] = True
SENTRY_FEATURES["projects:rate-limits"] = True
SENTRY_FEATURES["projects:servicehooks"] = True
SENTRY_FEATURES["projects:similarity-embeddings"] = True
SENTRY_FEATURES["projects:span-metrics-extraction"] = True
SENTRY_FEATURES["projects:span-metrics-extraction-addons"] = True
SENTRY_FEATURES["projects:suspect-resolutions"] = True
SENTRY_FEATURES["auth:register"] = False
SENTRY_FEATURES["organizations:data-forwarding"] = False
SENTRY_FEATURES["organizations:invite-members"] = False
SENTRY_FEATURES["organizations:sso-basic"] = False
SENTRY_FEATURES["organizations:sso-saml2"] = False
SENTRY_FEATURES["projects:data-forwarding"] = False
SENTRY_FEATURES["organizations:open-ai-suggestion"] = False
SENTRY_FEATURES["organizations:performance-anomaly-detection-ui"] = False

[doc-sheet]

In-between first and second I added

+SENTRY_FEATURES["organizations:dashboards-mep"] = True
+SENTRY_FEATURES["organizations:indexed-spans-extraction"] = True
+SENTRY_FEATURES["organizations:mep-rollout-flag"] = True
+SENTRY_FEATURES["projects:span-metrics-extraction"] = True
+SENTRY_FEATURES["projects:span-metrics-extraction-addons"] = True

[aldy505]

Ah. So you're not enabling this https://github.com/getsentry/self-hosted/issues/3592. Can you try to enable these:

"organizations:standalone-span-ingestion",
"organizations:starfish-mobile-appstart",
"organizations:insights-mobile-screens-module",

[doc-sheet]

no effect :(

At this point I'm curios if I have required data to show on this page.

After https://github.com/getsentry/self-hosted/issues/3726#issuecomment-2931099971 I see a lot of new messages in kafka but I don't know if it is THE metrics for insights.

[aldy505]

It's been a few days, is there anything changing on your web UI?

[doc-sheet]

Well. I'm trying to dig in at spare time but understand nothing yet.

Mobile insights page still empty, but if I open insights from Traces Explorer (Traces -> trace id -> span id -> View Summary) it opens different insights page /insights/summary/ which have some data that could potentially be in /insights/mobile/ Like Cold App Start spans ui.load spans (App Start) etc.

I don't know what should be on mobile insights to compare. All requests from that page get empty data like

fields	Object { }
units	Object { }
isMetricsData	false
isMetricsExtractedData	false
tips	Object { }
datasetReason	"unchanged"
dataset	"spans"
dataScanned	"full

Why and where it come from I have no idea.

[doc-sheet]

It should be this view https://github.com/getsentry/sentry/blob/7455b9d2199664f4b90c9bcce0db17e46438fbc9/src/sentry/api/endpoints/organization_events.py#L299

I'll check listed feature flags.

[doc-sheet]

It looks like I have to enable https://github.com/getsentry/self-hosted/issues/3592 with all new containers.

[doc-sheet]

I guess I found something in here

let columnTitles = [
  { title: 'transaction' },
  { title: 'operation' },
  { title: 'project' },
  { title: 'tpm' },
  { title: 'slow frame %' },
  { title: 'frozen frame %' },
  { title: 'stall %' },
  { title: 'users' },
  { title: 'user misery' },
];

columnTitles.length
// 9

columnTitles = [
  ...columnTitles.slice(0, 5),
  { title: 'ttid' },
  ...columnTitles.slice(5, 0),
];

columnTitles.length
// 6

[aldy505]

So.. did you got it working? Or anywhere close?

[doc-sheet]

Nope. I disabled eap feature flags again until I add all required components. Then spent few hours in devtools to know where "is undefined" error is coming from.

And then I somehow caught more readable error

Cannot read properties of undefined (reading 'title')

[doc-sheet]

I suspect that code

columnTitles = [
  ...columnTitles.slice(0, 5),
  { title: 'ttid' },
  ...columnTitles.slice(5, 0),
];

Instead of just inserting "ttid" in the middle loose last part of an array.

[aldy505]

I have no idea on how to troubleshoot this any further. Either this will go into the backlog pile, or.. come to Discord and we'll do a debugging session (through text).

[doc-sheet]

Well. I initially created issue in https://github.com/getsentry/sentry because it looks like js issue not specific to self-hosted.

[doc-sheet]

Thank you, I'll come to discord.

[doc-sheet]

So problem is in combination of organizations:mobile-vitals flag and https://github.com/getsentry/sentry/issues/94014 bug