1
2
3
4
5
6

# エラー発生時刻とコミット履歴の突き合わせ
git log --after="2026-02-28" --before="2026-03-01" --oneline

# Claude Code に依頼
「2/28 15:00 以降に発生し始めた TypeError について、
 同時刻前後のコミットから原因となった変更を特定して」

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// Sentry SDK が内部でやっていること（簡略化）
// ---- fetch のフック ----
const originalFetch = window.fetch;
window.fetch = function(...args) {
  breadcrumbs.add({
    type: 'http',
    url: args[0],
    timestamp: Date.now()
  });
  return originalFetch.apply(this, args);
};

// ---- DOM クリックのフック ----
document.addEventListener('click', (e) => {
  breadcrumbs.add({
    type: 'ui.click',
    target: describeElement(e.target),
    timestamp: Date.now()
  });
}, true);

// ---- console のフック ----
const originalConsoleError = console.error;
console.error = function(...args) {
  breadcrumbs.add({ type: 'console', level: 'error', message: args });
  return originalConsoleError.apply(this, args);
};

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

// lib/tracker.ts — React SPA 用の計装ライブラリ

type Breadcrumb = {
  timestamp: string;
  type: 'http' | 'ui.click' | 'navigation' | 'console' | 'error';
  data: Record<string, unknown>;
};

class AppTracker {
  private breadcrumbs: Breadcrumb[] = [];
  private maxBreadcrumbs = 50;
  private endpoint: string;

  constructor(endpoint: string) {
    this.endpoint = endpoint;
    this.hookFetch();
    this.hookClick();
    this.hookNavigation();
    this.hookErrors();
  }

  private add(crumb: Omit<Breadcrumb, 'timestamp'>) {
    this.breadcrumbs.push({
      ...crumb,
      timestamp: new Date().toISOString(),
    });
    if (this.breadcrumbs.length > this.maxBreadcrumbs) {
      this.breadcrumbs.shift();
    }
  }

  // ---- fetch フック ----
  private hookFetch() {
    const original = window.fetch;
    window.fetch = async (input, init) => {
      const url = typeof input === 'string' ? input : input.url;
      const method = init?.method || 'GET';
      const start = performance.now();
      try {
        const res = await original(input, init);
        this.add({
          type: 'http',
          data: { method, url, status: res.status,
                  duration_ms: Math.round(performance.now() - start) },
        });
        return res;
      } catch (err) {
        this.add({
          type: 'http',
          data: { method, url, error: String(err),
                  duration_ms: Math.round(performance.now() - start) },
        });
        throw err;
      }
    };
  }

  // ---- クリックイベント ----
  private hookClick() {
    document.addEventListener('click', (e) => {
      const el = e.target as HTMLElement;
      this.add({
        type: 'ui.click',
        data: {
          tag: el.tagName,
          id: el.id || undefined,
          text: el.textContent?.slice(0, 50) || undefined,
          className: el.className?.toString().slice(0, 80) || undefined,
        },
      });
    }, true);
  }

  // ---- React Router / History API ----
  private hookNavigation() {
    const original = history.pushState.bind(history);
    history.pushState = (...args) => {
      this.add({ type: 'navigation', data: { to: args[2] } });
      return original(...args);
    };
    window.addEventListener('popstate', () => {
      this.add({ type: 'navigation', data: { to: location.pathname } });
    });
  }

  // ---- 未処理エラー / Promise rejection ----
  private hookErrors() {
    window.addEventListener('error', (e) => {
      this.add({
        type: 'error',
        data: { message: e.message, filename: e.filename,
                lineno: e.lineno, colno: e.colno },
      });
      this.flush('error', { message: e.message, stack: e.error?.stack });
    });
    window.addEventListener('unhandledrejection', (e) => {
      this.add({
        type: 'error',
        data: { message: String(e.reason) },
      });
      this.flush('unhandledrejection', { message: String(e.reason) });
    });
  }

  // ---- バックエンドにブレッドクラム付きで送信 ----
  flush(type: string, error: Record<string, unknown>) {
    const payload = {
      type,
      error,
      breadcrumbs: [...this.breadcrumbs],
      context: {
        url: location.href,
        userAgent: navigator.userAgent,
        timestamp: new Date().toISOString(),
      },
    };
    // sendBeacon はページ離脱時でも確実に送信される
    navigator.sendBeacon(this.endpoint, JSON.stringify(payload));
  }
}

