PromucFlow_constructor/app/client/src/sagas/ActionExecution/geolocationSaga.ts

196 lines
5.9 KiB
TypeScript
Raw Normal View History

fix: access outer scope variables inside callbacks (#20168) ## Description Any platform function that accepts a callback were unable to access the variables declared in its parent scopes. This was a implementation miss when we originally designed platform functions and again when we turned almost every platform function into a Promise. This PR fixes this limitation along with some other edge cases. - Access outer scope variables inside the callback of run, postMessage, setInterval, getGeoLocation and watchGeolocation functions. - Fixes certain edge cases where functions with callbacks when called inside the then block doesn't get executed. Eg `showAlert.then(() => /* Doesn't execute */ Api1.run(() => {}))` - Changes the implementation of all the platform function in appsmith to maintain the execution metadata (info on from where a function was invoked, event associated with it etc) #### Refactor changes - Added a new folder **_fns_** that would now hold all the platform functions. - Introduced a new ExecutionMetadata singleton class that is now responsible for hold all the meta data related to the current evaluation. - Remove TRIGGER_COLLECTOR array where all callback based platform functions were batched and introduced an Event Emitter based implementation to handle batched fn calls. - All callback based functions now emits event when invoked. These events have handlers attached to the TriggerEmitter object. These handler does the job of batching these invocations and telling the main thread. It also ensures that platform fn calls that gets triggered out the the context of a request/response cycle work. #### Architecture <img width="751" alt="Screenshot 2023-02-07 at 10 04 26" src="https://user-images.githubusercontent.com/32433245/217259200-5eac71bc-f0d3-4d3c-9b69-2a8dc81351bc.png"> Fixes #13156 Fixes #20225 ## Type of change - Bug fix (non-breaking change which fixes an issue) - Refactor ## How Has This Been Tested? - Jest - Cypress - Manual ### Test Plan - [ ] https://github.com/appsmithorg/TestSmith/issues/2181 - [ ] https://github.com/appsmithorg/TestSmith/issues/2182 - [ ] Post message - https://appsmith-git-chore-outer-scope-variable-access-get-appsmith.vercel.app/app/post-msg-app/page1-635fcfba2987b442a739b938/edit - [ ] Apps: https://appsmith-git-chore-outer-scope-variable-access-get-appsmith.vercel.app/app/earworm-1/home-630c9d85b4658d0f257c4987/edit - [ ] https://appsmith-git-chore-outer-scope-variable-access-get-appsmith.vercel.app/app/automation-test-cases/page-1-630c6b90d4ecd573f6bb01e9/edit#0hmn8m90ei ### Issues raised during DP testing > Link issues raised during DP testing for better visiblity and tracking (copy link from comments dropped on this PR) ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [x] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [ ] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [ ] Cypress test cases have been added and approved by either SDET or manual QA - [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA - [ ] Added Test Plan Approved label after reviewing all Cypress test
2023-02-11 18:33:20 +00:00
import { EventType } from "constants/AppsmithActionConstants/ActionConstants";
import { TriggerMeta } from "@appsmith/sagas/ActionExecution/ActionExecutionSagas";
import { call, put, spawn, take } from "redux-saga/effects";
import { logActionExecutionError } from "sagas/ActionExecution/errorUtils";
import { setUserCurrentGeoLocation } from "actions/browserRequestActions";
import { Channel, channel } from "redux-saga";
import { evalWorker } from "sagas/EvaluationsSaga";
import {
TGetGeoLocationDescription,
TWatchGeoLocationDescription,
} from "workers/Evaluation/fns/geolocationFns";
class GeoLocationError extends Error {
constructor(message: string, private responseData?: any) {
super(message);
}
}
let successChannel: Channel<GeolocationPosition> | null = null;
let errorChannel: Channel<GeolocationPositionError> | null = null;
// Making the getCurrentPosition call in a promise fashion
export const getUserLocation = (options?: PositionOptions) =>
new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(
(location) => resolve(location),
(error) => reject(error),
options,
);
});
/**
* We need to extract and set certain properties only because the
* return value is a "class" with functions as well and
* that cant be stored in the data tree
**/
export const extractGeoLocation = (
location: GeolocationPosition,
): GeolocationPosition => {
const {
coords: {
accuracy,
altitude,
altitudeAccuracy,
heading,
latitude,
longitude,
speed,
},
} = location;
const coords: GeolocationCoordinates = {
altitude,
altitudeAccuracy,
heading,
latitude,
longitude,
accuracy,
speed,
};
return {
coords,
timestamp: location.timestamp,
};
};
/**
* When location access is turned off in the browser, the error is a GeolocationPositionError instance
* We can't pass this instance to the worker thread as it uses structured cloning for copying the objects
* https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
* It doesn't support some entities like DOM Nodes, functions etc. for copying
* And will throw an error if we try to pass it
* GeolocationPositionError instance doesn't exist in worker thread hence not supported by structured cloning
* https://developer.mozilla.org/en-US/docs/Web/API/GeolocationPositionError
* Hence we're creating a new object with same structure which can be passed to the worker thread
*/
function sanitizeGeolocationError(error: GeolocationPositionError) {
const { code, message } = error;
return {
code,
message,
};
}
function* successCallbackHandler(listenerId?: string) {
let payload: GeolocationPosition;
if (!successChannel) return;
while ((payload = yield take(successChannel))) {
const currentLocation = extractGeoLocation(payload);
yield put(setUserCurrentGeoLocation(currentLocation));
if (listenerId)
yield call(evalWorker.ping, { data: currentLocation }, listenerId);
}
}
function* errorCallbackHandler(triggerMeta: TriggerMeta, listenerId?: string) {
if (!errorChannel) return;
let error: GeolocationPositionError;
while ((error = yield take(errorChannel))) {
if (listenerId)
yield call(
evalWorker.ping,
{ error: sanitizeGeolocationError(error) },
listenerId,
);
logActionExecutionError(
error.message,
triggerMeta.source,
triggerMeta.triggerPropertyName,
);
}
}
export function* getCurrentLocationSaga(
action: TGetGeoLocationDescription,
_: EventType,
triggerMeta: TriggerMeta,
) {
const { payload: actionPayload } = action;
try {
const location: GeolocationPosition = yield call(
getUserLocation,
actionPayload.options,
);
const currentLocation = extractGeoLocation(location);
yield put(setUserCurrentGeoLocation(currentLocation));
return currentLocation;
} catch (error) {
logActionExecutionError(
(error as Error).message,
triggerMeta.source,
triggerMeta.triggerPropertyName,
);
if (error instanceof GeolocationPositionError) {
const sanitizedError = sanitizeGeolocationError(error);
throw new GeoLocationError(sanitizedError.message, [sanitizedError]);
}
}
}
let watchId: number | undefined;
export function* watchCurrentLocation(
action: TWatchGeoLocationDescription,
_: EventType,
triggerMeta: TriggerMeta,
) {
const { payload: actionPayload } = action;
if (watchId) {
// When a watch is already active, we will not start a new watch.
// at a given point in time, only one watch is active
logActionExecutionError(
"A watchLocation is already active. Clear it before before starting a new one",
triggerMeta.source,
triggerMeta.triggerPropertyName,
);
return;
}
successChannel = channel<GeolocationPosition>();
errorChannel = channel<GeolocationPositionError>();
yield spawn(successCallbackHandler, actionPayload.listenerId);
yield spawn(errorCallbackHandler, triggerMeta, actionPayload.listenerId);
watchId = navigator.geolocation.watchPosition(
(location) => {
successChannel?.put(location);
},
(error) => {
// When location is turned off, the watch fails but watchId is generated
// Resetting the watchId to undefined so that a new watch can be started
if (watchId) {
navigator.geolocation.clearWatch(watchId);
watchId = undefined;
}
errorChannel?.put(error);
},
actionPayload.options,
);
}
export function* stopWatchCurrentLocation(
eventType: EventType,
triggerMeta: TriggerMeta,
) {
if (watchId === undefined) {
logActionExecutionError(
"No location watch active",
triggerMeta.source,
triggerMeta.triggerPropertyName,
);
return;
}
navigator.geolocation.clearWatch(watchId);
watchId = undefined;
successChannel?.close();
errorChannel?.close();
}