SSR broke in v1.58.0

[pegiadise]

import { AnalyticsBrowser } from '@segment/analytics-next'

const cdp = new AnalyticsBrowser()
let isReady = false
cdp.on('ready', () => {
  isReady = true
})

export default () => {
  if (!isReady) {
    const { segmentCdnUrl, segmentApiHost, segmentApiKey } = useRuntimeConfig().public

    cdp.load(
      {
        writeKey: segmentApiKey,
        cdnURL: segmentCdnUrl,
      },
      {
        initialPageview: true,
        integrations: {
          'Segment.io': {
            apiHost: segmentApiHost,
          },
        },
      },
    )
  }

  return cdp
}

This simple Nuxt composable broke when in SSR in v1.58.0. I guess either instantiating AnalyticsBrowser or .on or .load has some unsafe window access in the new version. Let me know if minimal reproduction is needed.

[silesky]

thanks @pegiadise for reporting!

As a workaround while we investigate, Is there a way for you to avoid calling this on the server (eg checking the window object)?

While we don't want to add import time level side effects that break the server, this library is not isomorphic, and we make no guarantees that it will not explode when .load or any other method is called on a server environment (though we do our best).

[pegiadise]

thanks @pegiadise for reporting!

As a workaround, Is there a way for you to avoid calling this on the server (eg checking the window object)? This library is not isomorphic, and makes no such guarantees that it will not explode when executed in a server environment.

Yes, I can work around it of course, but even if it’s not isomorphic, keeping the initialization safe will go a long way with full stack frameworks. Feel free to close if it won’t be supported.

[silesky]

@pegiadise I'm having trouble reproducing in any of my next.js (testing in 12 and 13) envs -- can you create a minimal example with the framework you're having an issue with?

[pegiadise]

@pegiadise I'm having trouble reproducing in any of my next.js (testing in 12 and 13) -- can you create a minimal example with the framework you're having an issue with?

Yup. Will create a minimal repro during the weekend with Nuxt.

[pegiadise]

Minimal repro repo here: https://github.com/pegiadise/segment-analytics-next-1.58.0-ssr/tree/main

Logs on failure:

[nuxt] [request error] [unhandled] [500] window is not defined
  at getGlobalAnalytics (./node_modules/.pnpm/@[email protected]/node_modules/@segment/analytics-next/src/lib/global-analytics-helper.ts:14:3)  
  at PreInitMethodCallBuffer.PreInitMethodCallBuffer._pushSnippetWindowBuffer (./node_modules/.pnpm/@[email protected]/node_modules/@segment/analytics-next/src/core/buffer/index.ts:223:34)  
  at PreInitMethodCallBuffer.get (./node_modules/.pnpm/@[email protected]/node_modules/@segment/analytics-next/src/core/buffer/index.ts:169:10)  
  at <anonymous> (./node_modules/.pnpm/@[email protected]/node_modules/@segment/analytics-next/src/core/buffer/index.ts:198:16)  
  at Array.forEach (<anonymous>)  
  at PreInitMethodCallBuffer.PreInitMethodCallBuffer.push (./node_modules/.pnpm/@[email protected]/node_modules/@segment/analytics-next/src/core/buffer/index.ts:182:11)  
  at AnalyticsBrowser.on (./node_modules/.pnpm/@[email protected]/node_modules/@segment/analytics-next/src/core/buffer/index.ts:365:29)  
  at ./composables/useSegment.ts:5:9  
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async ViteNodeRunner.directRequest (./node_modules/.pnpm/[email protected]/node_modules/vite-node/dist/client.mjs:341:5)
[nuxt] [request error] [unhandled] [500] window is not defined
  at getGlobalAnalytics (./node_modules/.pnpm/@[email protected]/node_modules/@segment/analytics-next/src/lib/global-analytics-helper.ts:14:3)  
  at PreInitMethodCallBuffer.PreInitMethodCallBuffer._pushSnippetWindowBuffer (./node_modules/.pnpm/@[email protected]/node_modules/@segment/analytics-next/src/core/buffer/index.ts:223:34)  
  at PreInitMethodCallBuffer.get (./node_modules/.pnpm/@[email protected]/node_modules/@segment/analytics-next/src/core/buffer/index.ts:169:10)  
  at <anonymous> (./node_modules/.pnpm/@[email protected]/node_modules/@segment/analytics-next/src/core/buffer/index.ts:198:16)  
  at Array.forEach (<anonymous>)  
  at PreInitMethodCallBuffer.PreInitMethodCallBuffer.push (./node_modules/.pnpm/@[email protected]/node_modules/@segment/analytics-next/src/core/buffer/index.ts:182:11)  
  at AnalyticsBrowser.on (./node_modules/.pnpm/@[email protected]/node_modules/@segment/analytics-next/src/core/buffer/index.ts:365:29)  
  at ./composables/useSegment.ts:5:9  
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async ViteNodeRunner.directRequest (./node_modules/.pnpm/[email protected]/node_modules/vite-node/dist/client.mjs:341:5)
[nuxt] [request error] [unhandled] [500] window is not defined
  at getGlobalAnalytics (./node_modules/.pnpm/@[email protected]/node_modules/@segment/analytics-next/src/lib/global-analytics-helper.ts:14:3)  
  at PreInitMethodCallBuffer.PreInitMethodCallBuffer._pushSnippetWindowBuffer (./node_modules/.pnpm/@[email protected]/node_modules/@segment/analytics-next/src/core/buffer/index.ts:223:34)  
  at PreInitMethodCallBuffer.get (./node_modules/.pnpm/@[email protected]/node_modules/@segment/analytics-next/src/core/buffer/index.ts:169:10)  
  at <anonymous> (./node_modules/.pnpm/@[email protected]/node_modules/@segment/analytics-next/src/core/buffer/index.ts:198:16)  
  at Array.forEach (<anonymous>)  
  at PreInitMethodCallBuffer.PreInitMethodCallBuffer.push (./node_modules/.pnpm/@[email protected]/node_modules/@segment/analytics-next/src/core/buffer/index.ts:182:11)  
  at AnalyticsBrowser.on (./node_modules/.pnpm/@[email protected]/node_modules/@segment/analytics-next/src/core/buffer/index.ts:365:29)  
  at ./composables/useSegment.ts:5:9  
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async ViteNodeRunner.directRequest (./node_modules/.pnpm/[email protected]/node_modules/vite-node/dist/client.mjs:341:5)

Probably directly related with #969 as well. Thanks for taking a look.

[silesky]

Have not had additional issues come in around this since we made the change, so closing. See our next.js example links for the recommended way to initialize analytics.