Build a Custom Analytics Dashboard

npx create-next-app@latest analytics-dashboard
cd analytics-dashboard
npm install chart.js react-chartjs-2 date-fns

NEXT_PUBLIC_SNIPLINK_API_KEY=snip_live_your_api_key_here
NEXT_PUBLIC_SNIPLINK_WORKSPACE_ID=ws_xxxxxxxxxxxxx

npm create vue@latest analytics-dashboard
cd analytics-dashboard
npm install chart.js vue-chartjs date-fns

VITE_SNIPLINK_API_KEY=snip_live_your_api_key_here
VITE_SNIPLINK_WORKSPACE_ID=ws_xxxxxxxxxxxxx

mkdir analytics-dashboard
cd analytics-dashboard
npm init -y
npm install chart.js date-fns

export const CONFIG = {
  apiKey: 'snip_live_your_api_key_here',
  workspaceId: 'ws_xxxxxxxxxxxxx',
  apiBase: 'https://api.sniplink.co/v1',
};

// lib/sniplink.ts
const API_BASE = 'https://api.sniplink.co/v1';
const API_KEY = process.env.SNIPLINK_API_KEY!; // Server-side only

// Link-level analytics response
interface LinkAnalyticsResponse {
  totalClicks: number;
  regularClicks: number;
  qrScans: number;
  qrScanPercentage: number;
  dailyStats: Array<{ date: string; clicks: number; qrScans: number }>;
  topCountries: Array<{ country: string; clicks: number }>;
  topReferrers: Array<{ referrer: string; clicks: number }>;
}

// Workspace-level analytics response
interface WorkspaceAnalyticsResponse {
  summary: {
    totalClicks: number;
    regularClicks: number;
    qrScans: number;
    qrScanPercentage: number;
    uniqueVisitors: number;
  };
  dailyStats: Array<{ date: string; clicks: number; qrScans: number }>;
  topLinks: Array<{ linkId: string; shortUrl: string; clicks: number }>;
  geographic: Array<{ country: string; clicks: number }>;
  devices: Array<{ name: string; count: number }>;
  browsers: Array<{ name: string; count: number }>;
  referrers: Array<{ name: string; count: number }>;
}

interface FetchOptions {
  days?: number; // 1-365, default 30
}

class SnipLinkAPI {
  private cache = new Map<string, { data: any; timestamp: number }>();
  private cacheTTL = 60000; // 1 minute cache

