DevCo Japan Co., Ltd. — Build Story

ℹ︎To protect confidentiality, company names, project names, and system screenshots have been replaced with pseudonyms and mock data.

Hard-to-track API logs, visualized in one place。

LogLens is a monitoring platform for developer and operations teams that automatically logs every API request/response and enables cross-search and JSON visualization on a dashboard.

Hard-to-track communication logs scattered across servers, built in-house from scratch in 5 months, consolidated into a single monitoring platform. Incident investigation went from relying on grep to pinpointing the cause in minutes.

View the build story Try the demo

All APIs

Auto-logged

Cross-search

Date/User/Filter

JSON

request/response

LogLens

Log Monitor

10:24 tanaka GET200

10:24 suzuki POST500

10:25 tanaka PUT200

10:25 yamada GET200

{ "status": 500, "error": "timeout", "ms": 30021 }

CLIENT

About the client

DevCo Japan, running multiple services.

They operate multiple web and mobile services, with numerous APIs processing large volumes of requests every day. Service quality and incident-response speed directly shape the trust placed in the business.

With communication logs scattered across servers and root-cause analysis during incidents taking time, they needed a platform to visualize logs across the board.

BUSINESS FLOW

STEP 1

Record

Auto-capture API traffic

STEP 2

Store

Saved, linked to user and time

STEP 3

Cross-filter by date and condition

STEP 4

Visualize

Inspect details in JSON

CHALLENGE

Design challenges to solve

Four design challenges to speed up incident response.

Unify scattered logs to speed up root-cause analysis

Per-server reliance on grep makes tracing time-consuming.

Link users to requests for better reproducibility

With no way to tell who sent what, reproduction is hard。

View raw request/response to streamline investigation

Cut the parsing effort of raw logs.

Filter fast by condition to search even huge log volumes

Advanced filter search is a must.

ARCHITECTURE

An architecture we built together

Built in-house from scratch across four areas.

API traffic is auto-recorded by middleware and accumulated via a clean-architecture log-collection API. A React + Ant Design dashboard delivers cross-search and JSON visualization (built together with Amela).

EXECUTION

5 months

Period

24 man-months

Total effort

Area ①

Log recording

Challenge

Logs scattered, with missing records

Solution

Auto-record all APIs via middleware

Area ②

Store

Challenge

Not linked to users

Solution

Link to user and time via UUID

Area ③

Challenge

Cannot search huge log volumes

Solution

Cross-cutting filter search by date and condition

Area ④

Visualize

Challenge

Parsing raw logs is laborious

Solution

JSON visualization of request/response

Frontend

React

TypeScript

Ant Design

Backend

Laravel

PHP

MySQL

IMPACT

Value the platform creates

From grep to minutes for incident investigation.

Faster root-cause analysis

Cut troubleshooting time with cross-log search.

Reproducible investigation

Easy reproduction by linking users to requests.

Zero-gap audit trail

Auto-record and retain all API traffic.

Continuous service-quality improvement

Visualize error trends and feed them back into improvements.

Hard-to-track API logs, visualized in one place。

DevCo Japan, running multiple services.

Four design challenges to speed up incident response.

Built in-house from scratch across four areas.

From grep to minutes for incident investigation.

Experience log visualization in a live demo.