export const tracker = new AppTracker('/api/track/error');

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

# lib/tracker/middleware.py — Django 用の計装ミドルウェア

import json
import logging
import time
import traceback
import os

logger = logging.getLogger('app.tracker')

class RequestTrackingMiddleware:
    """全リクエストのコンテキストを自動記録"""

    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        request._tracker_start = time.time()
        request._tracker_breadcrumbs = []

        response = self.get_response(request)

        duration = time.time() - request._tracker_start
        log_data = {
            'type': 'request',
            'method': request.method,
            'path': request.path,
            'status': response.status_code,
            'duration_ms': int(duration * 1000),
            'user_id': getattr(request.user, 'id', None),
            'release': os.environ.get('APP_VERSION', 'unknown'),
        }

        if response.status_code >= 500:
            logger.error(json.dumps(log_data))
        elif response.status_code >= 400:
            logger.warning(json.dumps(log_data))
        else:
            logger.info(json.dumps(log_data))

        return response

    def process_exception(self, request, exception):
        duration = time.time() - getattr(request, '_tracker_start', time.time())
        logger.error(json.dumps({
            'type': 'exception',
            'exception_class': type(exception).__name__,
            'message': str(exception),
            'stack': traceback.format_exc(),
            'method': request.method,
            'path': request.path,
            'user_id': getattr(request.user, 'id', None),
            'user_agent': request.META.get('HTTP_USER_AGENT'),
            'release': os.environ.get('APP_VERSION', 'unknown'),
            'duration_ms': int(duration * 1000),
            'breadcrumbs': getattr(request, '_tracker_breadcrumbs', []),
        }))

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# lib/tracker/graphql.py — Strawberry Django 用の拡張

from strawberry.extensions import SchemaExtension
import logging
import json
import time
import os

logger = logging.getLogger('app.tracker')

class GraphQLTrackingExtension(SchemaExtension):
    """GraphQL リクエストのトラッキング"""

    def on_operation(self):
        start = time.time()
        yield
        duration = time.time() - start

        request = self.execution_context.context.request
        result = self.execution_context.result

        errors = []
        if result and result.errors:
            errors = [{'message': str(e), 'path': e.path} for e in result.errors]

        logger.info(json.dumps({
            'type': 'graphql',
            'operation': self.execution_context.operation_name,
            'duration_ms': int(duration * 1000),
            'user_id': getattr(request.user, 'id', None),
            'has_errors': bool(errors),
            'errors': errors[:5],
            'release': os.environ.get('APP_VERSION', 'unknown'),
        }))

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# lib/tracker/views.py — フロントエンドからのエラーレポート受信

import json
import logging
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from django.views.decorators.http import require_POST

logger = logging.getLogger('app.tracker')

@csrf_exempt
@require_POST
def receive_frontend_error(request):
    """フロントエンドの AppTracker.flush() からのデータを受信"""
    payload = json.loads(request.body)
    logger.error(json.dumps({
        'type': 'frontend_error',
        'error': payload.get('error'),
        'breadcrumbs': payload.get('breadcrumbs', []),
        'context': payload.get('context', {}),
        'user_id': getattr(request.user, 'id', None),
    }))
    return JsonResponse({'ok': True})

1
2
3
4
5

# settings.py
MIDDLEWARE = [
    'lib.tracker.middleware.RequestTrackingMiddleware',
    # ...
]

1
2
3
4
5
6

# schema.py
schema = strawberry.Schema(
    query=Query,
    mutation=Mutation,
    extensions=[GraphQLTrackingExtension],
)

1
2

// main.tsx
import './lib/tracker';  // import するだけでフックが有効化

1
2
3
4
5

# Claude Code のバッチ処理で直近のエラーを一括分析
claude -p "CloudWatch Logs から過去24時間のエラーを取得し、
  1. エラーを根本原因ごとにグルーピング
  2. 各グループの影響範囲（ユーザー数、発生頻度）を推定
  3. 優先度順に並べて修正案を提示" --batch

1
2
3

# CloudWatch Logs + Lambda でリアルタイムアラート
# サブスクリプションフィルタでエラーログを Lambda に転送
# Lambda から Slack/GitHub Issues に通知