This guide provides clear, step-by-step instructions to help you integrate Marker.io into your Remix application for issue tracking and bug reporting.
Prerequisites
Before you begin, ensure you have the following:
A basic understanding of Remix and its project structure.
An active Marker.io account with a project ID.
Step 1: Set Up Your Remix Project
If you haven't set up a Remix project yet, refer to the official Remix documentation to get started.
Step 2: Install the Marker.io Browser Package
Navigate to your Remix project directory and install the Marker.io browser package using your preferred package manager:
npm install -s @marker.io/browser
# or
yarn add @marker.io/browser
Step 3: Create a Custom Hook for Marker.io
In your project's main directory (commonly named app), create a new file called useMarkerio.tsx and add the following code:
import { useEffect, useState } from 'react';
import markerSDK, { MarkerSdk } from '@marker.io/browser';
export default function useMarkerio(projectId: string) {
const [widget, setWidget] = useState<MarkerSdk | null>(null);
useEffect(() => {
if (typeof window !== 'undefined') { // Ensure client-side execution
markerSDK
.loadWidget({ project: projectId })
.then(setWidget);
}
}, [projectId]);
return widget;
}
Step 4: Integrate the Custom Hook into Your Main Component
Next, open your main layout or route file (e.g., root.tsx) and integrate the Marker.io hook:
import useMarkerio from './useMarkerio';
export default function App() {
const projectId = "YOUR_MARKER_IO_PROJECT_ID"; // Replace with your Marker.io project ID
const markerioWidget = useMarkerio(projectId);
const handleIssues = () => {
if (markerioWidget) {
markerioWidget.capture("fullscreen");
}
};
return (
<div>
<h1>Welcome to Remix!</h1>
<button onClick={handleIssues}>Report Issues</button>
<Outlet />
</div>
);
}
Note: Replace YOUR_MARKER_IO_PROJECT_ID with your actual Marker.io project ID.
Step 5: Test the Integration
Run your Remix application using the appropriate command:
npm run dev
# or
yarn dev
Open your application in a web browser. You should see a "Report an Issue" button. Clicking this button will trigger the Marker.io widget, allowing users to report issues directly.
Step 6: Secure Your Project ID
For better security, consider storing the Marker.io project ID as an environment variable or in a secure configuration file to prevent accidental exposure.
Conclusion
You've successfully integrated Marker.io with your Remix application! Users can now easily report issues, helping you track and resolve bugs more effectively.