PromucFlow_constructor/app/client/src/index.tsx
Rajat Agrawal 021b4177ea
chore: Fix bugs in logic for capturing web vitals for client (#32371)
## Description

This PR fixes logic to capture traces only when both end time and start
time are available for a span. The hypothesis is that if a span is
captured but its end time is missing, new relic will add current time as
end time. This end time may be added after a few minutes.

This is skewing the metrics for evaluation traces.

The PR also does refactor of the traces code for general better
readability.

Fixes #`Issue Number`  
_or_  
Fixes `Issue URL`
> [!WARNING]  
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags="@tag.Sanity"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!IMPORTANT]  
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8612102498>
> Commit: `64b79261b44cc96c16429bf043565cc92d9d7992`
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8612102498&attempt=1"
target="_blank">Click here!</a>
> All cypress tests have passed 🎉🎉🎉

<!-- end of auto-generated comment: Cypress test results  -->














<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Refactor**
- Unified span creation for telemetry with improved parameter handling
and attribute management.
- Enhanced span timing and nesting logic for better performance
tracking.
- **Chores**
- Simplified telemetry tracing logic across various modules by
standardizing the use of new span management functions.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-04-09 14:25:46 +05:30

116 lines
3.2 KiB
TypeScript
Executable File

// This file must be executed as early as possible to ensure the preloads are triggered ASAP
import "./preload-route-chunks";
import React from "react";
import "./wdyr";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import "./index.css";
import { ThemeProvider } from "styled-components";
import { appInitializer } from "utils/AppUtils";
import store, { runSagaMiddleware } from "./store";
import { LayersContext, Layers } from "constants/Layers";
import AppRouter from "@appsmith/AppRouter";
import * as Sentry from "@sentry/react";
import { getCurrentThemeDetails } from "selectors/themeSelectors";
import { connect } from "react-redux";
import type { AppState } from "@appsmith/reducers";
import { Toast } from "design-system";
import "./assets/styles/index.css";
import "./polyfills";
import GlobalStyles from "globalStyles";
// enable autofreeze only in development
import { setAutoFreeze } from "immer";
import AppErrorBoundary from "./AppErrorBoundry";
import log from "loglevel";
import { getAppsmithConfigs } from "@appsmith/configs";
import { BrowserAgent } from "@newrelic/browser-agent/loaders/browser-agent";
const { newRelic } = getAppsmithConfigs();
const { enableNewRelic } = newRelic;
const newRelicBrowserAgentConfig = {
init: {
distributed_tracing: { enabled: true },
privacy: { cookies_enabled: true },
ajax: { deny_list: [newRelic.browserAgentEndpoint] },
},
info: {
beacon: newRelic.browserAgentEndpoint,
errorBeacon: newRelic.browserAgentEndpoint,
licenseKey: newRelic.browserAgentlicenseKey,
applicationID: newRelic.applicationId,
sa: 1,
},
loader_config: {
accountID: newRelic.accountId,
trustKey: newRelic.accountId,
agentID: newRelic.applicationId,
licenseKey: newRelic.browserAgentlicenseKey,
applicationID: newRelic.applicationId,
},
};
// The agent loader code executes immediately on instantiation.
if (enableNewRelic) {
new BrowserAgent(newRelicBrowserAgentConfig);
}
const shouldAutoFreeze = process.env.NODE_ENV === "development";
setAutoFreeze(shouldAutoFreeze);
runSagaMiddleware();
appInitializer();
enableNewRelic &&
(async () => {
try {
await import(
/* webpackChunkName: "otlpTelemetry" */ "./UITelemetry/auto-otel-web.js"
);
} catch (e) {
log.error("Error loading telemetry script", e);
}
})();
function App() {
return (
<Sentry.ErrorBoundary fallback={"An error has occured"}>
<Provider store={store}>
<LayersContext.Provider value={Layers}>
<ThemedAppWithProps />
</LayersContext.Provider>
</Provider>
</Sentry.ErrorBoundary>
);
}
class ThemedApp extends React.Component<{
currentTheme: any;
}> {
render() {
return (
<ThemeProvider theme={this.props.currentTheme}>
<Toast />
<GlobalStyles />
<AppErrorBoundary>
<AppRouter />
</AppErrorBoundary>
</ThemeProvider>
);
}
}
const mapStateToProps = (state: AppState) => ({
currentTheme: getCurrentThemeDetails(state),
});
const ThemedAppWithProps = connect(mapStateToProps)(ThemedApp);
ReactDOM.render(<App />, document.getElementById("root"));
// expose store when run in Cypress
if ((window as any).Cypress) {
(window as any).store = store;
}