Using highlight.io with Electron
Learn how to set up highlight.io with your Electron application.
Install the npm package & SDK.
Install the npm package highlight.run in your terminal.
# with yarn
yarn add highlight.run
# with pnpm
pnpm add highlight.run# with npm
npm install highlight.runInitialize the SDK in your frontend.
Grab your project ID from app.highlight.io/setup, and pass it as the first parameter of the H.init() method.
To get started, we recommend setting tracingOrigins and networkRecording so that we can pass a header to pair frontend and backend errors. Refer to our docs on SDK configuration and Fullstack Mapping to read more about these options.
...
import { H } from 'highlight.run';
H.init('<YOUR_PROJECT_ID>', {
serviceName: "frontend-app",
tracingOrigins: true,
networkRecording: {
enabled: true,
recordHeadersAndBody: true,
urlBlocklist: [
// insert full or partial urls that you don't want to record here
// Out of the box, Highlight will not record these URLs (they can be safely removed):
"https://www.googleapis.com/identitytoolkit",
"https://securetoken.googleapis.com",
],
},
});
...
// rendering code.Instrument Electron events
The function will forward the focus and blur events to you renderer process so that the highlight recording can track them. This will stop the Highlight recording when the app is not visible and resume the session when the app regains visibility to help minimize performance and battery impact that Highlight may have on Electron users.
const mainWindow = new BrowserWindow(...)
configureElectronHighlight(mainWindow)
Identify users.
Identify users after the authentication flow of your web app. We recommend doing this in any asynchronous, client-side context.
The first argument of identify will be searchable via the property identifier, and the second property is searchable by the key of each item in the object.
For more details, read about session search or how to identify users.
import { H } from 'highlight.run';
function Login(username: string, password: string) {
// login logic here...
// pass the user details from your auth provider to the H.identify call
H.identify('jay@highlight.io', {
id: 'very-secure-id',
phone: '867-5309',
bestFriend: 'jenny'
});
}
Verify installation
Check your dashboard for a new session. Make sure to remove the Status is Completed filter to see ongoing sessions. Don't see anything? Send us a message in our community and we can help debug.
Configure sourcemaps in CI. (optional)
To get properly enhanced stacktraces of your javascript app, we recommend instrumenting sourcemaps. If you deploy public sourcemaps, you can skip this step. Refer to our docs on sourcemaps to read more about this option.
# Upload sourcemaps to Highlight
...
npx --yes @highlight-run/sourcemap-uploader upload --apiKey ${YOUR_ORG_API_KEY} --path ./build
...Instrument your backend.
The next step is instrumenting your backend to tie logs/errors to your frontend sessions. Read more about this in our backend instrumentation section.