fix: bug where circulars are not processed properly

Author: skoshx

examples/with-nextjs-api/src/app/api/user/route.ts

@@ -1,6 +1,6 @@
 import { NextResponse } from 'next/server'
 import { faker } from '@faker-js/faker'
-import { capture } from 'useflytrap'
+import { capture, identify } from 'useflytrap'
 
 // @ts-expect-error
 const mockUsers = [...Array(100).keys()].map((i) => ({
@@ -26,6 +26,7 @@ function listUsers(options: ListUsersOptions = { per_page: 50, page: 0 }) {
 export async function GET(request: Request) {
 	const { searchParams } = new URL(request.url)
 	const userId = searchParams.get('userId')
+	if (userId) identify(userId)
 
 	/**
 	 * Here we're making an oversight, we should include `{ per_page: 100, page: 0 }` to include

examples/with-nextjs-api/src/app/page.tsx

@@ -58,7 +58,7 @@ export default function Home() {
         />
       </div>
 
-      <input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username" />
+      <input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username" style={{ color: 'black' }} />
       <button onClick={fetchDetails}>Fetch account details</button>
       {error && (
         <div className='space-y-2'>

src/core/storage.ts

@@ -198,8 +198,25 @@ export const liveFlytrapStorage: FlytrapStorage = {
 		calls = processCaptures(calls)
 		functions = processCaptures(functions)
 
-		calls = removeCircularDependencies(calls)
-		functions = removeCircularDependencies(functions)
+		// Remove the circular from `calls` and `functions`
+		for (let i = 0; i < calls.length; i++) {
+			for (let j = 0; j < calls[i].invocations.length; j++) {
+				calls[i].invocations[j].args = calls[i].invocations[j].args.map((a) =>
+					removeCircularDependencies(a)
+				)
+				calls[i].invocations[j].output = removeCircularDependencies(calls[i].invocations[j].output)
+			}
+		}
+		for (let i = 0; i < functions.length; i++) {
+			for (let j = 0; j < functions[i].invocations.length; j++) {
+				functions[i].invocations[j].args = functions[i].invocations[j].args.map((a) =>
+					removeCircularDependencies(a)
+				)
+				functions[i].invocations[j].output = removeCircularDependencies(
+					functions[i].invocations[j].output
+				)
+			}
+		}
 
 		const args = [...extractArgs(calls), ...extractArgs(functions)]
 		const outputs = [...extractOutputs(calls), ...extractOutputs(functions)]

src/core/stringify.ts

@@ -110,6 +110,7 @@ export function stringify(obj: any): string {
 			if (key.startsWith('_')) return // Don't compare React's internal props.
 			if (typeof value === 'object' && value !== null) {
 				if (seen.has(value)) return FLYTRAP_CIRCULAR
+				// if (seen.has(value)) return null
 				seen.add(value)
 			}
 			return value

src/transform.ts

@@ -189,7 +189,7 @@ export const unpluginOptions: UnpluginOptions = {
 			}).toString()
 		}
 
-		if (!config.disableArtifacts) {
+		if (!config.disableArtifacts && process?.env?.NODE_ENV === 'production') {
 			// Push artifacts
 			log.info(
 				'storage',

test/regression.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest'
 import { extractArtifacts } from '../src/transform/artifacts/artifacts'
 import { initTRPC } from '@trpc/server'
 import { removeCircularDependencies } from '../src/core/stringify'
+import SuperJSON from 'superjson'
 
 describe('Regression', () => {
 	it('regression #1 > generates correct artifacts that match the transformed code', async () => {
@@ -39,4 +40,14 @@ describe('Regression', () => {
 		const withoutCirculars = removeCircularDependencies(trpcInstance)
 		expect(typeof withoutCirculars).toEqual('object')
 	})
+
+	it.skip("regression #3 > doesn't give false positives to circular", () => {
+		const items = ['abc', 'def']
+		const calls = [items, items]
+		const callsWithoutCirculars = removeCircularDependencies(calls)
+		expect(callsWithoutCirculars).toEqual([
+			['abc', 'def'],
+			['abc', 'def']
+		])
+	})
 })