Browser Environment Variables in root CatchBoundary #5104

jamesarosen · 2023-01-14T19:59:21Z

jamesarosen
Jan 14, 2023

The documented approach to browser environment variables is to (A) send them to the browser with a loader, then set them on window.ENV.

useLoaderData doesn't return anything in a CatchBoundary, so this won't work:

// routes/index.tsx
export function loader() {
  throw json({ some: 'data' }, { status: 420 });
}

// routes/root.tsx
export function CatchBoundary() {
  const caught = useCatch(); // whatever was thrown
  const data = useLoaderData(); // undefined

  return (
    <html>
      <body>
        <script
          dangerouslySetInnerHTML={{
            __html: `window.ENV = ${JSON.stringify(data.ENV)}`,
          }}
        />
      </body>
    </html>
  );
}

Assuming that it wasn't the root loader that threw the error, you can get its data via useMatches using the How to access Remix data in other routes pattern:

// routes/root.tsx
export function CatchBoundary() {
  const matches = useMatches();
  const ENV = matches.find((match) => match.id === "root")?.data?.ENV ?? {};
}

I think it's nice to wrap all of that up into a single component and use that everywhere you need it:

function WriteBrowserEnv() {
  const matches = useMatches();
  const ENV = matches.find((match) => match.id === "root")?.data?.ENV ?? {};
  return (
    <script
      dangerouslySetInnerHTML={{
        __html: `window.ENV = ${JSON.stringify(ENV)}`,
      }}
    />
  );
}

I think this would make a great addition to the envvars guide.

sergiodxa · 2023-01-15T07:01:56Z

sergiodxa
Jan 15, 2023
Maintainer

Because CatchBoundary is only rendered when you throw a response, you could add any env variable you may need to that thrown response the same way you add them to the returned responses.

That should allow you to pass env variables to the root CatchBoundary even if they the root loader is the one that thrown a response.

1 reply

jamesarosen Jan 15, 2023
Author

you could add any env variable you may need to that thrown response the same way you add them to the returned responses

That will absolutely work.

The downside to that approach is that it has high coupling and low cohesion. If I add a new feature to our error pages -- say, add reCAPTCHA to the contact form -- I need to add the environment variable for that in every place we throw a Response. The needs of the root CatchBoundary are fulfilled not by something in the root route but by various throw statements around the application.

I could improve that slightly by having the root route export a throwJSONWithEnvironment function that all the other parts of the app use to throw a response with the necessary environment.

I think including the data in the thrown response makes a lot more sense in some other cases

you're using a nested CatchBoundary, so thee throw (data provider) is closer to the CatchBoundary (data consumer). This scenario has high cohesion because you're defining both in the same file. It has low coupling because there are fewer potential provider-consumer relationships -- likely just one instead of dozens or hundreds.
you want to override data in the root CatchBoundary. In that case, the root CatchBoundary would have to merge the data from useCatch atop the data from useMatches. This feels more like an extension of my original idea than a replacement. It might be useful for a single app with multiple brands or locales.

Environment variables are generally global. The assumption is that you can use them from anywhere in your code without having to think too carefully about data loading.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Browser Environment Variables in root CatchBoundary #5104

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Browser Environment Variables in root CatchBoundary #5104

jamesarosen Jan 14, 2023

Replies: 1 comment · 1 reply

sergiodxa Jan 15, 2023 Maintainer

jamesarosen Jan 15, 2023 Author

jamesarosen
Jan 14, 2023

Replies: 1 comment 1 reply

sergiodxa
Jan 15, 2023
Maintainer

jamesarosen Jan 15, 2023
Author