es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo pasar el historial a App Insights con React Router 6

06 Aug, 2023 Programación

Azure App Insights recomienda utilizar su plugin de react para SPAs. https://learn.microsoft.com/en-us/azure/azure-monitor/app/javascript-react-plugin

En el ejemplo documentado, ellos crean manualmente un historial del navegador para pasar a la extensión.

// AppInsights.js
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ReactPlugin } from '@microsoft/applicationinsights-react-js';
import { createBrowserHistory } from 'history';

const browserHistory = createBrowserHistory({ basename: '' });
const reactPlugin = new ReactPlugin();
const appInsights = new ApplicationInsights({
    config: {
        instrumentationKey: 'TU_CLAVE_DE_INSTRUMENTACIÓN_AQUÍ',
        extensions: [reactPlugin],
        extensionConfig: {
          [reactPlugin.identifier]: { history: browserHistory }
        }
    }
});
appInsights.loadAppInsights();
export { reactPlugin, appInsights };

Sin embargo, estoy utilizando react router 6, el cual asumo que crea su propio historial del navegador. La documentación hace referencia a la documentación de react router, pero esto es para react router 5, el cual expone el historial directamente.

Con react router 6, ¿cuál sería la forma correcta de acceder al historial creado por el enrutador?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    En React Router v6, el componente BrowserRouter ya no proporciona directamente un objeto history. En su lugar, puedes usar el hook useNavigate para navegar de forma programática y acceder a la ubicación actual usando el hook useLocation.

    Para integrar Azure App Insights con React Router v6, aún puedes crear un historial del navegador utilizando la función createHistory del paquete history y pasarlo al complemento de React como una configuración de extensión.

    Aquí tienes un ejemplo de cómo puedes modificar el archivo AppInsights.js para que funcione con React Router v6:

    import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ReactPlugin } from '@microsoft/applicationinsights-react-js';
import { createHistory, createMemorySource } from 'history';
import { Router } from 'react-router-dom';

const reactPlugin = new ReactPlugin();
const appInsights = new ApplicationInsights({
  config: {
    instrumentationKey: 'TU_CLAVE_DE_INSTRUMENTACIÓN_AQUÍ',
    extensions: [reactPlugin],
    extensionConfig: {
      [reactPlugin.identifier]: {
        history: createHistory(createMemorySource('/')),
        // `createMemorySource` se utiliza para crear una ubicación inicial para el historial
        // que coincide con la URL base de tu aplicación
      },
    },
  },
});

appInsights.loadAppInsights();

export const AppInsightsRouter = ({ children }) => (
  <router history="{appInsights.getHistory()}">
    {children}
  </router>
);

export { reactPlugin, appInsights };

    En este ejemplo, utilizamos la función createHistory para crear un historial del navegador y lo pasamos al complemento de React como una configuración de extensión. Luego, utilizamos el método getHistory del objeto appInsights para obtener el historial y pasarlo al componente Router mediante un componente personalizado AppInsightsRouter.

    Ten en cuenta que utilizamos createMemorySource para crear una ubicación inicial para el historial que coincide con la URL base de tu aplicación. Es posible que necesites modificar esto dependiendo de la configuración de tu aplicación.

Comments are closed.