Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Masking user data in mixpanel session recordings #38267

Merged
merged 7 commits into from
Dec 20, 2024
Merged

chore: Masking user data in mixpanel session recordings #38267

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ef53807
chore: Masking for response tables
hetunandu Dec 20, 2024
bb1d394
Merge branch 'release' into chore/mixpanel-add-masking-classes
hetunandu Dec 20, 2024
9a4b074
chore: Peek overlay, other response types and logs
hetunandu Dec 20, 2024
0caca19
chore: Widgets masking
hetunandu Dec 20, 2024
71dc05a
chore: Add feature flagging support
hetunandu Dec 20, 2024
f0c0d05
Merge branch 'release' into chore/mixpanel-add-masking-classes
hetunandu Dec 20, 2024
15f654e
chore: Update selector
hetunandu Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions app/client/src/PluginActionEditor/components/PluginActionResponse/components/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,11 @@ function Table(props: TableProps) {
{/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
{row.cells.map((cell: any, cellIndex: number) => {
return (
<div {...cell.getCellProps()} className="td" key={cellIndex}>
<div
{...cell.getCellProps()}
className="td mp-mask"
key={cellIndex}
>
<CellWrapper>{cell.render("Cell")}</CellWrapper>
</div>
);
Expand Down Expand Up @@ -344,7 +348,7 @@ function Table(props: TableProps) {
{headerGroups.map((headerGroup: any, index: number) => (
<div
{...headerGroup.getHeaderGroupProps()}
className="tr"
className="tr mp-mask"
key={index}
>
{headerGroup.headers.map(
Expand Down
1 change: 1 addition & 0 deletions app/client/src/components/editorComponents/CodeEditor/PeekOverlayPopup/PeekOverlayPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,7 @@ export function PeekOverlayPopUpContent(
>
{(dataType === "object" || dataType === "array") && jsData !== null && (
<JsonWrapper
className="mp-mask"
onClick={objectCollapseAnalytics}
style={{
minHeight: "20px",
Expand Down
6 changes: 3 additions & 3 deletions app/client/src/components/editorComponents/Debugger/LogItem/LogItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,7 @@ export function LogItem(props: LogItemProps) {
})}
{props.state && (
<JsonWrapper
className="t--debugger-log-state"
className="t--debugger-log-state mp-mask"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Additional sensitive data displays found in ErrorLogs that need masking

The LogCollapseData.tsx component also uses ReactJson to display state data but lacks the mp-mask class. Consider applying consistent masking across all debugger data displays.

  • app/client/src/components/editorComponents/Debugger/ErrorLogs/components/LogCollapseData.tsx: Add mp-mask class to the JsonWrapper component displaying state data
🔗 Analysis chain

LGTM! Comprehensive masking implementation

The mp-mask class is consistently applied across all data display elements, covering both JSON and text content.

Also applies to: 328-328, 337-337

Let me verify if the masking is consistently implemented across other debugger components.

Let me check if there are any other sensitive data displays in the debugger components that might need masking.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Verify consistent masking across debugger components
rg -A 2 "className.*debugger.*mp-mask"

Length of output: 1124

Script:

#!/bin/bash
# Search for other debugger components that might need masking
rg -l "className.*debugger" | grep -i "debug"

# Check for any existing mp-mask usage in debugger components
rg "mp-mask" $(rg -l "className.*debugger" | grep -i "debug")

Length of output: 2771

Script:

#!/bin/bash
# Search for JSON or data display components in debugger that might need masking
rg -A 2 "(JsonView|ReactJson|data-value|console\.log)" $(rg -l "className.*debugger" | grep -i "debug")

Length of output: 3035

onClick={(e) => e.stopPropagation()}
>
<ReactJson src={props.state} {...reactJsonProps} />
Expand All @@ -325,7 +325,7 @@ export function LogItem(props: LogItemProps) {
if (typeof logDatum === "object") {
return (
<JsonWrapper
className="t--debugger-console-log-data"
className="t--debugger-console-log-data mp-mask"
key={Math.random()}
onClick={(e) => e.stopPropagation()}
>
Expand All @@ -334,7 +334,7 @@ export function LogItem(props: LogItemProps) {
);
} else {
return (
<span className="debugger-label" key={Math.random()}>
<span className="debugger-label mp-mask" key={Math.random()}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hope you realize that this random key is your doing now :)

{`${logDatum} `}
</span>
);
Expand Down
1 change: 1 addition & 0 deletions app/client/src/components/editorComponents/ReadOnlyEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ function ReadOnlyEditor(props: Props) {
isReadOnly: true,
isRawView: props.isRawView,
border: CodeEditorBorder.NONE,
className: "mp-mask",
};

return <LazyCodeEditor {...editorProps} />;
Expand Down
6 changes: 5 additions & 1 deletion app/client/src/pages/AppViewer/AppPage/AppPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,11 @@ export function AppPage(props: AppPageProps) {
ref={pageViewWrapperRef}
sidebarWidth={sidebarWidth}
>
<PageView data-testid="t--app-viewer-page" width={width}>
<PageView
className="mp-mask"
data-testid="t--app-viewer-page"
width={width}
>
{widgetsStructure.widgetId &&
renderAppsmithCanvas(widgetsStructure as WidgetProps)}
</PageView>
Expand Down
2 changes: 1 addition & 1 deletion app/client/src/pages/Editor/Canvas.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ const Canvas = (props: CanvasProps) => {
<Wrapper
$enableMainCanvasResizer={!!props.enableMainCanvasResizer}
background={isAnvilLayout ? "" : backgroundForCanvas}
className={`relative t--canvas-artboard ${paddingBottomClass} ${marginHorizontalClass} ${getViewportClassName(
className={`relative t--canvas-artboard mp-mask ${paddingBottomClass} ${marginHorizontalClass} ${getViewportClassName(
canvasWidth,
)}`}
data-testid={"t--canvas-artboard"}
Expand Down
2 changes: 2 additions & 0 deletions app/client/src/utils/Analytics/mixpanel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ class MixpanelSingleton {
this.mixpanel = loadedMixpanel;
this.mixpanel.init(mixpanel.apiKey, {
record_sessions_percent: 100,
record_block_selector: ".mp-block",
record_mask_text_selector: ".mp-mask",
});

await this.addSegmentMiddleware();
Expand Down
Loading