🧑‍💻(frontend) add debug flags

rvveber · rvveber · commit 21eb04feb35d · 2025-05-07T16:20:57.000+02:00
Debug flags can be used to toggle debugging
in various environments and situations.

- They need to be explicitly enabled.
- This commit enables them for development.
- They can help investigate bugs in production
environments,
- They can change the behavior of the app and add
additional info when developing, improving the DX.

Signed-off-by: Robin Weber &lt;weber@b1-systems.de&gt;
diff --git a/src/frontend/apps/impress/src/pages/_app.tsx b/src/frontend/apps/impress/src/pages/_app.tsx
@@ -1,3 +1,4 @@
+import debug from 'debug';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { useTranslation } from 'react-i18next';
@@ -18,6 +19,19 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout ?? ((page) => page);
   const { t } = useTranslation();
 
+  if (process.env.NODE_ENV === 'development') {
+    /**
+     *  Add and enable new debug namespaces as needed
+     *
+     *  They can also be enabled via DEBUG environment variable
+     *    Example: DEBUG=features:language,no-cache
+     *
+     *  They can also be enabled in the browser console
+     *    Example: window.debug = 'features:language,no-cache';
+     */
+    debug.enable(['no-cache', 'features:language'].join(','));
+  }
+
   return (
     <>
       <Head>
