Chore: Add boundaryNames to ErrorBoundaries (#112329)

Add boundaryNames to ErrorBoundaries
This commit is contained in:
Tobias Skarhed
2025-10-13 16:30:31 +02:00
committed by GitHub
parent 3c90af831a
commit 4e901b9317
8 changed files with 48 additions and 18 deletions
+1 -1
View File
@@ -108,7 +108,7 @@ export class AppWrapper extends Component<AppWrapperProps, AppWrapperState> {
return (
<Provider store={store}>
<ErrorBoundaryAlert style="page">
<ErrorBoundaryAlert boundaryName="app-wrapper" style="page">
<GrafanaContext.Provider value={app.context}>
<ThemeProvider value={config.theme2}>
<CacheProvider name={this.iconCacheID}>
@@ -122,7 +122,7 @@ export function AppChrome({ children }: Props) {
[styles.scopesDashboardsContainerDocked]: menuDockedAndOpen,
})}
>
<ErrorBoundaryAlert>
<ErrorBoundaryAlert boundaryName="scopes-dashboards">
<ScopesDashboards />
</ErrorBoundaryAlert>
</div>
+1 -1
View File
@@ -45,7 +45,7 @@ export function GrafanaRoute(props: Props) {
navigationLogger('GrafanaRoute', false, 'Rendered', props.route);
return (
<ErrorBoundary dependencies={[props.route]}>
<ErrorBoundary boundaryName="grafana-route" dependencies={[props.route]}>
{({ error, errorInfo }) => {
if (error) {
return <GrafanaRouteError error={error} errorInfo={errorInfo} />;
+41 -11
View File
@@ -707,29 +707,59 @@ export class Explore extends PureComponent<Props, ExploreState> {
return (
<main className={cx(styles.exploreMain)} style={{ width }}>
<ErrorBoundaryAlert>
<ErrorBoundaryAlert boundaryName="explore-main">
{showPanels && (
<>
{showMetrics && graphResult && (
<ErrorBoundaryAlert>{this.renderGraphPanel(width)}</ErrorBoundaryAlert>
<ErrorBoundaryAlert boundaryName="explore-graph-panel">
{this.renderGraphPanel(width)}
</ErrorBoundaryAlert>
)}
{showRawPrometheus && (
<ErrorBoundaryAlert>{this.renderRawPrometheus(width)}</ErrorBoundaryAlert>
<ErrorBoundaryAlert boundaryName="explore-raw-prometheus">
{this.renderRawPrometheus(width)}
</ErrorBoundaryAlert>
)}
{showTable && (
<ErrorBoundaryAlert boundaryName="explore-table-panel">
{this.renderTablePanel(width)}
</ErrorBoundaryAlert>
)}
{showLogs && (
<ErrorBoundaryAlert boundaryName="explore-logs-panel">
{this.renderLogsPanel(width)}
</ErrorBoundaryAlert>
)}
{showTable && <ErrorBoundaryAlert>{this.renderTablePanel(width)}</ErrorBoundaryAlert>}
{showLogs && <ErrorBoundaryAlert>{this.renderLogsPanel(width)}</ErrorBoundaryAlert>}
{showNodeGraph && (
<ErrorBoundaryAlert>{this.renderNodeGraphPanel()}</ErrorBoundaryAlert>
<ErrorBoundaryAlert boundaryName="explore-node-graph-panel">
{this.renderNodeGraphPanel()}
</ErrorBoundaryAlert>
)}
{showFlameGraph && (
<ErrorBoundaryAlert>{this.renderFlameGraphPanel()}</ErrorBoundaryAlert>
<ErrorBoundaryAlert boundaryName="explore-flame-graph-panel">
{this.renderFlameGraphPanel()}
</ErrorBoundaryAlert>
)}
{showTrace && (
<ErrorBoundaryAlert boundaryName="explore-trace-view-panel">
{this.renderTraceViewPanel()}
</ErrorBoundaryAlert>
)}
{showTrace && <ErrorBoundaryAlert>{this.renderTraceViewPanel()}</ErrorBoundaryAlert>}
{showLogsSample && (
<ErrorBoundaryAlert>{this.renderLogsSamplePanel()}</ErrorBoundaryAlert>
<ErrorBoundaryAlert boundaryName="explore-logs-sample-panel">
{this.renderLogsSamplePanel()}
</ErrorBoundaryAlert>
)}
{showCustom && (
<ErrorBoundaryAlert boundaryName="explore-custom-panel">
{this.renderCustom(width)}
</ErrorBoundaryAlert>
)}
{showNoData && (
<ErrorBoundaryAlert boundaryName="explore-no-data">
{this.renderNoData()}
</ErrorBoundaryAlert>
)}
{showCustom && <ErrorBoundaryAlert>{this.renderCustom(width)}</ErrorBoundaryAlert>}
{showNoData && <ErrorBoundaryAlert>{this.renderNoData()}</ErrorBoundaryAlert>}
</>
)}
</ErrorBoundaryAlert>
+1 -1
View File
@@ -86,7 +86,7 @@ function ExplorePageContent(props: GrafanaRouteComponentProps<{}, ExploreQueryPa
>
{panes.map(([exploreId, pane]) => {
return (
<ErrorBoundaryAlert key={exploreId} style="page">
<ErrorBoundaryAlert boundaryName="explore-pane" key={exploreId} style="page">
{pane.initialized ? (
<ExplorePaneContainer exploreId={exploreId} />
) : (
@@ -92,7 +92,7 @@ export function PanelRenderer<P extends object = {}, F extends object = {}>(prop
const PanelComponent = plugin.panel;
return (
<ErrorBoundaryAlert dependencies={[plugin, data]}>
<ErrorBoundaryAlert boundaryName="panel-renderer" dependencies={[plugin, data]}>
<PluginContextProvider meta={plugin.meta}>
<PanelComponent
id={1}
@@ -502,7 +502,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
onOpen={onQueryOpenChanged}
>
<div className={rowClasses} id={this.id}>
<ErrorBoundaryAlert>
<ErrorBoundaryAlert boundaryName="query-editor-operation-row">
{showingHelp && DatasourceCheatsheet && (
<OperationRowHelp>
<DatasourceCheatsheet
@@ -108,7 +108,7 @@ export const ScopesSelector = () => {
{opened && (
<Drawer title={t('scopes.selector.title', 'Select scopes')} size="sm" onClose={closeAndReset}>
<ErrorBoundary>
<ErrorBoundary boundaryName="scopes-selector">
{({ error, errorInfo }) => {
if (error) {
return (