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 { 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 Sentry.BrowserTracing()],
  tracesSampleRate: 0.1,
});

function ClientCacheProvider({ children }: { children: ReactNode }) {
  const [cache, setCache] = useState(createEmotionCache());

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

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

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