Skip to content

Commit 4dd9381

Browse files
peckzpeckz
authored
Merge pull request #143 from jamdotdev/devin/1769275420-csv-logs-viewer
feat: add CSV Logs Viewer utility with Datadog-inspired filtering
2 parents 8f23e06 + 96fd905 commit 4dd9381

File tree

7 files changed

+2904
-0
lines changed

7 files changed

+2904
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ Here is the list of all utilities:
5252
- [SQL Minifer](https://jam.dev/utilities/sql-minifier)
5353
- [Internet Speed Test](https://jam.dev/utilities/internet-speed-test)
5454
- [Random String Generator](https://jam.dev/utilities/random-string-generator)
55+
- [CSV file viewer](https://jam.dev/utilities/csv-file-viewer)
5556

5657
### Built With
5758

‎__tests__/fixtures/customers-1000.csv‎

Lines changed: 1001 additions & 0 deletions
Large diffs are not rendered by default.

‎components/seo/CsvViewerSEO.tsx‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
import Link from "next/link";
2+
3+
export default function CsvViewerSEO() {
4+
return (
5+
<div className="content-wrapper">
6+
<section>
7+
<h2>Free Online Log File Viewer for CSV, TSV, and Log Files</h2>
8+
<p>
9+
Quickly view, search, and filter your log files online with this free
10+
tool. Whether you're a developer debugging application logs or just
11+
need to explore a CSV file, this viewer makes it easy to find what
12+
you're looking for. Drag and drop your file and start searching
13+
instantly.
14+
</p>
15+
<p>
16+
Built with care by the developers at Jam. Open source, ad-free, and
17+
works entirely in your browser.
18+
</p>
19+
</section>
20+
21+
<section>
22+
<h2>How to Use the Log File Viewer</h2>
23+
<p>
24+
This tool works with CSV files, TSV files, and plain text log files.
25+
It automatically detects the file format and displays your data in an
26+
easy-to-read table.
27+
</p>
28+
<ul>
29+
<li>
30+
<b>Upload your file:</b> <br /> Drag and drop any .csv, .tsv, .txt,
31+
or .log file into the upload area, or click to browse.
32+
</li>
33+
<li>
34+
<b>Search instantly:</b> <br /> Use the search bar to find any text
35+
across all columns. Matches are highlighted in yellow for easy
36+
spotting.
37+
</li>
38+
<li>
39+
<b>Filter by values:</b> <br /> Click on column headers to filter by
40+
specific values. Great for narrowing down logs by service, host, or
41+
any other field.
42+
</li>
43+
<li>
44+
<b>Mark rows for tracing:</b> <br /> Click the # column to mark
45+
important rows. Use Cmd/Ctrl+click to create a second trace flow in
46+
a different color.
47+
</li>
48+
<li>
49+
<b>Expand for details:</b> <br /> Click any row to see the full
50+
content of each field.
51+
</li>
52+
</ul>
53+
</section>
54+
55+
<section>
56+
<h2>Dev Mode for Log Analysis</h2>
57+
<p>
58+
Toggle Dev Mode to unlock advanced features designed for developers
59+
analyzing application logs. When enabled, you'll see color-coded
60+
severity levels (error, warning, info, debug) and a Datadog-style
61+
sidebar for filtering by log level and other attributes.
62+
</p>
63+
<p>
64+
Dev Mode is automatically enabled when the tool detects log-like
65+
files. For regular CSV data files, it stays off to give you a clean,
66+
simple table view.
67+
</p>
68+
</section>
69+
70+
<section>
71+
<h2>Works with Any CSV or Log File</h2>
72+
<p>
73+
This viewer handles a wide variety of file formats and use cases. It's
74+
perfect for exploring data exports, analyzing server logs, reviewing
75+
application traces, or just quickly searching through any tabular
76+
data.
77+
</p>
78+
<ul>
79+
<li>
80+
<b>Application logs:</b> Debug errors, trace requests, and analyze
81+
service behavior.
82+
</li>
83+
<li>
84+
<b>Server logs:</b> Review access logs, error logs, and system
85+
events.
86+
</li>
87+
<li>
88+
<b>Data exports:</b> Explore CSV exports from databases,
89+
spreadsheets, or analytics tools.
90+
</li>
91+
<li>
92+
<b>Custom log formats:</b> Works with any comma, tab, or
93+
semicolon-separated file.
94+
</li>
95+
</ul>
96+
</section>
97+
98+
<section>
99+
<h2>More CSV and Data Utilities</h2>
100+
<p>
101+
Jam offers a collection of free developer tools for working with data.
102+
Convert between formats, parse files, and debug faster.
103+
</p>
104+
<ul>
105+
<li>
106+
<Link href="/utilities/csv-to-json">CSV to JSON Converter</Link>:
107+
Convert CSV files to JSON format for APIs and web applications.
108+
</li>
109+
<li>
110+
<Link href="/utilities/json-to-csv">JSON to CSV Converter</Link>:
111+
Transform JSON data into CSV for spreadsheets and data analysis.
112+
</li>
113+
<li>
114+
<Link href="/utilities/har-file-viewer">HAR File Viewer</Link>:
115+
Analyze HTTP Archive files to debug network requests and
116+
performance.
117+
</li>
118+
<li>
119+
<Link href="/utilities/json-formatter">JSON Formatter</Link>:
120+
Beautify and validate JSON data for easier reading.
121+
</li>
122+
</ul>
123+
</section>
124+
125+
<section>
126+
<h2>FAQs</h2>
127+
<ul>
128+
<li>
129+
<b>What file types are supported?</b> <br /> The viewer supports
130+
.csv, .tsv, .txt, and .log files. It automatically detects whether
131+
your file uses commas, tabs, or semicolons as delimiters.
132+
</li>
133+
<li>
134+
<b>Is my data secure?</b> <br /> Yes. All processing happens
135+
entirely in your browser. Your files are never uploaded to any
136+
server.
137+
</li>
138+
<li>
139+
<b>Can I use this for large files?</b> <br /> Yes. The viewer is
140+
optimized for performance and can handle files with thousands of
141+
rows. Facet filtering is limited to the most common values to keep
142+
things fast.
143+
</li>
144+
<li>
145+
<b>What is Dev Mode?</b> <br /> Dev Mode enables log-specific
146+
features like color-coded severity levels and advanced filtering.
147+
It's automatically enabled for log files and can be toggled manually
148+
for any file.
149+
</li>
150+
<li>
151+
<b>How do I trace multiple flows?</b> <br /> Click the # column to
152+
mark rows for your first trace (blue). Hold Cmd/Ctrl and click to
153+
create a second trace (green). Each trace has independent numbering.
154+
</li>
155+
<li>
156+
<b>Can I filter by multiple values?</b> <br /> Yes. Use the sidebar
157+
or column header dropdowns to select multiple values. The viewer
158+
shows rows matching any of the selected values.
159+
</li>
160+
<li>
161+
<b>How do I search for specific text?</b> <br /> Type in the search
162+
bar at the top. The viewer searches across all columns and
163+
highlights matches in yellow.
164+
</li>
165+
<li>
166+
<b>Does this work offline?</b> <br /> Once the page is loaded, yes.
167+
Since all processing happens in your browser, you can use it without
168+
an internet connection.
169+
</li>
170+
</ul>
171+
</section>
172+
</div>
173+
);
174+
}

0 commit comments

Comments
 (0)