Skip to content

Commit 4dfe0b5

Browse files
bryce-fitzsimonsbryce-fitzsimons
committed
fix cross-tab state bleedover, fix sdk version/payload messaging
1 parent d62b481 commit 4dfe0b5

6 files changed

Lines changed: 101 additions & 43 deletions

File tree

‎src/app/components/SdkTab/SdkItemPanel.tsx‎

Lines changed: 84 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { useEffect, useState } from "react";
2-
import { Button, Flex, IconButton, Link, Text } from "@radix-ui/themes";
2+
import { Button, Callout, Flex, IconButton, Link, Text } from "@radix-ui/themes";
33
import ValueField from "@/app/components/ValueField";
44
import { MW, NAV_H } from "@/app";
55
import {
66
PiArrowsClockwise,
77
PiArrowSquareOut,
8-
PiCaretRightFill,
8+
PiCaretRightFill, PiWarningFill, PiWarningOctagonFill,
99
PiXBold,
1010
} from "react-icons/pi";
1111
import * as Accordion from "@radix-ui/react-accordion";
@@ -34,6 +34,7 @@ const panels: Record<
3434
SDKHealthCheckResult & {
3535
latestSdkVersion: string;
3636
latestMinorSdkVersion: string;
37+
hasPayload: boolean;
3738
}
3839
>
3940
> = {
@@ -69,12 +70,14 @@ export default function SdkItemPanel({
6970
widthPercent,
7071
latestSdkVersion,
7172
latestMinorSdkVersion,
73+
hasPayload,
7274
}: {
7375
selectedItem: SdkItem;
7476
unsetSelectedItem: () => void;
7577
widthPercent: number;
7678
latestSdkVersion: string;
7779
latestMinorSdkVersion: string;
80+
hasPayload: boolean;
7881
}) {
7982
const { isResponsive } = useResponsiveContext();
8083

@@ -216,11 +219,20 @@ function statusPanel({
216219
) : null}
217220

218221
<div className="mb-4">
219-
{!activeTabId && !refreshing && (
220-
<div className="bg-red-100 border border-red-400 text-red-700 px-3 py-2 rounded text-sm mb-4">
221-
DevTools was unable to attach to the current window.
222-
</div>
223-
)}
222+
{!activeTabId && !refreshing ? (
223+
<Callout.Root
224+
color="red"
225+
size="1"
226+
className="mb-4"
227+
>
228+
<Callout.Icon>
229+
<PiWarningOctagonFill />
230+
</Callout.Icon>
231+
<Callout.Text>
232+
DevTools was unable to attach to the current window.
233+
</Callout.Text>
234+
</Callout.Root>
235+
) : null}
224236
<Button
225237
variant="outline"
226238
size="2"
@@ -309,23 +321,51 @@ function versionPanel({
309321
return (
310322
<Text as="div" size="2" weight="regular">
311323
{!version ? (
312-
<Text>
313-
Unable to find your SDK version. You might be using an old version of
314-
the SDK. Consider updating to the latest version.
315-
</Text>
324+
<>
325+
<Text>
326+
Unable to find your SDK version. This may indicate a version prior to 0.30.0.
327+
</Text>
328+
<div className="mt-4">
329+
<Callout.Root
330+
color="red"
331+
size="1"
332+
className="mt-2 mb-4"
333+
>
334+
<Callout.Icon>
335+
<PiWarningOctagonFill />
336+
</Callout.Icon>
337+
<Callout.Text>
338+
Possibly using an unsupported legacy version of the SDK (&lt;0.30.0)
339+
</Callout.Text>
340+
</Callout.Root>
341+
<Text>
342+
Versions prior to 0.30.0 are unsupported in DevTools. Additionally, versions prior to
343+
0.23.0 are considered unstable. Consider updating to the latest version.
344+
</Text>
345+
</div>
346+
</>
316347
) : (
317348
<>
318349
<Text>
319350
Detected version <strong>{version}</strong> of the JavaScript SDK.
320351
{hasWindowConfig ? " Embedded via the HTML Script Tag." : null}
321352
</Text>
322-
{paddedVersionString(version) < paddedVersionString("0.23.0") ? (
353+
{paddedVersionString(version) < paddedVersionString("0.30.0") ? (
323354
<div className="mt-4">
324-
<Text color="red">
325-
Using an unsupported legacy version of the SDK ({version}).
326-
</Text>{" "}
355+
<Callout.Root
356+
color="red"
357+
size="1"
358+
className="mt-2 mb-4"
359+
>
360+
<Callout.Icon>
361+
<PiWarningOctagonFill />
362+
</Callout.Icon>
363+
<Callout.Text>
364+
Using an unsupported legacy version of the SDK ({version}).
365+
</Callout.Text>
366+
</Callout.Root>
327367
<Text>
328-
Versions prior to 0.23.0 are considered unstable. Consider
368+
Versions prior to 0.30.0 are unsupported in DevTools. Consider
329369
updating to the latest version.
330370
</Text>
331371
</div>
@@ -465,13 +505,35 @@ function streamingPanel({
465505
);
466506
}
467507

468-
function payloadPanel({ payload }: SDKHealthCheckResult) {
508+
function payloadPanel({ hasPayload, payload }: SDKHealthCheckResult) {
469509
return (
470-
<ValueField
471-
value={payload}
472-
valueType="json"
473-
maxHeight={`calc(100vh - ${NAV_H}px - 150px)`}
474-
/>
510+
<>
511+
{!hasPayload ? (
512+
<>
513+
<Callout.Root
514+
color="amber"
515+
size="1"
516+
className="mb-4"
517+
>
518+
<Callout.Icon>
519+
<PiWarningFill />
520+
</Callout.Icon>
521+
<Callout.Text>
522+
No payload present in your SDK
523+
</Callout.Text>
524+
</Callout.Root>
525+
<Text as="div" size="2" weight="regular">
526+
Please check your implementation.
527+
</Text>
528+
</>
529+
) : (
530+
<ValueField
531+
value={payload}
532+
valueType="json"
533+
maxHeight={`calc(100vh - ${NAV_H}px - 150px)`}
534+
/>
535+
)}
536+
</>
475537
);
476538
}
477539

‎src/app/components/SdkTab/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export default function SdkTab() {
8686
: "red";
8787
const versionStatusColor = !version
8888
? "red"
89-
: paddedVersionString(version) < paddedVersionString("0.23.0")
89+
: paddedVersionString(version) < paddedVersionString("0.30.0")
9090
? "red"
9191
: paddedVersionString(version) <
9292
paddedVersionString(latestMinorSdkVersion)
@@ -262,6 +262,7 @@ export default function SdkTab() {
262262
widthPercent={rightPercent}
263263
latestSdkVersion={latestSdkVersion}
264264
latestMinorSdkVersion={latestMinorSdkVersion}
265+
hasPayload={hasPayload}
265266
/>
266267
)}
267268
</div>
@@ -302,16 +303,16 @@ export function getSdkStatus(
302303
): "green" | "yellow" | "red" {
303304
if (
304305
!sdkData.canConnect ||
306+
!sdkData.version ||
305307
(sdkData.version &&
306-
paddedVersionString(sdkData.version) < paddedVersionString("0.23.0"))
308+
paddedVersionString(sdkData.version) < paddedVersionString("0.30.0"))
307309
) {
308310
return "red";
309311
}
310312
if (
311313
!sdkData.hasPayload ||
312314
sdkData.trackingCallbackParams?.length !== 2 ||
313315
!sdkData.payloadDecrypted ||
314-
!sdkData.version ||
315316
(sdkData.version &&
316317
paddedVersionString(sdkData.version) <
317318
paddedVersionString(latestMinorSdkVersion))

‎src/app/hooks/useTabState.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,10 @@ export default function useTabState<T>(
5555
fetchState();
5656

5757
// Listener for content script state changes
58-
const listener = (message: any) => {
59-
if (message.type === "tabStateChanged" && message.property === property) {
58+
const listener = async (message: any, sender: any) => {
59+
const activeTabId = await getActiveTabId();
60+
const shouldListen = activeTabId && sender?.tab?.id ? activeTabId === sender.tab.id : false;
61+
if (shouldListen && message.type === "tabStateChanged" && message.property === property) {
6062
// Missing value indicates no state found in tab store, keep default value
6163
if ("value" in message) {
6264
setState(message.value);

‎src/app/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export const App = () => {
9898
useEffect(() => {
9999
window.setTimeout(() => {
100100
if (!sdkDataRef.current.sdkFound) setCurrentTab("sdkDebug");
101-
}, 400);
101+
}, 800);
102102
}, []);
103103

104104
return (

‎src/background/index.ts‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -185,16 +185,12 @@ const UpdateTabIconBasedOnSDK = (
185185
title =
186186
"GrowthBook DevTools\n🟡 SDK connected\n" +
187187
((!data.hasPayload ? "No SDK payload\n" : "") +
188-
(!data.hasPayload ? "No SDK payload\n" : "") +
189188
(data.trackingCallbackParams?.length !== 2
190189
? "Tracking callback issues\n"
191190
: "") +
192191
(!data.payloadDecrypted ? "Decryption issues\n" : "")) +
193-
(!data.version
194-
? "Unknown SDK version"
195-
: data.version &&
196-
paddedVersionString(data.version) <
197-
paddedVersionString(latestMinorSdkVersion)
192+
(paddedVersionString(data.version) <
193+
paddedVersionString(latestMinorSdkVersion)
198194
? "Outdated SDK version"
199195
: "");
200196
} else {
@@ -210,9 +206,8 @@ const UpdateTabIconBasedOnSDK = (
210206
(data.canConnect && !data.version
211207
? "Unknown SDK version"
212208
: data.canConnect &&
213-
data.version &&
214-
paddedVersionString(data.version) <
215-
paddedVersionString(latestMinorSdkVersion)
209+
paddedVersionString(data.version) <
210+
paddedVersionString(latestMinorSdkVersion)
216211
? "Outdated SDK version"
217212
: "");
218213
}
@@ -280,19 +275,17 @@ export function getSdkStatus(
280275
): "green" | "yellow" | "red" {
281276
if (
282277
!sdkData.canConnect ||
278+
!sdkData.version ||
283279
(sdkData.version &&
284-
paddedVersionString(sdkData.version) < paddedVersionString("0.23.0"))
280+
paddedVersionString(sdkData.version) < paddedVersionString("0.30.0"))
285281
) {
286282
return "red";
287283
}
288284
if (
289285
!sdkData.hasPayload ||
290286
sdkData.trackingCallbackParams?.length !== 2 ||
291287
!sdkData.payloadDecrypted ||
292-
!sdkData.version ||
293-
(sdkData.version &&
294-
paddedVersionString(sdkData.version) <
295-
paddedVersionString(latestMinorSdkVersion))
288+
paddedVersionString(sdkData.version) < paddedVersionString(latestMinorSdkVersion)
296289
) {
297290
return "yellow";
298291
}

‎src/content_script/embed_script.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -394,7 +394,7 @@ async function SDKHealthCheck(gb?: GrowthBook): Promise<SDKHealthCheckResult> {
394394
};
395395
const hasPayload =
396396
!!gb.getDecryptedPayload?.() ||
397-
(Object.keys(gb.getFeatures?.() || {}).length > 0 &&
397+
(Object.keys(gb.getFeatures?.() || {}).length > 0 ||
398398
(gb.getExperiments?.() || []).length > 0);
399399
// check if payload was decrypted
400400
const hasDecryptionKey = !!gbContext?.decryptionKey;

0 commit comments

Comments
 (0)