  async getLinkAnalytics(
    workspaceId: string,
    linkId: string,
    options?: FetchOptions
  ): Promise<LinkAnalyticsResponse> {
    const cacheKey = `analytics-${linkId}-${options?.days || 30}`;
    const cached = this.cache.get(cacheKey);

    if (cached && Date.now() - cached.timestamp < this.cacheTTL) {
      return cached.data;
    }

    const url = new URL(
      `${API_BASE}/workspaces/${workspaceId}/links/${linkId}/analytics`
    );
    if (options?.days) url.searchParams.set(&#039;days&#039;, String(options.days));

    const response = await fetch(url.toString(), {
      headers: {
        &#039;X-API-Key&#039;: API_KEY,
        &#039;Content-Type&#039;: &#039;application/json&#039;,
      },
    });

    if (!response.ok) {
      const error = await response.json();
      throw new Error(error.error?.message || &#039;API request failed&#039;);
    }

    const data = await response.json();
    this.cache.set(cacheKey, { data, timestamp: Date.now() });
    return data;
  }

  async getWorkspaceAnalytics(
    workspaceId: string,
    options?: FetchOptions
  ): Promise<WorkspaceAnalyticsResponse> {
    const cacheKey = `workspace-analytics-${workspaceId}-${options?.days || 30}`;
    const cached = this.cache.get(cacheKey);

    if (cached && Date.now() - cached.timestamp < this.cacheTTL) {
      return cached.data;
    }

    const url = new URL(`${API_BASE}/workspaces/${workspaceId}/analytics`);
    if (options?.days) url.searchParams.set(&#039;days&#039;, String(options.days));

    const response = await fetch(url.toString(), {
      headers: {
        &#039;X-API-Key&#039;: API_KEY,
        &#039;Content-Type&#039;: &#039;application/json&#039;,
      },
    });

    if (!response.ok) {
      const error = await response.json();
      throw new Error(error.error?.message || &#039;API request failed&#039;);
    }

    const data = await response.json();
    this.cache.set(cacheKey, { data, timestamp: Date.now() });
    return data;
  }

  async getLinks(workspaceId: string) {
    // Returns { links: Link[], pagination: { ... } }
    const response = await fetch(`${API_BASE}/workspaces/${workspaceId}/links`, {
      headers: {
        &#039;X-API-Key&#039;: API_KEY,
        &#039;Content-Type&#039;: &#039;application/json&#039;,
      },
    });

    if (!response.ok) {
      const error = await response.json();
      throw new Error(error.error?.message || &#039;Failed to fetch links&#039;);
    }

    return response.json();
  }

  clearCache() {
    this.cache.clear();
  }
}

export const api = new SnipLinkAPI();

// services/sniplink.ts
const API_BASE = 'https://api.sniplink.co/v1';
const API_KEY = import.meta.env.VITE_SNIPLINK_API_KEY;

interface FetchOptions {
  startDate?: string;
  endDate?: string;
}

class SnipLinkAPI {
  private cache = new Map<string, { data: any; timestamp: number }>();
  private cacheTTL = 60000;

  private async fetch<T>(endpoint: string, options?: FetchOptions): Promise<T> {
    const cacheKey = `${endpoint}?${JSON.stringify(options || {})}`;
    const cached = this.cache.get(cacheKey);

    if (cached && Date.now() - cached.timestamp < this.cacheTTL) {
      return cached.data;
    }

    const url = new URL(`${API_BASE}${endpoint}`);
    if (options?.startDate) url.searchParams.set(&#039;startDate&#039;, options.startDate);
    if (options?.endDate) url.searchParams.set(&#039;endDate&#039;, options.endDate);

    const response = await fetch(url.toString(), {
      headers: {
        &#039;X-API-Key&#039;: API_KEY,
        &#039;Content-Type&#039;: &#039;application/json&#039;,
      },
    });

    if (!response.ok) {
      const error = await response.json();
      throw new Error(error.message || &#039;API request failed&#039;);
    }

    const data = await response.json();
    this.cache.set(cacheKey, { data, timestamp: Date.now() });
    return data;
  }

  async getOverallAnalytics(linkId: string, options?: FetchOptions) {
    return this.fetch(`/links/${linkId}/analytics`, options);
  }

  async getTimeseries(linkId: string, options?: FetchOptions & { interval?: &#039;1h&#039; | &#039;1d&#039; | &#039;1w&#039; }) {
    return this.fetch(`/links/${linkId}/analytics/timeseries`, options);
  }

  async getCountries(linkId: string, options?: FetchOptions) {
    return this.fetch(`/links/${linkId}/analytics/countries`, options);
  }

  async getReferrers(linkId: string, options?: FetchOptions) {
    return this.fetch(`/links/${linkId}/analytics/referrers`, options);
  }

  async getDevices(linkId: string, options?: FetchOptions) {
    return this.fetch(`/links/${linkId}/analytics/devices`, options);
  }

  async getLinks(workspaceId: string) {
    return this.fetch(`/workspaces/${workspaceId}/links`);
  }

  clearCache() {
    this.cache.clear();
  }
}

export const api = new SnipLinkAPI();

// api.js
import { CONFIG } from './config.js';

class SnipLinkAPI {
  constructor() {
    this.cache = new Map();
    this.cacheTTL = 60000; // 1 minute
  }

  async fetch(endpoint, options = {}) {
    const cacheKey = `${endpoint}?${JSON.stringify(options)}`;
    const cached = this.cache.get(cacheKey);

    if (cached && Date.now() - cached.timestamp < this.cacheTTL) {
      return cached.data;
    }

    const url = new URL(`${CONFIG.apiBase}${endpoint}`);
    if (options.startDate) url.searchParams.set(&#039;startDate&#039;, options.startDate);
    if (options.endDate) url.searchParams.set(&#039;endDate&#039;, options.endDate);
    if (options.interval) url.searchParams.set(&#039;interval&#039;, options.interval);

    const response = await fetch(url.toString(), {
      headers: {
        &#039;X-API-Key&#039;: CONFIG.apiKey,
        &#039;Content-Type&#039;: &#039;application/json&#039;,
      },
    });

    if (!response.ok) {
      const error = await response.json();
      throw new Error(error.message || &#039;API request failed&#039;);
    }

    const data = await response.json();
    this.cache.set(cacheKey, { data, timestamp: Date.now() });
    return data;
  }

  async getOverallAnalytics(linkId, options) {
    return this.fetch(`/links/${linkId}/analytics`, options);
  }

  async getTimeseries(linkId, options) {
    return this.fetch(`/links/${linkId}/analytics/timeseries`, options);
  }

  async getCountries(linkId, options) {
    return this.fetch(`/links/${linkId}/analytics/countries`, options);
  }

  async getReferrers(linkId, options) {
    return this.fetch(`/links/${linkId}/analytics/referrers`, options);
  }

  async getDevices(linkId, options) {
    return this.fetch(`/links/${linkId}/analytics/devices`, options);
  }

  async getLinks(workspaceId) {
    return this.fetch(`/workspaces/${workspaceId}/links`);
  }

  clearCache() {
    this.cache.clear();
  }
}

export const api = new SnipLinkAPI();

// components/ClicksChart.tsx
'use client';

import { Line } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler,
} from 'chart.js';
import { format } from 'date-fns';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler
);

interface TimeseriesData {
  timestamp: string;
  clicks: number;
  uniqueClicks: number;
}

interface ClicksChartProps {
  data: TimeseriesData[];
}

export function ClicksChart({ data }: ClicksChartProps) {
  const chartData = {
    labels: data.map((d) => format(new Date(d.timestamp), 'MMM d, h:mm a')),
    datasets: [
      {
        label: 'Total Clicks',
        data: data.map((d) => d.clicks),
        borderColor: 'rgb(16, 185, 129)',
        backgroundColor: 'rgba(16, 185, 129, 0.1)',
        fill: true,
        tension: 0.4,
      },
      {
        label: 'Unique Clicks',
        data: data.map((d) => d.uniqueClicks),
        borderColor: 'rgb(59, 130, 246)',
        backgroundColor: 'rgba(59, 130, 246, 0.1)',
        fill: true,
        tension: 0.4,
      },
    ],
  };

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        position: 'top' as const,
      },
      title: {
        display: true,
        text: 'Clicks Over Time',
      },
    },
    scales: {
      y: {
        beginAtZero: true,
        ticks: {
          precision: 0,
        },
      },
    },
  };

  return (
    <div style={{ height: &#039;400px&#039; }}>
      <Line data={chartData} options={options} />
    </div>
  );
}

// components/CountryChart.tsx
'use client';

import { Pie } from 'react-chartjs-2';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';

ChartJS.register(ArcElement, Tooltip, Legend);

interface CountryData {
  country: string;
  clicks: number;
}

interface CountryChartProps {
  data: CountryData[];
}

export function CountryChart({ data }: CountryChartProps) {
  // Take top 10 countries, group the rest as "Other"
  const topCountries = data.slice(0, 10);
  const otherClicks = data.slice(10).reduce((sum, c) => sum + c.clicks, 0);

  if (otherClicks > 0) {
    topCountries.push({ country: 'Other', clicks: otherClicks });
  }

  const chartData = {
    labels: topCountries.map((c) => c.country),
    datasets: [
      {
        label: 'Clicks by Country',
        data: topCountries.map((c) => c.clicks),
        backgroundColor: [
          'rgba(16, 185, 129, 0.8)',
          'rgba(59, 130, 246, 0.8)',
          'rgba(251, 191, 36, 0.8)',
          'rgba(239, 68, 68, 0.8)',
          'rgba(168, 85, 247, 0.8)',
          'rgba(236, 72, 153, 0.8)',
          'rgba(14, 165, 233, 0.8)',
          'rgba(245, 158, 11, 0.8)',
          'rgba(34, 197, 94, 0.8)',
          'rgba(99, 102, 241, 0.8)',
          'rgba(156, 163, 175, 0.8)',
        ],
        borderWidth: 2,
        borderColor: '#fff',
      },
    ],
  };

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        position: 'right' as const,
      },
      title: {
        display: true,
        text: 'Clicks by Country',
      },
    },
  };

  return (
    <div style={{ height: &#039;400px&#039; }}>
      <Pie data={chartData} options={options} />
    </div>
  );
}

// components/ReferrerChart.tsx
'use client';

import { Bar } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);

interface ReferrerData {
  referrer: string;
  clicks: number;
}

interface ReferrerChartProps {
  data: ReferrerData[];
}

export function ReferrerChart({ data }: ReferrerChartProps) {
  const chartData = {
    labels: data.map((r) => r.referrer || 'Direct'),
    datasets: [
      {
        label: 'Clicks',
        data: data.map((r) => r.clicks),
        backgroundColor: 'rgba(16, 185, 129, 0.8)',
        borderColor: 'rgb(16, 185, 129)',
        borderWidth: 1,
      },
    ],
  };

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    indexAxis: 'y' as const,
    plugins: {
      legend: {
        display: false,
      },
      title: {
        display: true,
        text: 'Top Referrers',
      },
    },
    scales: {
      x: {
        beginAtZero: true,
        ticks: {
          precision: 0,
        },
      },
    },
  };

  return (
    <div style={{ height: &#039;400px&#039; }}>
      <Bar data={chartData} options={options} />
    </div>
  );
}

// app/dashboard/page.tsx
'use client';

import { useState, useEffect } from 'react';
import { api } from '@/lib/sniplink';
import { ClicksChart } from '@/components/ClicksChart';
import { CountryChart } from '@/components/CountryChart';
import { ReferrerChart } from '@/components/ReferrerChart';
import { subDays, format } from 'date-fns';

const WORKSPACE_ID = process.env.NEXT_PUBLIC_SNIPLINK_WORKSPACE_ID!;

export default function DashboardPage() {
  const [links, setLinks] = useState<any[]>([]);
  const [selectedLink, setSelectedLink] = useState<string>(&#039;&#039;);
  const [startDate, setStartDate] = useState(format(subDays(new Date(), 30), &#039;yyyy-MM-dd&#039;));
  const [endDate, setEndDate] = useState(format(new Date(), &#039;yyyy-MM-dd&#039;));
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const [overallData, setOverallData] = useState<any>(null);
  const [timeseriesData, setTimeseriesData] = useState<any[]>([]);
  const [countryData, setCountryData] = useState<any[]>([]);
  const [referrerData, setReferrerData] = useState<any[]>([]);
  const [deviceData, setDeviceData] = useState<any[]>([]);

  // Load links on mount
  useEffect(() => {
    async function loadLinks() {
      try {
        const data = await api.getLinks(WORKSPACE_ID);
        setLinks(data.links || []);
        if (data.links?.length > 0) {
          setSelectedLink(data.links[0].id);
        }
        setLoading(false);
      } catch (err) {
        setError(err instanceof Error ? err.message : &#039;Failed to load links&#039;);
        setLoading(false);
      }
    }
    loadLinks();
  }, []);

  // Load analytics when link or date range changes
  useEffect(() => {
    if (!selectedLink) return;

    async function loadAnalytics() {
      setLoading(true);
      try {
        const options = {
          startDate: new Date(startDate).toISOString(),
          endDate: new Date(endDate).toISOString(),
        };

        const [overall, timeseries, countries, referrers, devices] = await Promise.all([
          api.getOverallAnalytics(selectedLink, options),
          api.getTimeseries(selectedLink, { ...options, interval: &#039;1d&#039; }),
          api.getCountries(selectedLink, options),
          api.getReferrers(selectedLink, options),
          api.getDevices(selectedLink, options),
        ]);

        setOverallData(overall);
        setTimeseriesData(timeseries.data || []);
        setCountryData(countries.data || []);
        setReferrerData(referrers.data || []);
        setDeviceData(devices.data || []);
        setError(null);
      } catch (err) {
        setError(err instanceof Error ? err.message : &#039;Failed to load analytics&#039;);
      } finally {
        setLoading(false);
      }
    }

    loadAnalytics();

    // Set up auto-refresh every 30 seconds
    const interval = setInterval(() => {
      api.clearCache();
      loadAnalytics();
    }, 30000);

    return () => clearInterval(interval);
  }, [selectedLink, startDate, endDate]);

  if (loading && !overallData) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <div className="text-gray-600">Loading...</div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <div className="rounded-lg border border-red-200 bg-red-50 p-6 text-red-800">
          <h2 className="mb-2 text-lg font-semibold">Error</h2>
          <p>{error}</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 p-8">
      <div className="mx-auto max-w-7xl">
        <h1 className="mb-8 text-3xl font-bold text-gray-900">Analytics Dashboard</h1>

        {/* Filters */}
        <div className="mb-8 grid gap-4 md:grid-cols-3">
          <div>
            <label className="mb-2 block text-sm font-medium text-gray-700">Link</label>
            <select
              value={selectedLink}
              onChange={(e) => setSelectedLink(e.target.value)}
              className="w-full rounded-lg border border-gray-300 px-4 py-2"
            >
              {links.map((link) => (
                <option key={link.id} value={link.id}>
                  {link.shortUrl}
                </option>
              ))}
            </select>
          </div>

          <div>
            <label className="mb-2 block text-sm font-medium text-gray-700">Start Date</label>
            <input
              type="date"
              value={startDate}
              onChange={(e) => setStartDate(e.target.value)}
              className="w-full rounded-lg border border-gray-300 px-4 py-2"
            />
          </div>

          <div>
            <label className="mb-2 block text-sm font-medium text-gray-700">End Date</label>
            <input
              type="date"
              value={endDate}
              onChange={(e) => setEndDate(e.target.value)}
              className="w-full rounded-lg border border-gray-300 px-4 py-2"
            />
          </div>
        </div>

        {/* Stats Cards */}
        {overallData && (
          <div className="mb-8 grid gap-6 md:grid-cols-4">
            <StatCard title="Total Clicks" value={overallData.clicks || 0} />
            <StatCard title="Unique Visitors" value={overallData.uniqueClicks || 0} />
            <StatCard
              title="Click-Through Rate"
              value={`${((overallData.ctr || 0) * 100).toFixed(2)}%`}
            />
            <StatCard title="Avg. Click Rate" value={`${overallData.avgClicksPerDay || 0}/day`} />
          </div>
        )}

        {/* Charts */}
        <div className="grid gap-8 md:grid-cols-2">
          <div className="rounded-lg border border-gray-200 bg-white p-6">
            <ClicksChart data={timeseriesData} />
          </div>

          <div className="rounded-lg border border-gray-200 bg-white p-6">
            <CountryChart data={countryData} />
          </div>

          <div className="rounded-lg border border-gray-200 bg-white p-6">
            <ReferrerChart data={referrerData.slice(0, 10)} />
          </div>

          <div className="rounded-lg border border-gray-200 bg-white p-6">
            <h3 className="mb-4 text-lg font-semibold">Device Breakdown</h3>
            <div className="space-y-3">
              {deviceData.map((device: any) => (
                <div key={device.device} className="flex items-center justify-between">
                  <span className="capitalize text-gray-700">{device.device}</span>
                  <div className="flex items-center gap-3">
                    <div className="h-2 w-32 overflow-hidden rounded-full bg-gray-200">
                      <div
                        className="h-full bg-green-500"
                        style={{
                          width: `${(device.clicks / overallData.clicks) * 100}%`,
                        }}
                      />
                    </div>
                    <span className="w-16 text-right text-sm font-medium text-gray-900">
                      {device.clicks}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function StatCard({ title, value }: { title: string; value: string | number }) {
  return (
    <div className="rounded-lg border border-gray-200 bg-white p-6">
      <div className="text-sm font-medium text-gray-600">{title}</div>
      <div className="mt-2 text-3xl font-bold text-gray-900">{value}</div>
    </div>
  );
}

// utils/export.ts
export function exportToCSV(data: any[], filename: string) {
  if (data.length === 0) return;

  // Get all keys from the first object
  const headers = Object.keys(data[0]);

  // Create CSV content
  const csvContent = [
    headers.join(','), // Header row
    ...data.map((row) =>
      headers.map((header) => {
        const value = row[header];
        // Escape quotes and wrap in quotes if contains comma
        const stringValue = String(value || '');
        return stringValue.includes(',') ? `"${stringValue.replace(/"/g, '""')}"` : stringValue;
      }).join(',')
    ),
  ].join('\n');

  // Create blob and download
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = `${filename}-${new Date().toISOString().split('T')[0]}.csv`;
  link.click();
  URL.revokeObjectURL(link.href);
}

// Usage in dashboard:
// <button onClick={() => exportToCSV(timeseriesData, 'analytics')}>
//   Export to CSV
// </button>

// pages/api/webhooks/clicks.ts (Next.js API route)
import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  // Verify webhook signature (see Webhooks guide)
  const signature = req.headers['x-sniplink-signature'] as string;
  // ... verify signature logic here

  const event = req.body;

  if (event.type === 'link.clicked') {
    // Broadcast to connected clients via WebSocket or Server-Sent Events
    // Or update a shared state/database that the dashboard polls

    console.log('New click:', event.data);

    // Example: Broadcast via Pusher, Ably, or custom WebSocket
    // pusher.trigger('analytics', 'new-click', event.data);
  }

  res.status(200).json({ received: true });
}

// In your dashboard component, listen for real-time updates:
// useEffect(() => {
//   const pusher = new Pusher('YOUR_PUSHER_KEY', { cluster: 'us2' });
//   const channel = pusher.subscribe('analytics');
//
//   channel.bind('new-click', (data: any) => {
//     // Update charts in real-time
//     setOverallData(prev => ({ ...prev, clicks: prev.clicks + 1 }));
//   });
//
//   return () => {
//     channel.unbind_all();
//     channel.unsubscribe();
//   };
// }, []);

// app/dashboard/page.tsx
export async function generateStaticParams() {
  // Pre-render dashboard for specific links
  return [];
}

async function getInitialData(linkId: string, workspaceId: string) {
  // Fetch on server side
  const res = await fetch(`https://api.sniplink.co/v1/workspaces/${workspaceId}/links/${linkId}/analytics`, {
    headers: { 'X-API-Key': process.env.SNIPLINK_API_KEY! },
  });
  return res.json();
}

// lib/cache.ts
const CACHE_DURATIONS = {
  overall: 60000,      // 1 minute
  timeseries: 300000,  // 5 minutes
  countries: 600000,   // 10 minutes
  referrers: 600000,   // 10 minutes
  devices: 600000,     // 10 minutes
};

// Use different cache TTLs based on data type
// Overall stats change frequently → short cache
// Geographic/device data changes slowly → long cache

function SkeletonCard() {
  return (
    <div className="animate-pulse rounded-lg border border-gray-200 bg-white p-6">
      <div className="h-4 w-24 rounded bg-gray-200"></div>
      <div className="mt-2 h-8 w-32 rounded bg-gray-300"></div>
    </div>
  );
}

// components/ErrorBoundary.tsx
'use client';

import { Component, ReactNode } from 'react';

interface Props {
  children: ReactNode;
}

interface State {
  hasError: boolean;
}

export class ChartErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return (
        <div className="rounded-lg border border-red-200 bg-red-50 p-6">
          <p className="text-red-800">Failed to render chart</p>
        </div>
      );
    }

    return this.props.children;
  }
}

// Wrap charts:
// <ChartErrorBoundary>
//   <ClicksChart data={timeseriesData} />
// </ChartErrorBoundary>

# Click your short link multiple times from different devices/browsers
# Use VPN or proxy to simulate different countries
# Share link on social media to generate referrer data