mozilla-frontend-infra / react-lazylog Goto Github PK

Is there any way to wrap the text?

Thank you.

There's been a couple of new features since the last release, namely:

• 4354d83

• 49f22dc

We should publish a new version and update the gh-pages branch.

I have an array that updates from an API by getting a chunk of data, and I want to use lazylog to present it in separated lines, can I do that?

I am using LazyLog with websocket.

Current Behavior: All the messages are retained.

Please let me know how to keep only latest 1000 lines.

Any references/samples will be helpful.

After update lazy-logger to version 3.1.1 (from 2.x) the problem Uncaught TypeError: e is not a function still exist.

For 2.x import { LazyLog } from 'react-lazylog/lib/LazyLog.es5'; worked but for 3.1.1 import {LazyStream, ScrollFollow} from 'react-lazylog/es5'; generating error.

This is a great piece of work we would want to leverage at our company: Amazon. However, we have an internal npm repository and the requirement is that libraries have an MIT license. Would you be willing to change the license to an MIT license?

Hi @helfi92 - I'm using the ScrollFollow HOC for log viewing in one of my react applications and it's working great so thanks for the great library. 👍

In my app, I want to be able to do is to update the url with the currently selected line number like in your example, so I can share a url with another team member and they can see exactly what I'm seeing. I've tried to do this by means of the onHighlight event changing a Highlight state object but I'm having trouble with Uncaught Error: Maximum update depth exceeded.

Here's a small extract of what I've tried so far:

<ScrollFollow startFollowing={follow} render={({follow, onScroll}) => (
                    <LazyLog extraLines={1} scrollToLine={highlight.start + 20}
                             onHighlight={onHighlight} highlight={[highlight.start, highlight.start + 1]} text={buildLogs} enableSearch
                             rowHeight={13}
                             selectableLines={true}
                             follow={follow}
                             onScroll={onScroll}/>
                )}/>

Here is the highlight state I'm trying to update inside onHighlight:

interface Highlight {
    start: number;
    end: number;
}

and my event handler:

    function onHighlight(data) {
        const highlight = {start: data._start, end: data._end};
        setHighlight(highlight)
    }

Could you suggest the best approach please to overcome the infinite loop I'm experiencing?

Word-wrapping of lines would be super nice.

I have added colors based on conditions to each log line to log. On searching anything from the searchbar, these colors are lost and are restored when the search text is removed

This log file looks very mangled: https://tools.taskcluster.net/groups/Ya07T4ynTi6aZNRH9WdQ0Q/tasks/TIBI4C7bRzW6jvQXn980gg/runs/0/logs/public%2Flogs%2Flive.log#L394648

As far as I understand, this is because it contains byte sequences like (in JS string syntax) "\x1B[A\x1B[K" which seem not to be interpreted in the same way that a terminal emulator does. Could this be fixed in this library?

Hi,

I've the following stacktrace using lazylog component with Next.js and TypeScript support :

self is not defined
ReferenceError: self is not defined
    at Object.<anonymous> (D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:31979)
    at t (D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:415)
    at Object.<anonymous> (D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:47729)
    at t (D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:415)
    at Object.<anonymous> (D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:47638)
    at t (D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:415)
    at D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:777
    at D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:787
    at D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:143
    at Object.<anonymous> (D:\Developpement\web-security-analyzer\client\node_modules\react-lazylog\build\index.js:1:262)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)

Reproduced with:

• v3.0.0
• v4.0.0
• v4.2.0

React component:

import * as React from 'react'
import * as LazyLog from 'react-lazylog'

interface Props {}
interface State {}

export default class sqlmap extends React.Component<Props, State> {
  state: State = { }
  render() {
    return (<LazyLog url="http://localhost:5000/sqlmap.log" />)
  }
}

Any idea ?

The readme links to the demo in the docs, however it is currently failing to load (presumably since that Taskcluster log has since been expired):
https://mozilla-frontend-infra.github.io/react-lazylog/

