---
title: Logrocket
tags: others
---
# Integrate with Logrocket
login
https://app.logrocket.com

All example in below,
when you all set up, should wait a minute for response, it can work
## react example

### .html approach

- project name: <project-name>
- app/id: <app-id>
- reference: guide setting

> /public/index.html

<script src="https://cdn.lr-ingest.io/LogRocket.min.js" crossorigin="anonymous"></script>
<script>
window.LogRocket && window.LogRocket.init('<app-id>/<project-name>');

LogRocket.identify('barrystone', {
name: 'Barry Stone',
email: '[e-mail]',

// Add your own custom user variables here, ie:
subscriptionType: 'pro',
});
</script>

### app.js approach (hide sensitive data for .gitignore)
> src/index.html

<!-- LogRocket -->
<script src="https://cdn.lr-ingest.io/LogRocket.min.js" crossorigin="anonymous"></script>

> src/logrocket.js

window.LogRocket && window.LogRocket.init('<your-id>/<project-name>');

LogRocket.identify('barrystone', {
name: 'Barry Stone',
email: '[e-mail]',

// Add your own custom user variables here, ie:
subscriptionType: 'pro',
});

> .gitignore

client/src/logrocket.js

- If you want to don't show ./logrocket.js (hide some sensitive data)
can .gitignore it.
but if you want to pull this repo should remember comment

// import "./logrocket.js"

- Because is react app, we can't add external script in index.html

> src/App.js

import React from "react";
import ReactDOM from "react-dom";

import "./index.css";

import LandingScreen from "./screens/LandingScreen";

// Custom debugging setting, if show error just comment it (in .gitignore).
import "./logrocket";

const App = () => <LandingScreen />;

ReactDOM.render(<App />, document.getElementById("app"));

## nextjs example

npm i logrocket logrocket-react

- project name: <project-name>
- app/id: <app-id>/<project-name>
- reference: https://docs.logrocket.com/docs/using-logrocket-with-server-side-rendering

### apply in internal
> /pages/_app.js

function MyApp({ Component, pageProps }) {

//Integrate with LogRocket
// you can import these packages anywhere
const LogRocket = require('logrocket');
const setupLogRocketReact = require('logrocket-react');

// only initialize when in the browser
if (typeof window !== 'undefined') {
LogRocket.init('<app-id>/<project-name>');
// plugins should also only be initialized when in the browser
setupLogRocketReact(LogRocket);
}

LogRocket.identify('barrystone', {
name: 'Barry Stone',
email: '[e-mail]',

// Add your own custom user variables here, ie:
subscriptionType: 'pro',
});

return <Component {...pageProps} />;
}

export default MyApp

---
### apply with external file
> /pages/_app.js

function MyApp({ Component, pageProps }) {
//Integrate with LogRocket
require('../devTools/logrocket');

return <Component {...pageProps} />;
}
export default MyApp

> /devtools/logrocket.js

//Integrate with LogRocket

// you can import these packages anywhere
const LogRocket = require('logrocket');
const setupLogRocketReact = require('logrocket-react');

// only initialize when in the browser
if (typeof window !== 'undefined') {
LogRocket.init(`${process.env.NEXT_PUBLIC_LOGROCKET_APP_ID}`);

// plugins should also only be initialized when in the browser
// setupLogRocketReact(LogRocket);
}

LogRocket.identify(`${process.env.NEXT_PUBLIC_LOGROCKET_USER_ID}`, {
name: process.env.NEXT_PUBLIC_LOGROCKET_USER_NAME,
email: process.env.NEXT_PUBLIC_LOGROCKET_USER_EMAIL,

// Add your own custom user variables here, ie:
subscriptionType: 'pro',
});

> /.env

NEXT_PUBLIC_LOGROCKET_APP_ID = <app-id>/<project-name>
NEXT_PUBLIC_LOGROCKET_USER_ID = barrystone
NEXT_PUBLIC_LOGROCKET_USER_NAME = 'Barry Stone'
NEXT_PUBLIC_LOGROCKET_USER_EMAIL = '[e-mail]'

setupLogRocketReact(LogRocket);
will error (happen in my second project to apply it) in below:

Error: EventPluginRegistry: Cannot inject two different event plugins using the same name, `ResponderEventPlugin`.

## with @reduxjs/toolkit

Will show redux actions in console part for recoding.

> store/configureStore.js

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import LogRocket from 'logrocket';

import reducer from './reducer';

export default function () {
return configureStore({
reducer,
middleware: [...getDefaultMiddleware(), LogRocket.reduxMiddleware()],
});
}

## Add webhook with slack

1. in slack workspace channel click **more**(inside in i icon) on right top
2. press **add apps** and searching for **incoming WebHooks**
3. install and add to slack choose channel,setting it
4. in logrocket **Error setting**
5. connect to slack workspace channel with webhook url