Set it up yourself.

Preview only. This fictional project cannot connect to TaskUp.

What should TaskUp connect?

SDK connection + browser errors included

My app uses

Visits & daily active usersPage views, visits and estimated active browsers.Clicks & conversionsCount chosen clicks and completed actions, such as a successful signup.Use my app’s signed-in user IDsCount signed-in accounts using your app’s existing authentication.Live controlsLet TaskUp change values your app registers, with local fallbacks.Failed requestsReport app requests that fail, without sending their contents.Products & estimated profit (optional)Add costs to deduct from Stripe revenue.

Usage needs your visitor notice and any required storage or analytics permission. User IDs come from your app; TaskUp cannot discover them.

1. Install

Terminal

npm install @taskup/web@0.2.8

2. Connect once

Save TaskUpClient.tsx in your components folder and render <TaskUpClient /> once in app/layout.tsx. Keep the layout as a server component.

Browser integration

"use client";
import { useEffect, useRef } from "react";
import { usePathname } from "next/navigation";
import { useTaskUp } from "@taskup/web/react";

export function TaskUpClient() {
  const pathname = usePathname();
  const previousPath = useRef<string | null>(null);
  const taskup = useTaskUp({
    projectKey: "YOUR_PUBLIC_PROJECT_KEY",
    endpoint: "https://task-up.org",
    usage: true,
    version: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA,
  });
  useEffect(() => {
    if (!pathname) return;
    if (previousPath.current !== null && previousPath.current !== pathname) taskup.trackPageView();
    previousPath.current = pathname;
  }, [pathname, taskup]);
  // Use taskup in the components that handle the selected actions below.
  return null;
}

Report failed requests

Use this wrapper for the app requests you want to monitor.

App request

const response = await taskup.fetch("/api/your-action");

Check the connection

Deploy your app and return to Setup. Report one temporary test error to verify Monitor, then remove it.

Temporary error check

taskup.reportError(new Error("TaskUp setup test"));