chore: adding addition telemetry to cover JSONForm widget's performance (#35229)

## Description
We need to profile a few functions in JSON forms, observed that in some
customer's apps the following functions
- clearErrors
- parseAndSaveFieldState
takes as much 10% in main thread scripting. We are adding setError just
to check if this function is performant or not as well.


Fixes #35228 

> [!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  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10114403810>
> Commit: 90f5c31b2fc05e225cb827ec680c4bd68dc1e95f
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10114403810&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity`
> Spec:
> <hr>Fri, 26 Jul 2024 16:46:46 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


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

- **New Features**
- Introduced telemetry tracking around function executions to improve
observability and performance monitoring.
- Enhanced error-clearing logic in the form widget to include telemetry
tracing for better analysis.

- **Improvements**
- Added performance tracking to the `parseAndSaveFieldState` method in
the JSONFormWidget for optimized performance insights.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Vemparala Surya Vamsi 2024-07-29 09:57:54 +05:30 committed by GitHub
parent 4bf6671cc4
commit 492fb353d7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 23 additions and 4 deletions

View File

@ -87,6 +87,17 @@ export function setAttributesToSpan(
span?.setAttributes(spanAttributes);
}
export const startAndEndSpanForFn = <T>(
spanName: string,
spanAttributes: SpanAttributes = {},
fn: () => T,
) => {
const span = startRootSpan(spanName, spanAttributes);
const res: T = fn();
span.end();
return res;
};
export function wrapFnWithParentTraceContext(parentSpan: Span, fn: () => any) {
const parentContext = trace.setSpan(context.active(), parentSpan);
return context.with(parentContext, fn);

View File

@ -7,6 +7,7 @@ import { klona } from "klona";
import FormContext from "../FormContext";
import type { FieldType } from "../constants";
import { startAndEndSpanForFn } from "UITelemetry/generateTraces";
export interface UseRegisterFieldValidityProps {
isValid: boolean;
@ -34,10 +35,14 @@ function useRegisterFieldValidity({
setTimeout(() => {
try {
isValid
? clearErrors(fieldName)
: setError(fieldName, {
type: fieldType,
message: "Invalid field",
? startAndEndSpanForFn("JSONFormWidget.clearErrors", {}, () => {
clearErrors(fieldName);
})
: startAndEndSpanForFn("JSONFormWidget.setError", {}, () => {
setError(fieldName, {
type: fieldType,
message: "Invalid field",
});
});
} catch (e) {
Sentry.captureException(e);

View File

@ -68,6 +68,7 @@ import {
ONSUBMIT_NOT_CONFIGURED_MESSAGE,
} from "../constants/messages";
import { createMessage } from "@appsmith/constants/messages";
import { endSpan, startRootSpan } from "UITelemetry/generateTraces";
const SUBMIT_BUTTON_DEFAULT_STYLES = {
buttonVariant: ButtonVariantTypes.PRIMARY,
@ -651,6 +652,7 @@ class JSONFormWidget extends BaseWidget<
schema: Schema,
afterUpdateAction?: ExecuteTriggerPayload,
) => {
const span = startRootSpan("JSONFormWidget.parseAndSaveFieldState");
const fieldState = generateFieldState(schema, metaInternalFieldState);
const action = klona(afterUpdateAction);
@ -664,6 +666,7 @@ class JSONFormWidget extends BaseWidget<
actionPayload,
);
}
endSpan(span);
};
onSubmit = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {