Real-World Scenarios

import { useEffect } from "react";
import { init, identify, sendEvent } from "@dash0/sdk-web";

function App() {
  useEffect(() => {
    init({
      serviceName: "my-react-app",
      endpoint: {
        url: "https://ingress.dash0.com",
        authToken: "auth_your_token_here",
      },
    });
  }, []);

  return <div>Your app</div>;
}

import React from "react";
import { reportError } from "@dash0/sdk-web";

class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    reportError(error, {
      componentStack: errorInfo.componentStack,
      attributes: {
        "error.boundary": this.constructor.name,
      },
    });
  }

  render() {
    if (this.state.hasError) {
      return <ErrorFallback />;
    }
    return this.props.children;
  }
}

import { identify, terminateSession, removeSignalAttribute } from "@dash0/sdk-web";

async function handleLogin(username, password) {
  const user = await authenticateUser(username, password);
  
  // Identify user after successful login
  identify(user.id, {
    name: user.username,
    email: user.email,
    roles: user.roles,
  });
}

async function handleLogout() {
  // Clear user identification
  removeSignalAttribute("user.id");
  removeSignalAttribute("user.name");
  removeSignalAttribute("user.email");
  
  // Terminate session
  terminateSession();
  
  // Perform logout
  await logoutAPI();
  window.location.href = "/login";
}

import { sendEvent } from "@dash0/sdk-web";

function handlePurchase(order) {
  sendEvent("purchase_completed", {
    title: "Purchase completed",
    data: {
      orderId: order.id,
      amount: order.total,
      currency: order.currency,
    },
    attributes: {
      "transaction.id": order.transactionId,
      "payment.method": order.paymentMethod,
      "cart.items": order.items.length,
    },
    severity: "INFO",
  });
}

import { sendEvent } from "@dash0/sdk-web";

function trackCartAbandonment(cart) {
  sendEvent("cart_abandoned", {
    attributes: {
      "cart.items": cart.items.length,
      "cart.value": cart.total,
      "cart.duration_seconds": cart.duration,
    },
  });
}

import { sendEvent } from "@dash0/sdk-web";

function trackFeatureUsage(featureName, metadata) {
  sendEvent("feature_used", {
    attributes: {
      "feature.name": featureName,
      "feature.category": metadata.category,
      "user.plan": metadata.userPlan,
    },
  });
}

import { sendEvent } from "@dash0/sdk-web";

function trackSubscriptionUpgrade(fromPlan, toPlan) {
  sendEvent("subscription_upgraded", {
    title: "User upgraded subscription",
    attributes: {
      "subscription.from": fromPlan,
      "subscription.to": toPlan,
      "subscription.price": getPlanPrice(toPlan),
    },
  });
}

import { reportError } from "@dash0/sdk-web";

async function apiCall(endpoint, options) {
  try {
    const response = await fetch(endpoint, options);
    
    if (!response.ok) {
      const errorBody = await response.text();
      reportError(`API Error: ${response.status}`, {
        attributes: {
          "http.url": endpoint,
          "http.status_code": response.status,
          "http.method": options.method || "GET",
          "api.endpoint": endpoint,
        },
      });
    }
    
    return response.json();
  } catch (error) {
    reportError(error, {
      attributes: {
        "api.endpoint": endpoint,
        "error.type": "network",
      },
    });
    throw error;
  }
}

import { reportError } from "@dash0/sdk-web";

async function fetchWithRetry(url, maxRetries = 3) {
  for (let i = 0; i < maxRetries; i++) {
    try {
      const response = await fetch(url);
      if (response.ok) return response.json();
    } catch (error) {
      if (i === maxRetries - 1) {
        reportError(error, {
          attributes: {
            "url": url,
            "retry_count": maxRetries,
            "error.type": "network",
          },
        });
        throw error;
      }
    }
  }
}

import { sendEvent } from "@dash0/sdk-web";

function validateForm(formData) {
  const errors = [];
  
  if (!formData.email.includes("@")) {
    errors.push("email");
    sendEvent("validation_error", {
      attributes: {
        "form.id": "registration",
        "field.name": "email",
        "validation.rule": "email_format",
      },
      severity: "WARN",
    });
  }
  
  return errors.length === 0;
}

import { sendEvent } from "@dash0/sdk-web";

async function processLargeDataset(data) {
  const startTime = Date.now();
  
  try {
    const result = await processData(data);
    
    sendEvent("operation_completed", {
      title: "Data processing completed",
      attributes: {
        "operation.name": "process_large_dataset",
        "operation.duration_ms": Date.now() - startTime,
        "operation.records": data.length,
        "operation.success": true,
      },
    });
    
    return result;
  } catch (error) {
    sendEvent("operation_failed", {
      title: "Data processing failed",
      attributes: {
        "operation.name": "process_large_dataset",
        "operation.duration_ms": Date.now() - startTime,
        "operation.records": data.length,
      },
      severity: "ERROR",
    });
    throw error;
  }
}

import { sendEvent } from "@dash0/sdk-web";

function trackOnboardingStep(step, totalSteps) {
  sendEvent("onboarding_step_completed", {
    attributes: {
      "workflow.id": "onboarding-2024",
      "workflow.step": step,
      "workflow.total_steps": totalSteps,
    },
  });
}

function trackOnboardingComplete(duration) {
  sendEvent("onboarding_completed", {
    title: "User completed onboarding",
    attributes: {
      "workflow.id": "onboarding-2024",
      "workflow.duration_seconds": duration,
    },
  });
}

import { addSignalAttribute, removeSignalAttribute } from "@dash0/sdk-web";

function setTenantContext(tenantId) {
  addSignalAttribute("tenant.id", tenantId);
  addSignalAttribute("tenant.region", getTenantRegion(tenantId));
}

function clearTenantContext() {
  removeSignalAttribute("tenant.id");
  removeSignalAttribute("tenant.region");
}

import { addSignalAttribute, sendEvent } from "@dash0/sdk-web";

function initializeABTest(experimentName, variant) {
  addSignalAttribute("experiment.name", experimentName);
  addSignalAttribute("experiment.variant", variant);
  
  sendEvent("experiment_assigned", {
    attributes: {
      "experiment.name": experimentName,
      "experiment.variant": variant,
    },
  });
}

import { reportError } from "@dash0/sdk-web";

async function processPayment(amount, paymentMethod) {
  try {
    const result = await stripe.confirmPayment({
      amount,
      payment_method: paymentMethod,
    });
    return result;
  } catch (error) {
    reportError(error, {
      attributes: {
        "integration": "stripe",
        "payment.amount": amount,
        "error.code": error.code,
        "error.decline_code": error.decline_code,
      },
    });
    throw error;
  }
}