-
|
I want to setup sentry, and need to add some code to entry.client.tsx, as described here. In order to improve the logging, I want to add a COMMIT_SHA env var. When trying to do that via process.env. COMMIT_SHA I get this error:
Since I cannot have a loader in this file, I am also not sure how I can send this env var from the server to the client. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
|
I also use Sentry, and I initialize in my root.tsx route. // root.tsx
export const loader = async ({ request }: LoaderArgs) => {
const env = getEnvVars();
const user = await getUser(request, { fresh: true });
return json({
user,
ENV: {
SERVER_URL: env.SERVER_URL,
SENTRY_DSN: env.SENTRY_DSN,
SENTRY_NOTIFY: env.SENTRY_NOTIFY,
RELEASE_STAGE: env.RELEASE_STAGE,
APP_VERSION: `${env.APP_VERSION}-${env.COMMIT_SHA}`,
},
});
};
function App() {
const { user, ENV } = useLoaderData<typeof loader>();
useEffect(() => {
if (!ENV.SENTRY_NOTIFY) return;
console.log(
`🐛 init sentry client: ${ENV.RELEASE_STAGE} v${ENV.APP_VERSION}`,
);
Sentry.init({
environment: ENV.RELEASE_STAGE,
release: ENV.APP_VERSION,
dsn: ENV.SENTRY_DSN,
tracesSampleRate: 1,
integrations: [
new Sentry.BrowserTracing({
routingInstrumentation: Sentry.remixRouterInstrumentation(
useEffect,
useLocation,
useMatches,
),
}),
],
});
if (user) {
Sentry.setUser({
id: String(user.id),
email: user.email,
name: user.name,
});
} else {
Sentry.setUser(null);
}
}, [
ENV.SENTRY_NOTIFY,
ENV.RELEASE_STAGE,
ENV.APP_VERSION,
ENV.SENTRY_DSN,
user,
]);
// ...
} |
Beta Was this translation helpful? Give feedback.
-
|
You can also do it with global variables. // root.tsx
export const loader = () => {
return json({
COMMIT_SHA: process.env. COMMIT_SHA
})
}
export default function Root() {
const { COMMIT_SHA } = useLoaderData()
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<Meta />
<Links />
<script dangerouslySetInnerHTML={{ __html: `window.COMMIT_SHA = '${COMMIT_SHA}'` }}>
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<LiveReload />
</body>
</html>
)
}in this way, You can read it in |
Beta Was this translation helpful? Give feedback.
-
|
Doesn't Root run after entry.client.tsx? |
Beta Was this translation helpful? Give feedback.
-
|
it is. but you can init stuff inside root component as well. like sentry or goole analyze etc. |
Beta Was this translation helpful? Give feedback.
You can also do it with global variables.
in this way, You can read it in
entry.…