Uncaught ReferenceError: process is not defined

[sturatcliffe]

Hey,

I'm working on a Remix app, and trying to add logging using the @logtail/js package as we need to log from the server actions in Node, and directly from the browser.

The server aspect is working perfectly, but as soon as I try to add client-side logging I get the following error in the console:

Remix has a convention of adding a .server.ts suffix to files which should only be included in the server bundles, which is what I've done when using import { Node as Logtail } from '@logtail/js' so I don't believe there is any server specific logic leaking into the client bundle.

The error only appears when I include a React context provider which I've setup for sharing the logger instance to any of my React components in the UI:

import { createContext, useContext, useMemo } from 'react'
import { Browser as Logtail } from '@logtail/js'

type Context = {
	log: Logtail
}

const LogtailContext = createContext<Context | null>(null)

export const useLogtail = () => {
	const context = useContext(LogtailContext)
	if (context == null) throw Error('Use inside LogtailProvider')
	return context
}

type Props = {
	children: React.ReactNode
	sourceToken: string
}

export const LogtailProvider = ({ sourceToken, children }: Props) => {
	const log = useMemo(() => {
		return new Logtail(sourceToken)
	}, [sourceToken])

	return (
		<LogtailContext.Provider
			value={{
				log,
			}}
		>
			{children}
		</LogtailContext.Provider>
	)
}

Any ideas what's happening? We're on v0.3.1 if it helps!

Thanks in advance

[curusarn]

Hi @sturatcliffe,

Thank you for your report and your patience.

I don't see an obvious issue in your logger code. But the error does look like some server code is leaking into the bundle.
Could you please double-check?

Could you also share a more complete example? 🙏
It would help us reproduce the issue on our side.

Thanks again for reaching out.