It would be good to switch that to a longer-lived log resource (that's still a long enough log to show off the advantages of react-lazylog).

I want to change the color of the top navbar of the react lazy log

I tried using the prop style and the container style but they did not work for me. Is there a way to do it.

Unless I'm missing something, it seems like right now it's searching on every keystroke:

https://github.com/mozilla-frontend-infra/react-lazylog/blob/master/src/components/SearchBar/index.jsx#L60-L63

Any chance we could expose an option to debounce user input on the search bar? I.e., only search until after the user has stopped typing?

When colouring log text with ANSI escape codes, react-lazylog displays the escape code instead of parsing it.

A simple example of an ANSI-escaped log can be found here: https://gist.githubusercontent.com/timdudman/b84de8147a6d7301554ec22a9993c8b8/raw/bfb35ead64dba8788b5d7f609f9ee1e0cd6f377a/ansi.log

Oct 10, 2019 07:22:57 \x1b[34mINFO:\x1b[0m Some text
Oct 10, 2019 07:22:58 \x1b[34mINFO:\x1b[0m Some more text

INFO should be coloured blue, and WARNING should be coloured red. Passing these lines to src/ansiparse.js directly results in the correct behaviour:

import ansiparse from './ansiparse.js'
import { decode } from './encoding.js';
import str2ab from 'string-to-arraybuffer';

ansiparse(decode(str2ab("Oct 10, 2019 07:22:57 \x1b[34mINFO:\x1b[0m Some text")))

Within react-lazylog 4.3.2 however, the ANSI codes are passed to src/ansiparse.js with an additional escape, i.e. \\x1b[34mINFO:\\x1b instead of \x1b[34mINFO:\x1b (thanks for investigating @helfi92):

import React from 'react';
import { render } from 'react-dom';
import { LazyLog } from 'react-lazylog';

render((
  <LazyLog url="https://gist.githubusercontent.com/timdudman/b84de8147a6d7301554ec22a9993c8b8/raw/bfb35ead64dba8788b5d7f609f9ee1e0cd6f377a/ansi.log" />
), document.getElementById('root'));

I had set the containerStyle prop on LazyLog to add a little margin at the bottom like so:

<LazyLog
  containerStyle={{ marginBottom: '3em' }}
/>

And it worked well to add a little extra space at the bottom of the lines, when scrolled all the way to the bottom. But it disabled horizontal scrolling. So I had to set it to:

containerStyle={{ marginBottom: '3em', overflow: 'auto hidden' }}

which worked. But seems like we shouldn't need to do that.

From looking at the code, LazyLog has a property called fetchOptions. I wanted to use it so that I could turn off the compression in the request via Accept-Encoding header. However, setting the fetchOptions doesn't seem to have any effect.

without any specified fetchOptions, the LazyLog will do a fetch command with the following options:

'accept-encoding: gzip, deflate, br'

which is not what i want.

I did the following:

code:

const fetchOptions: RequestInit = {
    headers: {
      'accept-encoding':'indentity',
    }
  }

  <LazyLog stream url=<url>
        fetchOptions={fetchOptions}
       />

After this change, the LazyLog still adds the gzip header option and ignored the fetch options.

Thanks,
Derek

I using react-lazylog into my project. To get data I using LazyStream. The problem is that last row is not displaying.

As I Investigated you using position: absolute for it. Last row has incorrect top attribute for position absolute.

Second problem is property follow - it's not working.

My code:
<ScrollFollow startFollowing> {({follow, onScroll}) => ( <LazyStream url={URL} follow={follow} onScroll={onScroll} /> )} </ScrollFollow>

This is related to taskcluster/taskcluster#1002 .

I found when I controlled the highlight prop via state, that once highlight has been set once, it is hard to remove. I tried setting my state highlight value to null, but the visible highlight remained. I had to set it to -1 for it to visibly show as not-highlighted. Seems like null and undefined should remove highlighting.

Hi, I have gone through your documentation but i couldn't find a solution which loads contents from log file after every n seconds and displays it.

Scenario

I have a url which returns my desired log file content and is updating randomly.

I want react-lazylog to have a timer which fetches data from the target url and updates the log file content after every n period of time.

Is there any possible prop or functionality in react-lazylog i am missing which targets this situation?

And sorry for creating issue for asking information.

I have problem with react-lazylog on production.
When I use UglifyJs I've got:

ERROR in e5cf7b4c07bad8fabb92.js from UglifyJs docker_loger | Unexpected token: name (b) [e5cf7b4c07bad8fabb92.js:130961,1523]

Also webpack 4.0 and webpack-dev-server": ^3.1.0 have the same problem.

I would like to enable word wrap so that there is no need to do horizontal scrolling.
I tried to add css class to lineClassName with word-wrap property set to break-word.
Unfortunately, this did not work.

First awesome log viewer. It was a breeze to setup, but when I went to build my app I got a message in my console cause, CAR was unable to uglify this library. I got a link to the following
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#npm-run-build-fails-to-minify

Would it be possible to have pre-compiled 'binaries' sent when you guys put this on npm?

I hacked together a fork that used webpack directly, if it helps, but I am afraid it too messy to even deem worthy of a proper pull.
https://github.com/surbas/react-lazylog

When using the mouse to quickly scroll to the bottom, because the width of a row above is larger than the actual width, the view as shown in the figure below keeps shaking:

In the README.md it says that ES5 versions of components are available.

In fact, in the example snipped it imports 'react-lazylog/lib/LazyLog.es5' and 'react-lazylog/lib/LazyStream.es5'.

I managed to import the first one, but not LazyStream.es5.

I have inspected inside node_modules/react-lazylog/lib and these are the files:

LazyLog.es5.js  LazyLog.es5.js.map  LazyLog.js  LazyLog.js.map

I've tried to build the package by myself (by cloning the repo (v2.0.0) and yarn && yarn build), I got the same result:

→ yarn build
yarn run v1.1.0
$ neutrino build && neutrino build --options.legacy
✔ Building project completed
Hash: 06d4d0a7decb0dc804ce
Version: webpack 3.7.1
Time: 2967ms
         Asset     Size  Chunks             Chunk Names
    LazyLog.js  23.2 kB       0  [emitted]  LazyLog
LazyLog.js.map  59.4 kB       0  [emitted]  LazyLog
✔ Building project completed
Hash: 22689990862c24805dc8
Version: webpack 3.7.1
Time: 2708ms
             Asset     Size  Chunks             Chunk Names
    LazyLog.es5.js  28.3 kB       0  [emitted]  LazyLog
LazyLog.es5.js.map  59.4 kB       0  [emitted]  LazyLog
✨  Done in 10.86s.

I guess something is wrong in .neutrinorc.js.

Any clue on how to fix it?

Thanks in advance.

I've got this:

Uncaught TypeError: Cannot read property 'includes' of undefined
    at S.value [as renderRow] (index.js?7e23:1)
    at rowRenderer (index.js?7e23:1)
    at List._this._cellRenderer (List.js?0525:82)
    at defaultCellRangeRenderer (defaultCellRangeRenderer.js?614f:107)
    at Grid._calculateChildrenToRender (Grid.js?0f6f:871)
    at Grid.componentWillUpdate (Grid.js?0f6f:669)
    at updateClassInstance (react-dom.development.js?cada:6604)
    at updateClassComponent (react-dom.development.js?cada:7848)
    at beginWork (react-dom.development.js?cada:8225)
    at performUnitOfWork (react-dom.development.js?cada:10224)

from line: 419 index.js

    return (
      <Line
        className={lineClassName}
        highlightClassName={highlightLineClassName}
        rowHeight={rowHeight}
        style={style}
        key={key}
        number={number}
        formatPart={formatPart}
        selectable={selectableLines}
        highlight={highlight.includes(number)}
        onLineNumberClick={this.handleHighlight}
        data={ansiparse(decode(lines.get(index)))}
      />

implementation:

 <LazyLog
          rowCount={10}
          highlight={[1,2,3]}
          url="https://taskcluster-artifacts.net/XEyu7ICDSsGZdSAwPs9Wnw/0/public/logs/live_backing.log"/>

According to the documentation, ScrollFollow should be used like this:

<ScrollFollow
    startFollowing={true}
    render={({ follow, onScroll }) => (
        <LazyLog url="http://example.log" stream follow={follow} onScroll={onScroll} />
    )}
/>

Where onScroll prop of LazyLog should trigger upon user scrolling.
However this prop does not exist either in the code nor documentation of Lazylog component.

This is true even in the demo and documentation page:

The "follow" is not stopped when I scroll to the top.

Looks a similar problem to #11

The error was fixed in 3.1.4 using the css import but now it is back in 3.2.4 with a bit different error.

Uncaught TypeError: r.n is not a function

I guess this also somekind of API change.

Cheers

We'd like to style stderr output differently for the entire line, which would be easiest to achieve by allowing lineClassName to be a callback which receives the content of that line. The formatPart callback almost achieves this, but it only affects the line's content, not the whole line.

This could also be used for line highlighting, allowing the Line components to not care about highlighting, and having it instead controlled by the parent component.

Hi,

Any advice on how to use react-lazylog in projects with babel@7 and core-js@3?

After a day spent on some research, I found out that the root cause seems to be this issue in the react-virtualized repository:
bvaughn/react-virtualized#1373
I tried many (if not all of) the workarounds suggested in the above issue with no luck.

I'm trying to get started using react-lazylog and add it to an existing large React app that uses parcel + babel 7 for bundling, and it seems react-lazylog can't be rendered with this setup - it seems it has a conflict with corejs-3 (which is the stable and recommended version of core-js).

Any suggestions?

Steps to reproduce:

• create a new app with create react app --typescript
• add parcel(tried with parcel 1 and parcel 2) as a dev dependency
• add react-lazylog as a dependency
• add start, build and serve scripts to package.json:

  "scripts": {
    "start": "tsc --noEmit && parcel public/index.html -p 5000 --dist-dir build --open",
    "build": "NODE_ENV=production parcel build public/index.html --dist-dir build",
    "serve": "serve -s ./build -l 5000",

• run yarn build && yarn serve

Warning at build time:

$ yarn build && yarn serve
yarn run v1.22.4
$ NODE_ENV=production parcel build public/index.html -d build
⚠️  Could not load existing sourcemap of "../node_modules/react-lazylog/build/index.js".

Error message at runtime - browser console:

require(...).Object is undefined

called "formatPart" and not "nextFormatPart".

Hello there 👋,
first of all thanks for creating and maintaining this library. It rocks!

I do have a problem/question though: The logfiles im passing to react-lazylog, often do have stack-traces and therefore line breaks in them. Is there a way to parse \n as a line break and automatically adjust the line height of the LogLine? If not, would the team be interested in such a feature?

Example line from one of the logfiles I'm working with:
[Wed Jun 12 13:50:33.219398 2019] [proxy_fcgi:error] [pid 7566:tid 139658060338944] [client 192.168.1.114:47268] AH01071: Got error 'PHP message: PHP Fatal error: Uncaught Error: Call to undefined function switch_to_blog() in /var/www/example.org/release/20190612-132939/website/wp-content/mu-plugins/wp-tools.php:67\nStack trace:\n#0 /var/www/example.org/release/20190612-132939/website/wp-content/plugins/casino/shortcodes/header/header.php(77): wp_tools::get_operator_list('casino')\n#1 /var/www/example.org/release/20190612-132939/website/wp-includes/class-wp-hook.php(286): casino_header_vc('')\n#2 /var/www/example.org/release/20190612-132939/website/wp-includes/class-wp-hook.php(310): WP_Hook->apply_filters(NULL, Array)\n#3 /var/www/example.org/release/20190612-132939/website/wp-includes/plugin.php(453): WP_Hook->do_action(Array)\n#4 /var/www/example.org/release/20190612-132939/website/wp-content/plugins/js_composer/js_composer.php(245): do_action('vc_before_init')\n#5 /var/www/example.org/release/20190612-132939/website/wp-includes/class-wp-hook.php(286): Vc_Manager->init('')\n#6 /var/www/example.org/rele...\n', referer: https://www.example.org/registrieren/

Cheers,
Tom

Is it possible?

when use this component with url return a string without line break \n, it display 'No content', please help to check it, thanks very much!

Is it possible to collapse parts of the log output?

The logs I'm looking to view / stream with this contain a lot of junk data unfortunately, and I was hoping to be able to collapse it.

Basically what I'm aiming for is something like:

1 | a relevant log line
[+]
6 | a relevant log line
[+]
8 | another relevant log line

So if line 2 is collapsed, and line 3 should be collapsed, it gets lumped in with line 2:s group.

Hello, I seem to have encountered some problems. Can you help me see it? thank you very much.
I can’t choose the version 4.5.3 in my terminal, but this version has been released on npm.

os: macOS big sur
node: v12.10.0
npm: v6.10.3

Even when there is no text present in the search bar, it searches within the log. And if the filter button(those four horizontal lines) is active, it does not show any log with message No filter results. In my opinion, search should not be performed when the searchbar is empty

When log have some long lines, the horizontal scroll bar is showing at the bottom, so we must scroll down to scroll hozirontaly.

Not really handy with ton of rows.

Treeherder has just switched from unified-logviewer to react-lazylog.

We've just had a regression bug filed:
https://bugzilla.mozilla.org/show_bug.cgi?id=1506627

If one selects more lines than the screen can display and then tries to copy it, the clipboard will not contain all of the selected line but the last ones will be missing.

Steps to reproduce:

1. Go to https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=211191928&repo=autoland&lineNumber=2980
2. Select from the TEST-START to the end of the crashing thread (lines 2973-3124).
   Scroll up and down to lose the selection or hit Ctrl+C and try to paste it somewhere. The not visible part will be gone.

@eliperelman any ideas? I thought react-lazylog used a similar approach to unified-logviewer (I haven't looked at the codebases of either admitedly), so this regression was surprising.

I'll like to be able to add some HTML to the search bar to add a few buttons. Since there's lots of screen real-estate on the left side, this would be handy placement.

Perhaps via children?

Hi
I've noticed strange behavior. If lazylog's parent container have style height: 100% and doesn't have other elements then It will fail with error: error uncaught error:
invalid offset NaN specified

Example:

<div style={{"height":"100%"}}>
      <LazyLog text='Hello' />
</div >

tiburon-security/jupyterlab_scheduler#6

Thank you for your fantastic library. I want to do search for logs in this library. Because this library is built with react-virtualized. It seems that I cannot do search with the browser. I have not found any search api in the document. Could you give me a way to do search with that? Thanks.

I've made a view to display logging on a page from multiple pages. LazyLog is exactly what I need except it appends data instead of replacing it when provided as text.
Useage:
<LazyLog extraLines={0} enableSearch text={logging} caseInsensitive follow={follow} />

Currently I'm in control of the data that is provided to my components. Since it is possible to view multiple logging files, the data needs to change. Is there a "reset" property that will reset the previous logging?

I would like to use this component to render status/error logs in my application. The React application will be generating these messages itself based on Websocket messages, errors, or other events. When there's an error, a message will be added to an array somewhere.

Is there a way I can pass the array to the LazyLog component instead of using a URL? Is there a similar component I could use that allows passing in an array?

This is more of a question than anything. I have a file with timestamps that match line to line with the log files. Is it possible to break the log viewer into two columns one of the time stamps and the other for the content. Then the user can toggle the timestamp.

Thanks,
Derek

When viewing the log a horizontal scrollbar is viewable in the middle of the log view when the logs are small but if the logs are long the bar is hidden until scrolled to the bottom

See Screenshots:

small logs:

big logs:
no scrollbar visible

scrollbar only visible when scrolled to bottom

Expected:

The scrollbar is placed at the edge of the view panel
Actual:

The horizontal scrollbar is placed in the middle of the view panel when logs are small

LogPanel.tsx

import React from 'react';
import { LazyLog } from 'react-lazylog';

export interface LogPanelProps {
    readonly url: string;
    readonly onError?: () => void;
}

export function LogPanel({ url, onError }: LogPanelProps) {
    const props: LazyLogProps = {
        url,
        follow: true,
        stream: true,
        extraLines: 1,
        selectableLines: true,
        fetchOptions: {
            method: 'GET',
            credentials: 'same-origin',
            cache: 'no-cache'
        }
    };
    if (onError) {
        props.onError = onError;
    }

    return (<div style={{
        backgroundColor: 'black',
        height: '600px',

    }}>
            <LazyLog {...props} />
        </div>
    );
}

LogPanel.story.tsx

import React from 'react';
import { storiesOf } from '@storybook/react';
import { LogPanel } from './LogPanel';

storiesOf('Common', module)
    .add('LogPanel long logs', () =>
        <LogPanel
            url="https://gist.githubusercontent.com/helfi92/96d4444aa0ed46c5f9060a789d316100/raw/ba0d30a9877ea5cc23c7afcd44505dbc2bab1538/typical-live_backing.log"
        />)
    .add('LogPanel short logs', () => <LogPanel
        url="https://gist.githubusercontent.com/scherler/2082ed247167f8915a868d7ef497197e/raw/f7ec1868a5218539e55cdb918760b6e1e7c45924/small.log"
    />)

OS: Windows 10
NodjeJs: 12.14
NPM: 6.13.4
Yarn: 1.22.4

Kindly let me know any dependencies/versions.

I'm working on typescript defintions for react-lazylog and noticed any inconsistency.

Line has an onRowClick property, which gets passed into LineContent's onClick prop. However, LineContent does not have an onClick prop and therefore cannot be triggered.

https://github.com/mozilla-frontend-infra/react-lazylog/blob/master/src/components/Line/index.jsx#L76

https://github.com/mozilla-frontend-infra/react-lazylog/blob/master/src/components/LineContent/index.jsx#L13

I am using LazyLog as follows:

<LazyLog enableSearch selectableLines caseInsensitive url={this.props.url} scrollToLine={Number(this.props.lineNumber)+5} highlight={Number(this.props.lineNumber)} onClick={() => {debugger}} > <Line onRowClick={() => {debugger}} /> <LineNumber onClick={() => {debugger}} /> </LazyLog>

I cant get anything to trigger. What am I doing wrong?