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# oryarn 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.

Remix Integration