捕获/错误边界中的Remix.run环境变量

Question

在我的remix.run Web中，有不同的.env文件，每个客户端都有一个.env文件。在这些文件中，我将客户机的名称设置为在布局中显示，并在元标记中显示为标题。

如何在CatchBoundary中访问这些env变量，在root.tsx中如何访问ErrorBounday

因为网站是在服务器上呈现的，所以必须有可能访问这些边界函数中的环境变量。

我不希望通过在每条路径中冗余地导出这些函数来使用嵌套边界。

Answer 1

可以从加载程序函数中发送环境变量。

取消以下选项之一：

export async function loader() {
  // Option 1: triggers CatchBoundary
  // throw new Response(
  //   JSON.stringify({
  //     message: "Not Found",
  //     ENV: {
  //       PRIMARY_COLOR: process.env.PRIMARY_COLOR,
  //     },
  //   }),
  //   {
  //     status: 404,
  //   }
  // );

  // Option 2: triggers ErrorBoundary
  throw new Error(
    JSON.stringify({
      message: "I am a failure!",
      ENV: {
        PRIMARY_COLOR: process.env.PRIMARY_COLOR,
      },
    })
  );
}

对于CatchBoundary：

export function CatchBoundary() {
  const caught = useCatch();
  const data = JSON.parse(caught.data);
  const PRIMARY_COLOR = data.ENV.PRIMARY_COLOR;

  return (
    <div>
      <h1>Caught</h1>
      <p>Status: {caught.status}</p>
      <pre style={{ color: PRIMARY_COLOR }}>
        <code>{JSON.stringify(data.message, null, 2)}</code>
      </pre>
    </div>
  );
}

对于ErrorBoundary：

export function ErrorBoundary({ error }: { error: Error }) {
  const data = JSON.parse(error.message);
  const PRIMARY_COLOR = data.ENV.PRIMARY_COLOR;

  return (
    <div>
      <h1>Error</h1>
      <p style={{ color: PRIMARY_COLOR }}>{data.message}</p>
      <p>The stack trace is:</p>
      <pre>{error.stack}</pre>
    </div>
  );
}