Remove LogRocket from Devtools (#10577)

replayio · Jun 19, 2024 · 59370c8 · 59370c8
1 parent 6b6ecb0
commit 59370c8
Show file tree

Hide file tree

Showing 38 changed files with 37 additions and 242 deletions.
diff --git a/docs/codebase-notes/replay-preferences-implementations.md b/docs/codebase-notes/replay-preferences-implementations.md
@@ -134,7 +134,6 @@
 export type ExperimentalUserSettings = {
   apiKeys: ApiKey[];
   defaultWorkspaceId: null | string;
-  disableLogRocket: boolean;
   enableTeams: boolean;
   enableLargeText: boolean;
 };
@@ -164,7 +163,6 @@ export type CombinedExperimentalUserSettings = ExperimentalUserSettings &
 
 - `ui/actions/session.ts`: `disableCache`,  `listenForMetrics`
 - `ui/components/DevTools.tsx`: `sidePanelSize`
-- `ui/components/Redacted.tsx`: `showRedactions`
 - `ui/components/SkeletonLoader.tsx`: `sidePanelSize`
 - `ui/components/Viewer.tsx`: `secondaryPanelHeight`,  `sidePanelSize`,  `toolboxSize`
 - `ui/hooks/settings.ts`: all,  passed as key to `useStringPref` and `useBoolPref`

diff --git a/package.json b/package.json
diff --git a/packages/replay-next/components/AvatarImage.tsx b/packages/replay-next/components/AvatarImage.tsx
@@ -47,7 +47,6 @@ export default function AvatarImage({ className, name, src, title, ...rest }: Pr
       <img
         {...rest}
         className={`${styles.Image} ${className}`}
-        data-private
         onError={onError}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}

diff --git a/packages/replay-next/components/SyntaxHighlighter/SyntaxHighlighter.tsx b/packages/replay-next/components/SyntaxHighlighter/SyntaxHighlighter.tsx
@@ -39,7 +39,7 @@ export const SyntaxHighlighter = memo(function SyntaxHighlighter({
   );
 
   return (
-    <div className={`${styles.SyntaxHighlighter} ${className}`} title={code} {...rest} data-private>
+    <div className={`${styles.SyntaxHighlighter} ${className}`} title={code} {...rest}>
       {formattedTokens.map((tokens, index) =>
         lineRenderer({
           className: lineClassName,

diff --git a/packages/replay-next/components/inspector/Inspector.tsx b/packages/replay-next/components/inspector/Inspector.tsx
@@ -37,11 +37,7 @@ export default function Inspector({
     return keyValue;
   } else {
     return (
-      <div
-        className={`${styles.Inspector} ${className || ""}`}
-        data-private
-        data-test-name="InspectorRoot"
-      >
+      <div className={`${styles.Inspector} ${className || ""}`} data-test-name="InspectorRoot">
         {keyValue}
       </div>
     );

diff --git a/packages/replay-next/components/inspector/SourcePreviewInspector.tsx b/packages/replay-next/components/inspector/SourcePreviewInspector.tsx
@@ -33,7 +33,6 @@ export default forwardRef<HTMLDivElement, Props>(function SourcePreviewInspector
       return (
         <div
           className={`${styles.SourcePreviewInspector} ${className}`}
-          data-private
           data-test-name="SourcePreviewInspector"
           ref={ref}
         >
@@ -48,7 +47,7 @@ export default forwardRef<HTMLDivElement, Props>(function SourcePreviewInspector
           data-test-name="SourcePreviewInspector"
           ref={ref}
         >
-          <div className={styles.InspectorWrapper} data-private>
+          <div className={styles.InspectorWrapper}>
             <Suspense fallback={<Loader />}>
               <Inspector
                 className={styles.Inspector}

diff --git a/packages/replay-next/components/search-files/ResultsListRow.tsx b/packages/replay-next/components/search-files/ResultsListRow.tsx
@@ -108,7 +108,7 @@ function LocationRow({
         header={
           <>
             <Icon className={styles.LocationIcon} type="file" />
-            <div className={styles.Location} data-private title={locationString}>
+            <div className={styles.Location} title={locationString}>
               {locationString}
             </div>
             <div className={styles.Count}>
@@ -153,7 +153,6 @@ function MatchRow({
     <div
       className={styles.MatchRow}
       data-hit-count={hitCount}
-      data-private
       data-test-name="SearchFiles-ResultRow"
       data-test-type="Match"
       onClick={() => {

diff --git a/packages/replay-next/components/search-files/SearchFiles.tsx b/packages/replay-next/components/search-files/SearchFiles.tsx
@@ -131,7 +131,6 @@ export default function SearchFiles({ limit }: { limit?: number }) {
           <input
             autoFocus
             className={styles.Input}
-            data-private
             data-test-id="FileSearch-Input"
             onChange={onChange(setQueryForDisplay)}
             onClick={onInputClick}
@@ -168,7 +167,6 @@ export default function SearchFiles({ limit }: { limit?: number }) {
           <Icon className={styles.Icon} type="folder-open" />
           <input
             className={styles.Input}
-            data-private
             data-test-id="FileInclude-Input"
             onChange={onChange(setIncludedFiles)}
             onClick={onInputClick}
@@ -192,7 +190,6 @@ export default function SearchFiles({ limit }: { limit?: number }) {
           <Icon className={styles.Icon} type="folder-closed" />
           <input
             className={styles.Input}
-            data-private
             data-test-id="FileExclude-Input"
             onChange={onChange(setExcludedFiles)}
             onClick={onInputClick}

diff --git a/packages/replay-next/components/sources/PreviewPopup.tsx b/packages/replay-next/components/sources/PreviewPopup.tsx
@@ -187,7 +187,7 @@ function SuspendingPreviewPopup({
         showTail={true}
         target={target}
       >
-        <div className={styles.Wrapper} data-private>
+        <div className={styles.Wrapper}>
           <div className={styles.UnavailableMessage}>{valueUnavailableMessage}</div>
         </div>
       </Popup>

diff --git a/packages/shared/user-data/GraphQL/config.ts b/packages/shared/user-data/GraphQL/config.ts
@@ -138,11 +138,6 @@ export const config = {
     legacyKey: null,
   },
 
-  global_disableLogRocket: {
-    defaultValue: Boolean(false),
-    label: "Disable LogRocket session replay",
-    legacyKey: "devtools.disableLogRocket",
-  },
   global_enableLargeText: {
     defaultValue: Boolean(false),
     label: "Enable large text for Editor",

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -26,30 +26,30 @@ const csp = (props: any) => {
   const authHost = getAuthHost();
   return [
     `default-src 'self'`,
-    `connect-src 'self' https://api.replay.io wss://api.replay.io wss://dispatch.replay.io ws://*.replay.prod http://*.replay.prod https://telemetry.replay.io https://${authHost} https://api-js.mixpanel.com https://*.sentry.io https://*.launchdarkly.com https://*.logrocket.io https://*.lr-ingest.io https://*.logrocket.com https://*.lr-in.com https://api.stripe.com https://vitals.vercel-insights.com ${
+    `connect-src 'self' https://api.replay.io wss://api.replay.io wss://dispatch.replay.io ws://*.replay.prod http://*.replay.prod https://telemetry.replay.io https://${authHost} https://api-js.mixpanel.com https://*.sentry.io https://*.launchdarkly.com https://*.lr-ingest.io https://*.lr-in.com https://api.stripe.com https://vitals.vercel-insights.com ${
       // Required to talk to local backend in development. Enabling
       // localhost:8000 for prod to support the ?dispatch parameter when running
       // the local backend
       "http://localhost:* http://*.replay.local ws://*.replay.local ws://localhost:*"
     }`,
     `frame-src replay: https://js.stripe.com https://hooks.stripe.com https://${authHost} https://www.loom.com/`,
     // Required by some of our external services
-    `script-src 'self' 'unsafe-eval' https://cdn.logrocket.io https://cdn.lr-ingest.io https://cdn.lr-in.com https://js.stripe.com ${hash}`,
+    `script-src 'self' 'unsafe-eval' https://cdn.lr-ingest.io https://cdn.lr-in.com https://js.stripe.com ${hash}`,
     `form-action https://${authHost}`,
 
     // From vercel's CSP config and Google fonts
     `font-src 'self' data: https://fonts.gstatic.com`,
     // Google fonts
     `style-src-elem 'self' 'unsafe-inline' https://fonts.gstatic.com`,
-    // Required by LogRocket
-    `child-src 'self' blob:`,
-    `worker-src 'self' blob:`,
 
     // Required by some of our external services
     `style-src 'self' 'unsafe-inline'`,
 
     // Required to inline images from the database and from external avaters
     `img-src 'self' data: https:`,
+
+    // Required for our logpoint analysis cache (which uses a Web worker)
+    `worker-src 'self' blob:`,
   ]
     .filter(Boolean)
     .join("; ");

diff --git a/src/base.css b/src/base.css
@@ -16,11 +16,6 @@ body {
   scrollbar-color: transparent;
 }
 
-.showRedactions[data-private="true"] {
-  background: black !important;
-  border: 2px solid black !important;
-}
-
 :root {
   --dark-blue: #2d7eff;
   --dark-grey: #696969;

diff --git a/src/devtools/client/debugger/src/components/Editor/EditorPane.tsx b/src/devtools/client/debugger/src/components/Editor/EditorPane.tsx
@@ -1,9 +1,8 @@
 import classNames from "classnames";
-import { useLayoutEffect, useRef } from "react";
+import { useRef } from "react";
 
 import { IndeterminateProgressBar } from "replay-next/components/IndeterminateLoader";
 import { userData } from "shared/user-data/GraphQL/UserData";
-import { Redacted } from "ui/components/Redacted";
 import { getToolboxLayout } from "ui/reducers/layout";
 import { getSelectedSourceId, getSourcesUserActionPending } from "ui/reducers/sources";
 import { useAppSelector } from "ui/setup/hooks";
@@ -35,9 +34,9 @@ export const EditorPane = () => {
         {sourcesUserActionPending ? <IndeterminateProgressBar /> : null}
         <EditorTabs />
         {selectedSourceId ? (
-          <Redacted className="h-full">
+          <div className="h-full">
             <NewSourceAdapter />
-          </Redacted>
+          </div>
         ) : (
           <WelcomeBox />
         )}

diff --git a/src/devtools/client/debugger/src/components/Editor/Tab.tsx b/src/devtools/client/debugger/src/components/Editor/Tab.tsx
@@ -8,7 +8,6 @@ import useTabContextMenu from "devtools/client/debugger/src/components/Editor/us
 import useTooltip from "replay-next/src/hooks/useTooltip";
 import { useSourcesById } from "replay-next/src/suspense/SourcesCache";
 import { ReplayClientContext } from "shared/client/ReplayClientContext";
-import { Redacted } from "ui/components/Redacted";
 import { SourceDetails, getSelectedSourceId } from "ui/reducers/sources";
 import { useAppDispatch, useAppSelector } from "ui/setup/hooks";
 import { trackEvent } from "ui/utils/telemetry";
@@ -87,7 +86,7 @@ export default function Tab({
 
   return (
     <>
-      <Redacted
+      <div
         draggable
         onDragOver={onDragOver}
         onDragStart={onDragStart}
@@ -103,15 +102,15 @@ export default function Tab({
         onMouseLeave={onMouseLeave}
         // Accommodate middle click to close tab
         onMouseUp={e => e.button === 1 && closeTab(cx, source)}
-        refToForward={elementRef => setTabRef(sourceId, elementRef as HTMLDivElement | null)}
+        ref={elementRef => setTabRef(sourceId, elementRef as HTMLDivElement | null)}
       >
         <SourceIcon
           source={source}
           shouldHide={(icon: string) => ["file", "javascript"].includes(icon)}
         />
         <div className="filename">{getTruncatedFileName(source, query)}</div>
         <CloseButton buttonClass="" handleClick={onClickClose} tooltip={"Close tab"} />
-      </Redacted>
+      </div>
       {contextMenu}
       {tooltip}
     </>

diff --git a/src/devtools/client/debugger/src/components/PrimaryPanes/SourcesTreeItem.tsx b/src/devtools/client/debugger/src/components/PrimaryPanes/SourcesTreeItem.tsx
@@ -10,7 +10,6 @@ import { ContextMenuItem, useContextMenu } from "use-context-menu";
 
 import Icon from "replay-next/components/Icon";
 import { copyToClipboard } from "replay-next/components/sources/utils/clipboard";
-import { Redacted } from "ui/components/Redacted";
 import type { SourceDetails } from "ui/reducers/sources";
 
 import { getSourceQueryString } from "../../utils/source";
@@ -196,10 +195,10 @@ function SourceTreeItem2({
         {itemArrow}
         <SourceTreeIcon source={source} depth={depth} item={item} />
 
-        <Redacted className="label">
+        <div className="label">
           {getItemName(item)}
           {query}
-        </Redacted>
+        </div>
       </div>
       {contextMenu}
     </>

diff --git a/src/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoint.tsx b/src/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/Breakpoint.tsx
@@ -85,7 +85,7 @@ class Breakpoint extends PureComponent<BreakpointProps> {
     const location = `${line}${columnVal}`;
 
     return (
-      <div className={styles.Location} data-private data-test-name="PointLocation">
+      <div className={styles.Location} data-test-name="PointLocation">
         {location}
       </div>
     );

diff --git a/src/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeading.tsx b/src/devtools/client/debugger/src/components/SecondaryPanes/Breakpoints/BreakpointHeading.tsx
@@ -4,7 +4,6 @@ import { ConnectedProps, connect } from "react-redux";
 
 import type { Context } from "devtools/client/debugger/src/reducers/pause";
 import { Point } from "shared/client/types";
-import { Redacted } from "ui/components/Redacted";
 import { MiniSource, getSourceDetails } from "ui/reducers/sources";
 import type { UIState } from "ui/state";
 
@@ -83,7 +82,7 @@ class BreakpointHeading extends PureComponent<BreakpointsProps> {
         onContextMenu={this.onContextMenu}
         onClick={this.onClick}
       >
-        <Redacted className={styles.Label}>{fileName}</Redacted>
+        <div className={styles.Label}>{fileName}</div>
         {allBreakpointsAreShared || (
           <CloseButton
             handleClick={this.removeBreakpoint}

diff --git a/src/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frame.tsx b/src/devtools/client/debugger/src/components/SecondaryPanes/Frames/Frame.tsx
@@ -6,7 +6,6 @@ import classNames from "classnames";
 import React from "react";
 
 import type { PauseFrame } from "devtools/client/debugger/src/reducers/pause";
-import { Redacted } from "ui/components/Redacted";
 import { trackEvent } from "ui/utils/telemetry";
 
 import { formatDisplayName } from "../../../utils/pause/frames";
@@ -121,7 +120,7 @@ export function FrameComponent({
 
   return (
     <>
-      <Redacted
+      <div
         role="listitem"
         key={frame.id}
         className={className}
@@ -140,7 +139,7 @@ export function FrameComponent({
           {!hideLocation && <FrameLocation frame={frame} displayFullUrl={displayFullUrl} />}
           {isSelectable && <br className="clipboard-only" />}
         </div>
-      </Redacted>
+      </div>
 
       {/*Keep the context menu separate to avoid `onMouseDown`
       bubbling up and causing unwanted frame selection behavior*/}

diff --git a/src/devtools/client/debugger/src/components/SecondaryPanes/NewScopes.tsx b/src/devtools/client/debugger/src/components/SecondaryPanes/NewScopes.tsx
@@ -12,7 +12,6 @@ import { sourcesByIdCache } from "replay-next/src/suspense/SourcesCache";
 import { getPreferredLocation, getPreferredSourceId } from "replay-next/src/utils/sources";
 import { ReplayClientContext } from "shared/client/ReplayClientContext";
 import { enterFocusMode } from "ui/actions/timeline";
-import { Redacted } from "ui/components/Redacted";
 import { getPreferredGeneratedSources } from "ui/reducers/sources";
 import { useAppDispatch, useAppSelector } from "ui/setup/hooks";
 import { pickScopes } from "ui/suspense/scopeCache";
@@ -150,7 +149,7 @@ export default function NewScopes() {
 
   return (
     <div className="scopes-content">
-      <Redacted className="pane scopes-list" data-test-name="ScopesList">
+      <div className="pane scopes-list" data-test-name="ScopesList">
         <InlineErrorBoundary
           name="NewScopes"
           key={`${selectedFrameId?.pauseId}:${selectedFrameId?.frameId}`}
@@ -160,7 +159,7 @@ export default function NewScopes() {
             <ScopesRenderer />
           </Suspense>
         </InlineErrorBoundary>
-      </Redacted>
+      </div>
     </div>
   );
 }
diff --git a/src/devtools/client/debugger/src/components/SourceOutline/SourceOutlineFunction.tsx b/src/devtools/client/debugger/src/components/SourceOutline/SourceOutlineFunction.tsx
@@ -2,7 +2,6 @@ import classnames from "classnames";
 import React from "react";
 
 import { FunctionOutlineWithHitCount } from "replay-next/src/suspense/OutlineHitCountsCache";
-import { Redacted } from "ui/components/Redacted";
 
 import PreviewFunction from "../shared/PreviewFunction";
 
@@ -25,9 +24,9 @@ export const SourceOutlineFunction = React.memo(function OutlineFunction({
     >
       <div>
         <span className="outline-list__element-icon">λ</span>
-        <Redacted className="inline-block">
+        <div className="inline-block">
           <PreviewFunction func={func} />
-        </Redacted>
+        </div>
       </div>
       {func.hits !== undefined && (
         <div className="rounded bg-themeMenuHighlight px-2 text-bodyColor">{func.hits}</div>

diff --git a/src/devtools/client/debugger/src/components/shared/PreviewFunction.js b/src/devtools/client/debugger/src/components/shared/PreviewFunction.js
@@ -5,9 +5,7 @@
 import flatten from "lodash/flatten";
 import times from "lodash/times";
 import zip from "lodash/zip";
-import React, { Component } from "react";
-
-import { RedactedSpan } from "ui/components/Redacted";
+import { Component } from "react";
 
 export default class PreviewFunction extends Component {
   renderFunctionName(func) {
@@ -39,12 +37,12 @@ export default class PreviewFunction extends Component {
   render() {
     const { func } = this.props;
     return (
-      <RedactedSpan className="function-signature">
+      <span className="function-signature">
         {this.renderFunctionName(func)}
         <span className="paren">(</span>
         {this.renderParams(func)}
         <span className="paren">)</span>
-      </RedactedSpan>
+      </span>
     );
   }
 }