Agent Wranglers

APP-80Recommended

Show which environment a tool is connected to

Every screen of an admin or internal tool names its environment, such as Production or Staging, in text at the top of the screen. The page title starts with the same name.

By Agent Wranglers. Updated .

How to do it

People keep staging and production open side by side, and both look the same. Read the name from the server's own configuration, never from the address the browser used. A wrong DNS entry then cannot mislead anyone. Label production too, so a missing label never reads as safe. Say it in words, as never use colour as the only signal says. Destructive actions still ask as let people undo or confirm destructive actions says.

Examples

Python example

@app.context_processor
def environment_name():
    return {"environment": os.environ["APP_ENVIRONMENT"].title()}

TypeScript example

export function labelEnvironment(environment: string) {
  document.title = `${environment} | ${document.title}`;
  document.querySelector('[data-environment]')!.textContent = environment;
}

How to check

A browser test opens the start page in each environment. The header text and document.title both contain the name in that server's environment setting.

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/app-ui/resilience/environment-label">Agent Wranglers web app interface playbook</a>. In code you write, add a comment next to it with the same link.