mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-21 09:38:01 +02:00
Mobile: Add share button to log screen (#8364)
Co-authored-by: Laurent Cozic <laurent22@users.noreply.github.com>
This commit is contained in:
parent
f2d058dceb
commit
53c82434be
@ -462,6 +462,7 @@ packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/NoteExport
|
||||
packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/NoteExportButton.js
|
||||
packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/exportAllFolders.js
|
||||
packages/app-mobile/components/screens/ConfigScreen/configScreenStyles.js
|
||||
packages/app-mobile/components/screens/LogScreen.js
|
||||
packages/app-mobile/components/screens/Note.js
|
||||
packages/app-mobile/components/screens/Notes.js
|
||||
packages/app-mobile/components/screens/UpgradeSyncTargetScreen.js
|
||||
@ -480,6 +481,7 @@ packages/app-mobile/services/voiceTyping/vosk.ios.js
|
||||
packages/app-mobile/setupQuickActions.js
|
||||
packages/app-mobile/tools/buildInjectedJs.js
|
||||
packages/app-mobile/utils/ShareExtension.js
|
||||
packages/app-mobile/utils/ShareUtils.test.js
|
||||
packages/app-mobile/utils/ShareUtils.js
|
||||
packages/app-mobile/utils/TlsUtils.js
|
||||
packages/app-mobile/utils/autodetectTheme.js
|
||||
|
2
.gitignore
vendored
2
.gitignore
vendored
@ -448,6 +448,7 @@ packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/NoteExport
|
||||
packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/NoteExportButton.js
|
||||
packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/exportAllFolders.js
|
||||
packages/app-mobile/components/screens/ConfigScreen/configScreenStyles.js
|
||||
packages/app-mobile/components/screens/LogScreen.js
|
||||
packages/app-mobile/components/screens/Note.js
|
||||
packages/app-mobile/components/screens/Notes.js
|
||||
packages/app-mobile/components/screens/UpgradeSyncTargetScreen.js
|
||||
@ -466,6 +467,7 @@ packages/app-mobile/services/voiceTyping/vosk.ios.js
|
||||
packages/app-mobile/setupQuickActions.js
|
||||
packages/app-mobile/tools/buildInjectedJs.js
|
||||
packages/app-mobile/utils/ShareExtension.js
|
||||
packages/app-mobile/utils/ShareUtils.test.js
|
||||
packages/app-mobile/utils/ShareUtils.js
|
||||
packages/app-mobile/utils/TlsUtils.js
|
||||
packages/app-mobile/utils/autodetectTheme.js
|
||||
|
195
packages/app-mobile/components/screens/LogScreen.tsx
Normal file
195
packages/app-mobile/components/screens/LogScreen.tsx
Normal file
@ -0,0 +1,195 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { FlatList, View, Text, Button, StyleSheet, Platform, Alert } from 'react-native';
|
||||
import { connect } from 'react-redux';
|
||||
import { reg } from '@joplin/lib/registry.js';
|
||||
import { ScreenHeader } from '../ScreenHeader';
|
||||
import time from '@joplin/lib/time';
|
||||
const { themeStyle } = require('../global-style.js');
|
||||
import Logger from '@joplin/utils/Logger';
|
||||
const { BaseScreenComponent } = require('../base-screen.js');
|
||||
import { _ } from '@joplin/lib/locale';
|
||||
import { MenuOptionType } from '../ScreenHeader';
|
||||
import { AppState } from '../../utils/types';
|
||||
import Share from 'react-native-share';
|
||||
import { writeTextToCacheFile } from '../../utils/ShareUtils';
|
||||
import shim from '@joplin/lib/shim';
|
||||
|
||||
const logger = Logger.create('LogScreen');
|
||||
|
||||
class LogScreenComponent extends BaseScreenComponent {
|
||||
private readonly menuOptions: MenuOptionType[];
|
||||
|
||||
public static navigationOptions(): any {
|
||||
return { header: null };
|
||||
}
|
||||
|
||||
public constructor() {
|
||||
super();
|
||||
|
||||
this.state = {
|
||||
logEntries: [],
|
||||
showErrorsOnly: false,
|
||||
};
|
||||
this.styles_ = {};
|
||||
|
||||
this.menuOptions = [
|
||||
{
|
||||
title: _('Share'),
|
||||
onPress: () => {
|
||||
void this.onSharePress();
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
private async onSharePress() {
|
||||
const limit: number|null = null; // no limit
|
||||
const levels = this.getLogLevels(this.state.showErrorsOnly);
|
||||
const allEntries: any[] = await reg.logger().lastEntries(limit, { levels });
|
||||
const logData = allEntries.map(entry => this.formatLogEntry(entry)).join('\n');
|
||||
|
||||
let fileToShare;
|
||||
try {
|
||||
// Using a .txt file extension causes a "No valid provider found from URL" error
|
||||
// and blank share sheet on iOS for larger log files (around 200 KiB).
|
||||
fileToShare = await writeTextToCacheFile(logData, 'mobile-log.log');
|
||||
|
||||
await Share.open({
|
||||
type: 'text/plain',
|
||||
filename: 'log.txt',
|
||||
url: `file://${fileToShare}`,
|
||||
failOnCancel: false,
|
||||
});
|
||||
} catch (e) {
|
||||
logger.error('Unable to share log data:', e);
|
||||
|
||||
// Display a message to the user (e.g. in the case where the user is out of disk space).
|
||||
Alert.alert(_('Error'), _('Unable to share log data. Reason: %s', e.toString()));
|
||||
} finally {
|
||||
if (fileToShare) {
|
||||
await shim.fsDriver().remove(fileToShare);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public styles() {
|
||||
const theme = themeStyle(this.props.themeId);
|
||||
|
||||
if (this.styles_[this.props.themeId]) return this.styles_[this.props.themeId];
|
||||
this.styles_ = {};
|
||||
|
||||
const styles: any = {
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
paddingLeft: 1,
|
||||
paddingRight: 1,
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
},
|
||||
rowText: {
|
||||
fontSize: 10,
|
||||
color: theme.color,
|
||||
},
|
||||
};
|
||||
|
||||
if (Platform.OS !== 'ios') {
|
||||
// Crashes on iOS with error "Unrecognized font family 'monospace'"
|
||||
styles.rowText.fontFamily = 'monospace';
|
||||
}
|
||||
|
||||
styles.rowTextError = { ...styles.rowText };
|
||||
styles.rowTextError.color = theme.colorError;
|
||||
|
||||
styles.rowTextWarn = { ...styles.rowText };
|
||||
styles.rowTextWarn.color = theme.colorWarn;
|
||||
|
||||
this.styles_[this.props.themeId] = StyleSheet.create(styles);
|
||||
return this.styles_[this.props.themeId];
|
||||
}
|
||||
|
||||
public UNSAFE_componentWillMount() {
|
||||
void this.resfreshLogEntries();
|
||||
}
|
||||
|
||||
private getLogLevels(showErrorsOnly: boolean) {
|
||||
let levels = [Logger.LEVEL_DEBUG, Logger.LEVEL_INFO, Logger.LEVEL_WARN, Logger.LEVEL_ERROR];
|
||||
if (showErrorsOnly) levels = [Logger.LEVEL_WARN, Logger.LEVEL_ERROR];
|
||||
|
||||
return levels;
|
||||
}
|
||||
|
||||
private async resfreshLogEntries(showErrorsOnly: boolean = null) {
|
||||
if (showErrorsOnly === null) showErrorsOnly = this.state.showErrorsOnly;
|
||||
|
||||
const levels = this.getLogLevels(showErrorsOnly);
|
||||
|
||||
this.setState({
|
||||
logEntries: await reg.logger().lastEntries(1000, { levels: levels }),
|
||||
showErrorsOnly: showErrorsOnly,
|
||||
});
|
||||
}
|
||||
|
||||
private toggleErrorsOnly() {
|
||||
void this.resfreshLogEntries(!this.state.showErrorsOnly);
|
||||
}
|
||||
|
||||
private formatLogEntry(item: any) {
|
||||
return `${time.formatMsToLocal(item.timestamp, 'MM-DDTHH:mm:ss')}: ${item.message}`;
|
||||
}
|
||||
|
||||
public render() {
|
||||
const renderRow = ({ item }: any) => {
|
||||
let textStyle = this.styles().rowText;
|
||||
if (item.level === Logger.LEVEL_WARN) textStyle = this.styles().rowTextWarn;
|
||||
if (item.level === Logger.LEVEL_ERROR) textStyle = this.styles().rowTextError;
|
||||
|
||||
return (
|
||||
<View style={this.styles().row}>
|
||||
<Text style={textStyle}>{this.formatLogEntry(item)}</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
// `enableEmptySections` is to fix this warning: https://github.com/FaridSafi/react-native-gifted-listview/issues/39
|
||||
|
||||
return (
|
||||
<View style={this.rootStyle(this.props.themeId).root}>
|
||||
<ScreenHeader
|
||||
title={_('Log')}
|
||||
menuOptions={this.menuOptions}/>
|
||||
<FlatList
|
||||
data={this.state.logEntries}
|
||||
renderItem={renderRow}
|
||||
keyExtractor={item => { return `${item.id}`; }}
|
||||
/>
|
||||
<View style={{ flexDirection: 'row' }}>
|
||||
<View style={{ flex: 1, marginRight: 5 }}>
|
||||
<Button
|
||||
title={_('Refresh')}
|
||||
onPress={() => {
|
||||
void this.resfreshLogEntries();
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Button
|
||||
title={this.state.showErrorsOnly ? _('Show all') : _('Errors only')}
|
||||
onPress={() => {
|
||||
this.toggleErrorsOnly();
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const LogScreen = connect((state: AppState) => {
|
||||
return {
|
||||
themeId: state.settings.theme,
|
||||
};
|
||||
})(LogScreenComponent as any);
|
||||
|
||||
export default LogScreen;
|
@ -1,135 +0,0 @@
|
||||
const React = require('react');
|
||||
|
||||
const { FlatList, View, Text, Button, StyleSheet, Platform } = require('react-native');
|
||||
const { connect } = require('react-redux');
|
||||
const { reg } = require('@joplin/lib/registry.js');
|
||||
const { ScreenHeader } = require('../ScreenHeader');
|
||||
const time = require('@joplin/lib/time').default;
|
||||
const { themeStyle } = require('../global-style.js');
|
||||
const Logger = require('@joplin/utils/Logger').default;
|
||||
const { BaseScreenComponent } = require('../base-screen.js');
|
||||
const { _ } = require('@joplin/lib/locale');
|
||||
|
||||
class LogScreenComponent extends BaseScreenComponent {
|
||||
static navigationOptions() {
|
||||
return { header: null };
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.state = {
|
||||
logEntries: [],
|
||||
showErrorsOnly: false,
|
||||
};
|
||||
this.styles_ = {};
|
||||
}
|
||||
|
||||
styles() {
|
||||
const theme = themeStyle(this.props.themeId);
|
||||
|
||||
if (this.styles_[this.props.themeId]) return this.styles_[this.props.themeId];
|
||||
this.styles_ = {};
|
||||
|
||||
const styles = {
|
||||
row: {
|
||||
flexDirection: 'row',
|
||||
paddingLeft: 1,
|
||||
paddingRight: 1,
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
},
|
||||
rowText: {
|
||||
fontSize: 10,
|
||||
color: theme.color,
|
||||
},
|
||||
};
|
||||
|
||||
if (Platform.OS !== 'ios') {
|
||||
// Crashes on iOS with error "Unrecognized font family 'monospace'"
|
||||
styles.rowText.fontFamily = 'monospace';
|
||||
}
|
||||
|
||||
styles.rowTextError = { ...styles.rowText };
|
||||
styles.rowTextError.color = theme.colorError;
|
||||
|
||||
styles.rowTextWarn = { ...styles.rowText };
|
||||
styles.rowTextWarn.color = theme.colorWarn;
|
||||
|
||||
this.styles_[this.props.themeId] = StyleSheet.create(styles);
|
||||
return this.styles_[this.props.themeId];
|
||||
}
|
||||
|
||||
UNSAFE_componentWillMount() {
|
||||
this.resfreshLogEntries();
|
||||
}
|
||||
|
||||
async resfreshLogEntries(showErrorsOnly = null) {
|
||||
if (showErrorsOnly === null) showErrorsOnly = this.state.showErrorsOnly;
|
||||
|
||||
let levels = [Logger.LEVEL_DEBUG, Logger.LEVEL_INFO, Logger.LEVEL_WARN, Logger.LEVEL_ERROR];
|
||||
if (showErrorsOnly) levels = [Logger.LEVEL_WARN, Logger.LEVEL_ERROR];
|
||||
|
||||
this.setState({
|
||||
logEntries: await reg.logger().lastEntries(1000, { levels: levels }),
|
||||
showErrorsOnly: showErrorsOnly,
|
||||
});
|
||||
}
|
||||
|
||||
toggleErrorsOnly() {
|
||||
this.resfreshLogEntries(!this.state.showErrorsOnly);
|
||||
}
|
||||
|
||||
render() {
|
||||
const renderRow = ({ item }) => {
|
||||
let textStyle = this.styles().rowText;
|
||||
if (item.level === Logger.LEVEL_WARN) textStyle = this.styles().rowTextWarn;
|
||||
if (item.level === Logger.LEVEL_ERROR) textStyle = this.styles().rowTextError;
|
||||
|
||||
return (
|
||||
<View style={this.styles().row}>
|
||||
<Text style={textStyle}>{`${time.formatMsToLocal(item.timestamp, 'MM-DDTHH:mm:ss')}: ${item.message}`}</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
// `enableEmptySections` is to fix this warning: https://github.com/FaridSafi/react-native-gifted-listview/issues/39
|
||||
|
||||
return (
|
||||
<View style={this.rootStyle(this.props.themeId).root}>
|
||||
<ScreenHeader title={_('Log')} />
|
||||
<FlatList
|
||||
data={this.state.logEntries}
|
||||
renderItem={renderRow}
|
||||
keyExtractor={item => { return `${item.id}`; }}
|
||||
/>
|
||||
<View style={{ flexDirection: 'row' }}>
|
||||
<View style={{ flex: 1, marginRight: 5 }}>
|
||||
<Button
|
||||
title={_('Refresh')}
|
||||
onPress={() => {
|
||||
this.resfreshLogEntries();
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Button
|
||||
title={this.state.showErrorsOnly ? _('Show all') : _('Errors only')}
|
||||
onPress={() => {
|
||||
this.toggleErrorsOnly();
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const LogScreen = connect(state => {
|
||||
return {
|
||||
themeId: state.settings.theme,
|
||||
};
|
||||
})(LogScreenComponent);
|
||||
|
||||
module.exports = { LogScreen };
|
@ -60,7 +60,7 @@ import NotesScreen from './components/screens/Notes';
|
||||
const { TagsScreen } = require('./components/screens/tags.js');
|
||||
import ConfigScreen from './components/screens/ConfigScreen/ConfigScreen';
|
||||
const { FolderScreen } = require('./components/screens/folder.js');
|
||||
const { LogScreen } = require('./components/screens/log.js');
|
||||
import LogScreen from './components/screens/LogScreen';
|
||||
const { StatusScreen } = require('./components/screens/status.js');
|
||||
const { SearchScreen } = require('./components/screens/search.js');
|
||||
const { OneDriveLoginScreen } = require('./components/screens/onedrive-login.js');
|
||||
|
10
packages/app-mobile/utils/ShareUtils.test.ts
Normal file
10
packages/app-mobile/utils/ShareUtils.test.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import { describe, test, expect } from '@jest/globals';
|
||||
import { pathExists } from 'fs-extra';
|
||||
import { writeTextToCacheFile } from './ShareUtils';
|
||||
|
||||
describe('ShareUtils', () => {
|
||||
test('writeTextFileToCache should write given text to a cache file', async () => {
|
||||
const filePath1 = await writeTextToCacheFile('testing...', 'test1.txt');
|
||||
expect(await pathExists(filePath1)).toBe(true);
|
||||
});
|
||||
});
|
@ -6,13 +6,18 @@ import { CachesDirectoryPath } from 'react-native-fs';
|
||||
// when refactoring this name, make sure to refactor the `SharePackage.java` (in android) as well
|
||||
const DIR_NAME = 'sharedFiles';
|
||||
|
||||
const makeShareCacheDirectory = async () => {
|
||||
const targetDir = `${CachesDirectoryPath}/${DIR_NAME}`;
|
||||
await shim.fsDriver().mkdir(targetDir);
|
||||
|
||||
return targetDir;
|
||||
};
|
||||
|
||||
// Copy a file to be shared to cache, renaming it to its orignal name
|
||||
export async function copyToCache(resource: ResourceEntity): Promise<string> {
|
||||
const filename = Resource.friendlySafeFilename(resource);
|
||||
|
||||
const targetDir = `${CachesDirectoryPath}/${DIR_NAME}`;
|
||||
await shim.fsDriver().mkdir(targetDir);
|
||||
|
||||
const targetDir = await makeShareCacheDirectory();
|
||||
const targetFile = `${targetDir}/${filename}`;
|
||||
|
||||
await shim.fsDriver().copy(Resource.fullPath(resource), targetFile);
|
||||
@ -20,6 +25,16 @@ export async function copyToCache(resource: ResourceEntity): Promise<string> {
|
||||
return targetFile;
|
||||
}
|
||||
|
||||
// fileName should be unique -- any file with fileName will be overwritten if it already exists.
|
||||
export const writeTextToCacheFile = async (text: string, fileName: string): Promise<string> => {
|
||||
const targetDir = await makeShareCacheDirectory();
|
||||
|
||||
const filePath = `${targetDir}/${fileName}`;
|
||||
await shim.fsDriver().writeFile(filePath, text, 'utf8');
|
||||
|
||||
return filePath;
|
||||
};
|
||||
|
||||
// Clear previously shared files from cache
|
||||
export async function clearSharedFilesCache(): Promise<void> {
|
||||
return shim.fsDriver().remove(`${CachesDirectoryPath}/sharedFiles`);
|
||||
|
@ -32,7 +32,10 @@ There's two ways to start in safe mode:
|
||||
|
||||
## Mobile application
|
||||
|
||||
- In the [Configuration screen](https://github.com/laurent22/joplin/blob/dev/readme/config_screen.md), press on the **Log button** and post a screenshot of any error/warning.
|
||||
- In the [Configuration screen](https://github.com/laurent22/joplin/blob/dev/readme/config_screen.md), press on the **Log button**, and from the options menu, press "share".
|
||||
- Attach the shared log (or just relevant portions) to the GitHub issue.
|
||||
|
||||
If you recently (within two weeks) upgraded from 12.11.x to version 12.12.x, [be sure to check the log for and remove any sensitive data shared with Joplin](https://github.com/laurent22/joplin/issues/8211).
|
||||
|
||||
# Creating a low-level bug report on Android
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user