sentry tags for app instance

.env.template

@@ -5,3 +5,4 @@ NEXT_PUBLIC_FOOTER_TWITTER_LINK=APP_NEXT_NEXT_PUBLIC_FOOTER_TWITTER_LINK
 NEXT_PUBLIC_FOOTER_TELEGRAM_LINK=APP_NEXT_NEXT_PUBLIC_FOOTER_TELEGRAM_LINK
 NEXT_PUBLIC_FOOTER_STAKING_LINK=APP_NEXT_NEXT_PUBLIC_FOOTER_STAKING_LINK
 NEXT_PUBLIC_SENTRY_DSN=APP_NEXT_NEXT_PUBLIC_SENTRY_DSN
+NEXT_PUBLIC_APP_INSTANCE=APP_NEXT_NEXT_PUBLIC_APP_INSTANCE

configs/sentry/react.ts

@@ -1,7 +1,7 @@
 import type * as Sentry from '@sentry/react';
 import { BrowserTracing } from '@sentry/tracing';
 
-const config: Sentry.BrowserOptions = {
+export const config: Sentry.BrowserOptions = {
   environment: process.env.VERCEL_ENV || process.env.NODE_ENV,
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
   integrations: [ new BrowserTracing() ],
@@ -10,4 +10,6 @@ const config: Sentry.BrowserOptions = {
   tracesSampleRate: 1.0,
 };
 
-export default config;
+export function configureScope(scope: Sentry.Scope) {
+  scope.setTag('app_instance', process.env.NEXT_PUBLIC_APP_INSTANCE);
+}

lib/hooks/useConfigSentry.tsx

@@ -0,0 +1,11 @@
+import * as Sentry from '@sentry/react';
+import { config, configureScope } from 'configs/sentry/react';
+import React from 'react';
+
+export default function useConfigSentry() {
+  React.useEffect(() => {
+    // gotta init sentry in browser
+    Sentry.init(config);
+    Sentry.configureScope(configureScope);
+  }, []);
+}

pages/_app.tsx

@@ -1,19 +1,15 @@
 import { ChakraProvider } from '@chakra-ui/react';
-import * as Sentry from '@sentry/react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import sentryConfig from 'configs/sentry/react';
 import type { AppProps } from 'next/app';
 import React, { useState } from 'react';
 
+import useConfigSentry from 'lib/hooks/useConfigSentry';
 import type { ErrorType } from 'lib/hooks/useFetch';
 import theme from 'theme';
 
 function MyApp({ Component, pageProps }: AppProps) {
-  React.useEffect(() => {
-    // gotta init sentry in browser
-    Sentry.init(sentryConfig);
-  }, []);
+  useConfigSentry();
 
   const [ queryClient ] = useState(() => new QueryClient({
     defaultOptions: {