entry.client.tsx

import { CacheProvider } from "@emotion/react";
import { ClientStyleContext } from "./context.js";
import createEmotionCache from "./createEmotionCache.js";
import { hydrateRoot } from "react-dom/client";
import { Integrations } from "@sentry/tracing";
import { RemixBrowser } from "@remix-run/react";
import * as Sentry from "@sentry/react";
import { type ReactNode, StrictMode, useState } from "react";

Sentry.init({
  dsn:
    document.querySelector("meta[name='dsn']")?.getAttribute("content") ??
    undefined,
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 0.1,
});

function ClientCacheProvider({ children }: { children: ReactNode }) {
  const nonce =
    document
      .querySelector("meta[name='style-nonce']")
      ?.getAttribute("content") || undefined;
  const [cache, setCache] = useState(createEmotionCache(nonce));

  function reset() {
    setCache(createEmotionCache(nonce));
  }

  return (
    <ClientStyleContext.Provider value={{ reset }}>
      <CacheProvider value={cache}>{children}</CacheProvider>
    </ClientStyleContext.Provider>
  );
}

hydrateRoot(
  document,
  <StrictMode>
    <ClientCacheProvider>
      <RemixBrowser />
    </ClientCacheProvider>
  </StrictMode>
);